Skip to content

ThasianX/react-native-animated-digits

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e38063b · May 21, 2023

History

3 Commits
May 21, 2023
May 21, 2023
May 21, 2023
May 21, 2023
May 21, 2023
May 21, 2023
May 16, 2023
May 16, 2023
May 16, 2023
May 21, 2023
May 16, 2023
May 16, 2023
May 16, 2023
May 21, 2023
May 21, 2023
May 16, 2023
May 21, 2023
May 21, 2023
May 21, 2023
May 21, 2023

Repository files navigation

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