light port of `ReactTransitionGroup` to work in react-native

Usage no npm install needed!

<script type="module">
  import skyscannerReactNativeTransitiongroup from 'https://cdn.skypack.dev/@skyscanner/react-native-transitiongroup';



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


General usage

important to always give your Transition components a unique key.

import TransitionGroup, { FadeInOutTransition } from 'react-native-transitiongroup';
  <FadeInOutTransition key="loader">
     {this.state.isLoading ? <Loader /> : null}

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


example of scale in/out

class ScaleInOutTransition extends Component {
  constructor() {

    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,

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

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

    return (
        style={[this.props.style, animation]}>