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

| Prop | Description | Type | Default Value | Required | | :----------------------: | :-------------------------------------------------------------------------- | :---------------------------: | :---------------------------------------------------: | :------: | | number | number to animate | Number or String | 0 | true | | enteringAnimation | reanimated entering animation | EntryOrExitLayoutType | FadeIn.duration(400) | false | | exitingAnimation | reanimated exiting animation | EntryOrExitLayoutType | FadeOut.duration(400) | false | | commaLayoutAnimation | comma layout animation (reanimated layout animation) | AnimatedProps['layout'] | LinearTransition.springify() | false | | textStyle | number text style | TextStyle | {fontSize: 25,lineHeight: 25,color: "#fff"} | false | | containerStyle | general container style | ViewStyle | { flexDirection: 'row',height: 25,overflow: "hidden"} | false | | disableDefaultAnimations | disable all animations | Boolean | false | false | | textContainerStyle | number text container style | ViewStyle | {justifyContent: 'center',alignItems: 'center'} | false | | duration | number animation duration (ms) | Number | 1000 | false | | easing | number animation easing function (reanimated) | EasingFunction | Easing.inOut(Easing.ease) | false | | textHeight | number container height for animate (you must read !! IMPORTANT !! section) | Number | 25 | false |

License

This project is licensed under the MIT License.