An attempt to revive the action

Question

so basically I'm trying to get this rendering function to actually update the value in real time (for now, it just goes to the final value after the animation finishes)

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>
}

Run codeHide result

It seems to me, because this library can animate values ​​under the hood, then there must be a way to show what is happening. Or is there some content / value that I can use in style?

I tried setting my own setInterval function, but I need it to better fit the time of other animations, and I would like to access the RN Easing library!

thank!

Answer 1

React Native timers, . , , setInterval:

state = {pleaseDisplayMe: 0}

componentDidMount() {
  setInterval(() => {
    this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
  }, 1000);
}

render() {
  return (
    <Text>{this.state.pleaseDisplayMe}</Text>
  )
}

, , Animated , . , ( React Native), :

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

(https://github.com/wkh237/react-native-animate-number) .

import AnimateNumber from '../AnimateNumber';

const targetNumber = 1000;

<AnimateNumber
  value={targetNumber}
  interval={26} // in miliseconds
  formatter={(number) => parseInt(number)}
  easing={'easeOut'}
/>

, , ( 0 1000, , 33.3280329804, ).

, lib, , ( 0). ( ), dist/index.js , .

, , , prop , :

    this.state = {
      value : 0,
      displayValue : 0
    }

:

this.state = {
      value : props.value,
      displayValue : props.value,
    }