Out/In animation on same element in React Native

Question

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>

score 2 · Accepted Answer · answered Sep 03 '18 at 13:18

2

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

answered Sep 03 '18 at 13:18

slashsharp

2,823
2
19
26

This doesn't solve my issue. i want that the component will fade out the old data and fade in the new one. Since `react-native-animatable` is declarable, how do I ddo this? – khateeb Sep 03 '18 at 14:07
that is just for guidance, you can change the this.view.fadeOut or this.view.fadeIn upon retrieving the data to simulate the fadeOut fadeIn effect – slashsharp Sep 03 '18 at 14:11
Yeah, sorry, it did. – khateeb Sep 03 '18 at 14:16
But which lifecycle method should I use for the fadeOut and the fadeIn? – khateeb Sep 03 '18 at 14:17
it doesn't have to be a lifecycle method, whenever you want to animate the animatable component, that's how you do it – slashsharp Sep 03 '18 at 14:18
The text will fadeOut and the new text will fadeIn. I don't know when to do the fadeOut in this case. – khateeb Sep 03 '18 at 14:19
that would depend on your app, are you fetching a data? maybe before you fetch you can fadeOut the component – slashsharp Sep 03 '18 at 14:20
No, the data is already fetched. I am just replacing the data on a swipe up and swipe down. – khateeb Sep 03 '18 at 14:21
maybe you can use setTimeout then to fadeOut and fadeIn the component – slashsharp Sep 03 '18 at 14:22

Out/In animation on same element in React Native

1 Answers1