@skyscanner/react-native-transitiongroup

react-native-transitiongroup

Works similar to ReactTransitionGroup found in react, but reimplemented in seperate library to work better with react-native

https://github.com/reactjs/react-transition-group/issues/6

General usage

important to always give your Transition components a unique key.

import TransitionGroup, { FadeInOutTransition } from 'react-native-transitiongroup';

<TransitionGroup>
  <FadeInOutTransition key="loader">
     {this.state.isLoading ? <Loader /> : null}
  </FadeInOutTransition>
</TransitionGroup>

Custom Transitions

You can easily create your own transitions, by creating your own Transition component. TransitionGroup will look for the following methods to be called on its child components to animate enter and leave

componentWillEnter(callback)
componentWillLeave(callback)

example of scale in/out

class ScaleInOutTransition extends Component {
  constructor() {
    super();

    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentWillEnter(callback) {
    Animated.timing(this.state.progress, {
      toValue: 1,
      delay: this.props.inDelay,
      easing: this.props.easing,
      duration: this.props.inDuration,
    }).start(callback);
  }

  componentWillLeave(callback) {
    Animated.timing(this.state.progress, {
      toValue: 0,
      delay: this.props.outDelay,
      easing: this.props.easing,
      duration: this.props.outDuration,
    }).start(callback);
  }

  render() {
    const animation = {
      transform: [
        { scale: this.state.progress },
      ]
    };

    return (
      <Animated.View
        style={[this.props.style, animation]}>
        {this.props.children}
      </Animated.View>
    );
  }
}