React Native Animated Digits: Stunning Digit Animations


Beautifully animated digits for React Native.

regular.gif lottery.gif long.gif


npm install react-native-animated-digits


import { AnimatedDigits } from 'react-native-animated-digits';

// ...

const [usd, setUsd] = useState('0');

return (
    <View style={styles.container}>
        <AnimatedDigits value={usd} />
        // ...


value stringA number parseable string, if using the default makeAnimatedItems or a custom string if using a custom makeAnimatedItems
prefix stringThe value to display in front of the digits
prefixProps{}TextStylePrefix text style
suffix stringThe value to display after the digits
suffixProps{}TextStyleSuffix text style
widthSCREEN_WIDTH*0.9numberSpecified animated digits width
textProps{fontSize: SCREEN_WIDTH*0.3, letterSpacing: -2}TextStyleDigits text style
makeAnimatedItemsFormats value with commas and creates the animated items(value: string) => AnimatedItem[]Makes the array for the animated items to display
keyExtractorEach item type is given a unique key(value: AnimatedItem) => React.KeyGets a unique key for the given item
initialEnterAnimationConfigFade in enter animationEnterAnimationConfigThe type of animation for the first render of the animated digits
enterAnimationConfigCreatorScale-fade enter animationEnterAnimationConfigThe type of animation for new digits added to the view
exitAnimationConfigCreatorScale-fade exit animationExitAnimationConfigThe type of animation for digits removed from the view
layoutAnimationLinear layout transitionLayoutAnimationConfigThe type of animation during transitions, ie digits being added/removed
style{}ViewStyleContainer style


Extending animations is as simple as below. See the example repo for how to override the animation to achieve a lottery-like animation.

const lotteryEnterAnimationConfigCreator: EnterAnimationConfigCreator = (() => {
    return {
        [AnimatedItemType.DIGIT]: () =>
                translateY: {
                    from: 10,
                    to: 0,
                duration: 150,


return (


I do not plan to maintain this repo. However, please feel free to make pull requests for any features/bugs.

Download details:

Author:  ThasianX

License: MIT license


React Native Animated Digits: Stunning Digit Animations
1.30 GEEK