react-native-animated-digits
v0.2.0
Published
test
Downloads
18
Readme
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