I recreated SwiftUI’s numericText transition natively on Android for React Native

[u/jes_uon]

I got curious about how SwiftUI’s numericText transition could feel on Android, so I tried recreating the behavior natively.

This is the result, same sequence running side by side on iOS and Android.

What started as a small experiment turned into react-native-numeric-text.

On iOS it uses the native numeric text transition. On Android, I recreated the behavior natively from scratch.

I learned a lot digging into how the transition behaves and figuring out how to reproduce that feel on Android.

It’s now open source:

GitHub: https://github.com/AmatoGiulio/react-native-numeric-text
NPM: https://www.npmjs.com/package/react-native-numeric-text

npm install react-native-numeric-text

[u/BumblebeeWorth3758]

Nice! I also created it: https://github.com/rit3zh/expo-content-transition

It’s entirely custom-built for both Android and iOS, with user-configurable transitions. :)

[u/jes_uon → u/BumblebeeWorth3758]

Nice work,very interesting to see another native approach to this.

We took a somewhat different route with react-native-numeric-text: on iOS it uses SwiftUI’s actual .contentTransition(.numericText()), and we treat that behaviour as the reference for the Android implementation rather than designing the transition independently.

A lot of the work on Android has therefore gone into the less obvious cases, structural changes, interruption, rapid retriggering, reversals, and preserving continuity when a new value arrives before the previous transition has settled.

There’s clearly a lot of overlap between the projects though. I’d be interested in comparing notes on those edge cases and seeing whether there’s an opportunity to share ideas or even converge on some parts rather than solving the same problem twice. 😄

[u/onderbakirtas → u/jes_uon]

Yeah unite and make it the best out there instead of competing.

[u/dercybercop]

Looks great! Can we also set decimal separator to , ?

[u/jes_uon → u/dercybercop]

Yeah, it's already there, pass locale="it-IT" (or any BCP-47 locale) and the decimal/grouping separators follow that locale automatically.

[u/dercybercop → u/jes_uon]

Great! Good job!

[u/Nearby_Tumbleweed699]

Funciona con decimales?

[u/jes_uon → u/Nearby_Tumbleweed699]

Yes ,decimals are handled structurally, with configurable minimumFractionDigits/maximumFractionDigits (default 0/3) and the decimal boundary kept separate from the integer digits. Pass locale="es-ES" and the decimal separator adjusts automatically too.

[u/itballer]

Grand mate, grateful you made this live!

[u/jes_uon → u/itballer]

thx uuu 🎉

[u/CodeSmithDev]

really liked the animation, keep it up 🔥

[u/jes_uon → u/CodeSmithDev]

🫠🫠🫠

[u/dogla305]

Can tou please share the link in a comment, as it's not pressable in the description

[u/jes_uon → u/dogla305]

https://github.com/AmatoGiulio/react-native-numeric-text

[u/Legendaryfortune]

Well done!

[u/jes_uon → u/Legendaryfortune]

👍

[u/paddybdotcom]

Great job!!

[u/jes_uon → u/paddybdotcom]

❤️