V

Volodymyr

3 min

A ticking number is four different animations

A counter can tick through the Animated API, Reanimated, Skia, or a native view. Here is why those are different jobs, and where I keep the ones I find.

I was tagging number transitions and kept landing on the same four runtimes. Native. Skia. Reanimated. The Animated API. I was not hunting for a missing stack. I was sorting ones that were already there.

The first snippet does not tick the digits

This is the first thing I see, and the first thing I used to write:

const n = useRef(new Animated.Value(0)).current

Animated.timing(n, {
  toValue: 1284,
  duration: 800,
  useNativeDriver: true,
}).start()

useNativeDriver: true will not write a <Text> child. The native driver does not animate text content. You turn it off, you round n on the JS thread, and the digits jump: 1283, then 1284. No reel. No per-digit spring. A stats pill and a slot-machine odometer both fail the same way.

That is most of the confusion around React Native number animation. People search for one effect. They get four runtimes.

The four stacks do not share a renderer

The Animated API is the built-in. It is the right first try for a progress label that just has to arrive. Once the digit itself has to move, you are on the JS thread, and a busy screen will show it.

Reanimated keeps the interpolation on the UI thread. useDerivedValue can track the number while the frame is painted. You still have to decide how the digit is drawn. A worklet does not give you a reel for free.

React Native Skia is the other kind of control. The digit is a glyph you paint. You own the typeface, the blur, the way an 8 becomes a 9. You also own the fact that it is not a Text node. Accessibility and system font scaling are your problem unless the author wired them.

Native is the opposite trade. A system label or a platform ticker already knows how to draw a number. You do not own the paint. You also do not own next year's type ramp.

A balance on a wallet screen, a step count, a checkout total, a live viewer count — they can all want a different one of those.

I was sorting, not filling a hole

The finding problem is the same one I hit on keyboards and sheets. You remember a number that rolled instead of jumped. You do not remember the repo. Screenshots of 1,284 do not help. You need to see the tick.

I put the ones I find in the Number filter. Native, Skia, Reanimated, Animated API — the main stacks are already on that shelf. I add more when I find them.

A filter does not pick the runtime for you. Some of what I collect is a video of the motion, not code you can paste. It removes the part where you do not know what the tick is supposed to look like.

If you already know you want a reel, a glyph, or a system label, skip the wide search and go straight to that row.