How can I reset the animation in react-native-animatable whenever props change?

Question

I would like to reset the animation and replay as the props change, but it works only once at first. I used the react-native-animatable npm library and I could not find the solution to the resetting animation.

This is my code with animation.

import * as Animatable from 'react-native-animatable';

function ResetAnimation (changeAnimation) {
   const zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  };
  return (
    <View>
       <Animatable.View animation = {zoomAnimation}>
         <View>
          // At first it works well but next no animation.
          .......
         </View>
       </Animatable.View>
    </View>
 );
}

Help me.

score 1 · Accepted Answer · answered Oct 30 '19 at 07:45

you can define the animation as the state:

construstor(props){
  super(props)
  this.state = {
     zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  }
   }
}

// then use it in the view
<Animatable.View animation = {this.state.zoomAnimation}>
         <View>
          // At first it works well but next no animation.
          .......
         </View>
       </Animatable.View>

// when you want reset it, you call this.setState,
this.setState({
zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  }

})

How can I reset the animation in react-native-animatable whenever props change?

1 Answers1