Beautifully animated digits for React Native

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