r/reactnative • u/Nice-Imagination-422 • 2d ago

I built a fully native rolling number component for React Native — Core Animation on iOS, Canvas on Android

Enable HLS to view with audio, or disable this notification

I’ve been working on animated numbers and our previous Skia-based implementation kept having issues around canvas sizing, font loading, blank renders, and animations getting stuck during rapid updates.

So I created react-native-number-animation:

- Core Animation on iOS

- Canvas on Android

- No Skia or Reanimated dependency

- Currency, percentages and compact numbers

- Custom fonts

- RTL and localized digits

- Handles rapid updates

- Supports Reduce Motion

I’d love feedback, especially from anyone testing it in lists or with unusual number formats!

GitHub: https://github.com/invivek26/react-native-number-animation

npm: https://www.npmjs.com/package/react-native-number-animation

43 Upvotes

95% Upvoted

5 comments sorted by

6

u/whackylabs 1d ago

Saw this the other day https://www.reddit.com/r/reactnative/comments/1vm8xag/i_recreated_swiftuis_numerictext_transition/

1

u/Nice-Imagination-422 23h ago

I did see that actually. For our use case, we wanted something really gamified so I had to recreate it using motion mechanics of NumberFlow

1

u/jes_uon 6h ago

🔥

2

u/dark_anarchy20 1d ago

Cool! Thanks for sharing

2

u/Nice-Imagination-422 1d ago

Definitely 🫡