Each digit rolls like an odometer, flashing green or red as it changes.
Pro<NumberTicker />4 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| value The number to show. | number | — |
| decimals Digits after the decimal point. | number | 0 |
| prefix / suffix Static text around the number ("₹", "%"). | string | — |
| separator Thousands separator. | string | false | "," |
| grouping Digit grouping: 1,234,567 or lakh / crore style 12,34,567. | 'thousands' | 'indian' | 'thousands' |
| decimalSeparator Decimal point. | string | "." |
| size 18 / 28 / 40 / 56pt, or a font size. | "sm" | "md" | "lg" | "xl" | number | "md" |
| fontWeight Weight of the digits. | TextStyle['fontWeight'] | "500" |
| color Text colour. | string | theme foreground |
| flash Tint green on increase, red on decrease. | boolean | true |
| animateOnMount Roll up from zero on first render. | boolean | true |
| stagger Delay between columns in ms. | number | 35 |
| textStyle Extra glyph styles. | StyleProp<TextStyle> | — |
| style Style for the row of digits. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Motion
- Each digit springs along its own 0–9 strip, up when the value grows and down when it shrinks, staggered right to left. The text briefly tints green or red on every change.
- Screen readers
- The whole number is one text element, read with its prefix and suffix instead of digit by digit.
- Platforms
- Plain Animated views on iOS, Android and web. The digit rolls use the native driver; only the colour flash runs in JS.
Source
Did you like the content?