React Native Number Animate

🚀 Introducing react-native-number-animate

Elevate your React Native app's user experience with the power of animated numbers! I'm thrilled to present react-native-number-animate, a lightweight and customizable package designed to seamlessly integrate animated numeric displays into your React Native projects.

Features

🔢 Smooth Animations: Bring numbers to life with smooth and eye-catching animations. Whether it's counting up, counting down, or transitioning between values, our package ensures a visually engaging experience for your users.

⚙️ Customization: Tailor the appearance and behavior of animated numbers to suit your app's design language. With customizable fonts, colors, and animation styles, you have the flexibility to create a seamless integration with your app's aesthetics.

🔄 Versatile Usage: Perfect for a variety of use cases, from displaying real-time data updates to creating dynamic counters or countdowns. react-native-number-animate adapts to your needs, providing a versatile solution for numeric animations.

📦 Easy Integration: Effortlessly integrate animated numbers into your React Native application. Our package is designed for simplicity and ease of use, allowing you to focus on enhancing your app's user interface without the hassle of complex implementation.

Demo

Installation

This package is using react-native-reanimated. It should be installed first.

npm install react-native-reanimated react-native-gesture-handler && cd ios && pod install

Then

npm install react-native-number-animate

!! IMPORTANT !!

• lineHeight in textStyle prop and textHeight prop must be THE SAME (Default value is the 25 for both)

• for iOS, you can use just fontSize prop in textStyle prop but it makes glitch in Android when you do not use lineHeight.

• DO NOT FORGET to use overflow:"hidden" and flexDirection:"row" when you change style of container

<AnimatedNumber
    number={number}
    textStyle={{
        fontSize: 25,
        color: "#fff",
    l   ineHeight: 25
    }}
    textHeight={25}
    containerStyle={{
        height: 25,
        flexDirection: 'row',
        overflow: "hidden"
    }}
/>

Basic Usage

import AnimatedNumber from "react-native-number-animate";

function App() {
  return <AnimatedNumber number={number} />;
}

Props

License

This project is licensed under the MIT License.