Skip to content

Draw the /dev/null logo while pulling the Log to refresh - #161

Draft
jubianchi wants to merge 2 commits into
NativePHP:mainfrom
jubianchi:feat/logo-pull-to-refresh
Draft

jubianchi wants to merge 2 commits into
NativePHP:mainfrom
jubianchi:feat/logo-pull-to-refresh

Conversation

@jubianchi

@jubianchi jubianchi commented Nov 3, 2026 •

Copy link
Copy Markdown
Contributor

Pulling a Log page now draws the /dev/null logo instead of the platform spinner, on Android and iOS, in light and dark mode.

  • While pulling, the ink slash grows and the lane outline draws on with the finger. The logo is whole exactly at the refresh threshold, where it bounces once and the phone ticks (haptic).
  • While loading, the outline loops forward: it erases from its start, then draws on again the same way. The ink slash stays.

This depends on work that isn't released yet:

The README lists both with toastkit. Once they are released, the app goes back to tagged versions.

resources/animations/refresh.lottie and refresh-dark.lottie are made from the splash animation, with a pull marker (frames 0-60, linear so the drawing follows the finger) and a refresh marker (frames 60-120, a seamless forward loop). The splash keeps its own animation.

The plugin is added to NativeServiceProvider::plugins() by hand: native:plugin:register can't find the method behind the conditional spread at the end of the array.

Screenshots

log

iOS light iOS dark Android light Android dark
Before
After

Recordings: Android dark, before, Android light, before, iOS dark, after, iOS dark, before, iOS light, after, iOS light, before

At rest the indicator is hidden, so each image is a frame from its recording, taken mid-refresh: the platform spinner before, the logo after. The before shots are on Following, the after shots on Latest.

The Android after screenshots and recordings are missing: the emulator kept hitting system ANRs on an overloaded host when they were due. The plugin's README has an Android GIF of the same indicator in the meantime.

  • No visible change

🤖 Generated with Claude Code

The Log's pull to refresh is going to play the /dev/null logo instead of
the platform spinner. That needs two packages that aren't released yet,
so Composer pulls them from GitHub, like toastkit:

- nativephp/mobile-ui from the feat/refresh-indicator-registry branch of
  jubianchi/mobile-ui (NativePHP/mobile-ui#198), aliased as 0.9.0. A list
  can name a pull-to-refresh indicator that a plugin registers, and
  mobile-ui draws it on Android and iOS.
- jubianchi/nativephp-lottie-refresh-indicator from main, which registers
  the "lottie" indicator and copies resources/animations into the native
  projects.

The plugin is added to NativeServiceProvider::plugins() by hand:
native:plugin:register can't find the method behind the conditional
spread at the end of the array. Only those two packages change in the
lock. The README lists them with toastkit.

🤖 Généré avec Claude Code
Pulling a Log page now draws the /dev/null logo in place of the
platform spinner, through the plugin's "lottie" indicator.

refresh.lottie and refresh-dark.lottie are made from the splash
animation with two markers. "pull" (frames 0-60) follows the finger:
the ink slash grows linearly over the first half and the lane outline
draws on linearly until frame 60, so the logo is whole exactly at the
refresh threshold, where mobile-ui bounces it and plays a haptic. The
splash's eased curves drew most of the outline in the first half of
the pull, so the logo looked done well before letting go would
refresh. "refresh" (frames 60-120) loops forward while loading: the
outline erases from its start, then draws on again the same way, and
frame 120 matches frame 60, so there is no seam and the ink slash
stays.

The splash keeps its own animation.

🤖 Généré avec Claude Code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant