Trying to Animate React Native Text Value - reactjs

Question

so basically im trying to get this render function to actually update the value in real time (as of now it just jumps to the final value upon completion of the animation)
this.state = {
pleaseDisplayMe: Animated.value(0);
}
triggerAnimation(){
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render(){
return <Animated.Text>{this.state.pleaseDisplayMe}</Animated.Text>
}
I feel like because this library can animated values under the hood then there must be a way to display whats happening. Or is there some sort of content/value property I can feed in through style?
I've tried custom writing my own setInterval function, but I need it to line up better with other Animations' timing and I'd love access to RN's Easing library!
thanks!

Answer 1

React Native has timers that you can use. For example, to do what you are trying to accomplish with setInterval:
state = {pleaseDisplayMe: 0}
componentDidMount() {
setInterval(() => {
this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
}, 1000);
}
render() {
return (
<Text>{this.state.pleaseDisplayMe}</Text>
)
}
However, if you are trying to instead trying to actually get the value from the animation, you should attach a listener to Animated and get the value from there as there is no way to synchronously read the value because it might be driven natively. A possibly very poor (I'm also new to React Native) example of this would be something like this:
state = {
pleaseDisplayMe: new Animated.Value(0),
value: 0,
}
triggerAnimation(){
this.state.pleaseDisplayMe.addListener(({value}) => this.setState({value: value}));
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render() {
return (
<Text>{this.state.value}</Text>
)
}

Answer 2

I used this library (https://github.com/wkh237/react-native-animate-number) to achieve that effect.
import AnimateNumber from '../AnimateNumber';
const targetNumber = 1000;
<AnimateNumber
value={targetNumber}
interval={26} // in miliseconds
formatter={(number) => parseInt(number)}
easing={'easeOut'}
/>
The formatter was important for me otherwise it would animate using very long decimals (from 0 to 1000, you would see 33.3280329804 for instance, but with the formatter you only see integers).
Also, looking at the lib source code, I realized that the start number was hardcoded (it always started from 0). Since it's a very simple library (only one file), you can easily copy dist/index.js and paste that into your project and override the code you need.
In my case, I wanted the component to not animate on mounting, but only when the value prop changed, so inside it's constructor I changed:
this.state = {
value : 0,
displayValue : 0
}
to this:
this.state = {
value : props.value,
displayValue : props.value,
}