React-native-animatable: in and out animations

[patrickml]

I cannot find any documentation on how to animation both the entrance and exit of a component.

[oblador]

Did you try swapping the animation prop?

[jedt]

Please explain on how the swapping the animation prop works? I'm trying to animate two images but the first image must end animating before the other image starts. Do you have any code example on how I can do this? I tried looking at the Examples folder but I couldn't find it.

[AmrAbdulrahman]

I did try swapping animation prop like following, but it's not working, any ideas?

component

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animationType: 'slideInRight'
    };
  }

  render() {
    return (
       <Animatable.View animation={this.state.animationType} duration={300}>
           <Text>Hello animations</Text>
       </Animatable.View>
    );
  }

  componentDidMount() {
    this.setState({
      animationType: 'slideOutLeft'
    });
  }
}

[oblador]

If you do it on componentDidMount there's basically no time for the previous animation to happen. You need to do it after it has finished.

[ziad-saab]

I'm also interested in this. It seems like the only possible place to do it is in componentWIllUnmount but that would be too late, and componentDidMount is too early...

In React, the ReactCSSTransitionGroup lets you specify an enter and leave className. Is there a way to achieve a similar effect with Animatable?

[oblador]

If you want to do an animation after the first has finished there's onAnimationEnd. Animating out automatically on node deletion is only possible with something lower-level like LayoutAnimation.

[21301]

this.state = {
animation: "fadeInDown"
};

onAnimationEnd(){
this.setState({
animation: 'fadeInUp'
});
}

animation={this.state.animation} onAnimationEnd={this.onAnimationEnd()} duration={500} easing={'linear'} iterationCount="1"
source={require('img/image.png')}
style={{height: 25, width: 25}}/>

this is not working

[Kumagor0]

const [animation, setAnimation] = useState('bounceIn');

return (
  <Animatable.View
    onAnimationEnd={() => {
      setAnimation('bounceOut');
    }}
    animation={animation}
  >
  ...
  </Animatable.View>
);

works for me

[TinyCamera]

const [animation, setAnimation] = useState('bounceIn');

return (
  <Animatable.View
    onAnimationEnd={() => {
      setAnimation('bounceOut');
    }}
    animation={animation}
  >
  ...
  </Animatable.View>
);

works for me

This doesn't work for me. The view will animate in and then out indefinitely. It seems weird to me that defining an in and out animation for a view is so hard in this library.

[dishcandanty]

In case anyone else runs into this. I wanted a looping in and out animation. This is what I ended up with:

const [animation, setAnimation] = useState('bounceInLeft');

return (
  <Animatable.Text
    animation={animation}
    easing="ease-out"
    onAnimationEnd={() => {
      if (animation === 'bounceInLeft') {
        setAnimation('bounceOutRight');
      } else {
        setAnimation('bounceInLeft');
      }
    }}
    style={styles.text}>
    Loading
  </Animatable.Text>
)