react-native-animated-digits

Beautifully animated digits for React Native.

Installation

npm install react-native-animated-digits

Usage

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

// ...

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

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

Props

name required default types description
value ✅ string A number parseable string, if using the default makeAnimatedItems or a custom string if using a custom makeAnimatedItems
prefix ❌ string The value to display in front of the digits
prefixProps ❌ {} TextStyle Prefix text style
suffix ❌ string The value to display after the digits
suffixProps ❌ {} TextStyle Suffix text style
width ❌ SCREEN_WIDTH*0.9 number Specified animated digits width
textProps ❌ {fontSize: SCREEN_WIDTH*0.3, letterSpacing: -2} TextStyle Digits text style
makeAnimatedItems ❌ Formats value with commas and creates the animated items (value: string) => AnimatedItem[] Makes the array for the animated items to display
keyExtractor ❌ Each item type is given a unique key (value: AnimatedItem) => React.Key Gets a unique key for the given item
initialEnterAnimationConfig ❌ Fade in enter animation EnterAnimationConfig The type of animation for the first render of the animated digits
enterAnimationConfigCreator ❌ Scale-fade enter animation EnterAnimationConfig The type of animation for new digits added to the view
exitAnimationConfigCreator ❌ Scale-fade exit animation ExitAnimationConfig The type of animation for digits removed from the view
layoutAnimation ❌ Linear layout transition LayoutAnimationConfig The type of animation during transitions, ie digits being added/removed
style ❌ {} ViewStyle Container style

Extending

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 {
        ...defaultEnterAnimationConfigCreator,
        [AnimatedItemType.DIGIT]: () =>
            makeAnimation({
                translateY: {
                    from: 10,
                    to: 0,
                },
                duration: 150,
            }),
    };
})();

...

return (
    <AnimatedDigits
        value={usd}
        enterAnimationConfigCreator={customConfigCreator}
    />
)

Contributing

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

License

MIT

GitHub

View Github