Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
react-native-number-animate
Advanced tools
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 Nati
🚀 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.
🔢 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.
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
• 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"
}}
/>
import AnimatedNumber from "react-native-number-animate";
function App() {
return <AnimatedNumber number={number} />;
}
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 |
This project is licensed under the MIT License.
FAQs
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 Nati
We found that react-native-number-animate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.