I have a TextView
which will fadeOutDown
the old data and fadeInDown
the new data on the next render. How do I accomplish this? I am using the react-native-animatable
library and have managed to do one animation but don't know how to do two.
<Animatable.View animation={this.props.animation} style = {styles.innerView2}>
<Text text = "abcd" style = {{alignItems: 'flex-start', width: DEVICE_WIDTH - 20, textAlign: 'left'}}/>
</Animatable.View>
Assign a ref
to the Animatable component and then for example on componentDidUpdate
, you can re-trigger the animation
componentDidUpdate() {
if (this.view !== undefined && this.view !== null) {
this.view.fadeIn(1000);
}
}
<Animatable.View
ref={ref => (this.view = ref)}
animation="fadeIn"
easing="ease-in">
<Text>{this.state.newText}</Text>
</Animatable.View>
Here's a snack for your reference