Examples
Skia Worklet Scrubbing
Zero-latency UI thread updates with SharedValue-driven scrubbing
The sharedValue prop on SkiaNumberFlow enables worklet-driven rendering — the number display updates entirely on the UI thread without crossing the JS bridge. This means updates at 120Hz with zero frame drops.
How scrubbing works
- You provide a
SharedValue<string>— a pre-formatted string like"50.0"or"$1,234.56". - On the UI thread, the worklet reads the string, extracts digits, and drives Skia rendering directly.
useScrubbingBridgeperiodically syncs the digit count back to the JS thread so React can update the layout (number of slots).useScrubbingLayoutcomputes per-slot positions from the worklet string.
The scrubDigitWidthPercentile prop (default: 0.75) controls how wide each digit slot is during scrubbing. Since digit values change rapidly during gestures, the component needs a fixed width per slot. The percentile picks a width between the narrowest (0) and widest (1) digit glyph.