A number animation library for adding some flair to your data
npm i -S react-native-counter-animation
# or
yarn add react-native-counter-animation import { View, Easing } from "react-native";
import { useEffect, useRef, useState } from "react";
import { AnimatedNumber } from "react-native-counter-animation";
const MyComponent = () => {
const [value, setValue] = useState(5000);
const timer = useRef<number | null>(null);
useEffect(() => {
timer.current = setInterval(() => {
setValue(Math.floor(Math.random() * 5000));
}, 5000);
return () => {
clearInterval(timer.current);
timer.current = null;
}
});
return (
<View>
{/* ...your component code */}
<AnimatedNumber
delay={200}
stagger={0}
value={value}
duration={700}
easing={Easing.out(Easing.ease)}
style={{ color: "#fff", fontWeight: "800" }} />
</View>
);
}delay: A millisecond duration to defer the animation
stagger: A millisecond duration to stagger each character's animation
duration: A millisecond duration for the animation
value: A string or number to animate to
easing: An easing function such as a Cubic Bezier
style: Any styling you wish to apply to your text