Animated Text Counter

Animated Text Counter is a React Native component that animates numbers with a slot machine effect, suitable for creating visually appealing numeric transitions. This library is easy to integrate and customizable to fit the styling needs of your mobile application.

Installation

To install the Animated Text Counter, you need to run the following command using npm:

1npm install rn-animated-text-counter

Or using yarn:

1yarn add rn-animated-text-counter

Demo

Watch this quick demo to see the Animated Text Counter in action:

https://github.com/mahecode/rn-animated-text-counter/assets/29339474/68f3c41a-4f02-42fe-ac5b-0e66a6415c3d

Usage

Here is a simple example of how to use the Animated Text Counter in your React Native application:

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import AnimatedTextCounter from 'rn-animated-text-counter';
4
5const App = () => {
6  return (
7    <View style={styles.container}>
8      <AnimatedTextCounter from={0} to={100} />
9    </View>
10  );
11};
12
13const styles = StyleSheet.create({
14  container: {
15    flex: 1,
16    justifyContent: 'center',
17    alignItems: 'center',
18    backgroundColor: '#F5FCFF',
19  }
20});
21
22export default App;

Props

The following props are available to customize the Animated Text Counter:

Prop	Type	Description	Default
from	number	The initial value of the counter.	0
to	number	The final value of the counter.	Required
style	object	Custom style for the container view.	{}
textStyle	object	Custom style for the text component.	{}
containerStyle	object	Custom style for the parent container.	{}

Contributing

Contributions are welcome! Please feel free to submit a pull request or create an issue for bugs, features, or improvements.

License

Animated Text Counter is MIT licensed.