React-native-animatable: How to start animation on state change?

[hafiz703]

As stated above, how do i invoke an animation when my state changes? Currently the component is being animated at componentDidMount but I would like to trigger the same animation when its state changes.

[ttdatt]

Add ref={ci => this.animatedTextRef = ci} to your
Add this to componentDidUpdate()

if(this.animatedTextRef)
   this.animatedTextRef.startAnimation(500, 0, () => {
})

[oblador]

Easiest is to do something like this <Animatable.View animation={this.state.someCondition ? 'fadeIn' : undefined} />.

[sskhandek]

@ttdat89 That snippet worked great! Can you explain what it's doing and how it works?

[ttdatt]

@sskhandek I take a look on source code https://github.com/oblador/react-native-animatable/blob/master/createAnimatableComponent.js#L239 and saw that Animatable component call startAnimation function in componentDidMount.

So all I did is check if componentDidUpdate is called (state changed), we trigger startAnimation for <Animatable.Text /> element

About what is ref, you could read here
https://facebook.github.io/react/docs/refs-and-the-dom.html

[sskhandek]

@ttdat89 Thank you!