Rn-animated-text-counter NPM

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:

npm install rn-animated-text-counter

Or using yarn:

yarn 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:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import AnimatedTextCounter from 'rn-animated-text-counter';

const App = () => {
  return (
    <View style={styles.container}>
      <AnimatedTextCounter from={0} to={100} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

export 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.	`{}`