3

Beautifully animated digits for React Native

 1 year ago
source link: https://reactnativeexample.com/beautifully-animated-digits-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-animated-digits

Beautifully animated digits for React Native.

regular.gif lottery.gif long.gif

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

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK