react-native-slot-numbers

This package was originally named react-native-slot-text, and has been migrated to this repo.

To install dependencies:

npx expo install react-native-reanimated
npx expo install expo-linear-gradient

bun install react-native-slot-numbers @react-native-masked-view/masked-view react-native-easing-gradient

This project was created using bun init in bun v1.1.21. Bun is a fast all-in-one JavaScript runtime.

https://github.com/user-attachments/assets/f9fdb47c-92a7-45b2-93ea-72c0d36d729c

https://github.com/user-attachments/assets/8964574b-a596-414f-95f9-42f53f60d781

Usage

    <SlotText
        fontStyle={styles.animatedNumbers}
        value={`${value}`}
        prefix='$'
        animationDuration={200}
        includeComma={true}
    />

Props

Prop	Type	Default	Description
value	number | string	Required	The value to animate to. Can be a number or a string of numeric characters.
fontStyle	Object (TextStyle)	Required	The style of the text, passed as a TextStyle object.
animationDuration	number	400	The duration of the animation in milliseconds. Only supported when animateIntermediateValues is false.
prefix	string	""	A prefix to the number, such as a currency symbol (e.g., $ or €).
includeComma	boolean	false	Whether to include commas as thousand separators.
animateIntermediateValues	boolean	false	Whether to animate all intermediate numbers between the new value and the current value of a digit. Useful for rapidly changing values to prevent glitches in animation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library