custom-transitions-example.js

class PhotoDetail extends React.Component {
  _getTransitions() {
    const sharedImages = new Transitions.SharedElement(`image-${this.props.photo.url}`);
    const crossFadeScene = new Transitions.Opacity();
    const slideTitle = new Slide();
    const slideDescription = new Slide();
    const scaleFab = new Transitions.Scale();
    // sharedImages(0.7) => crossFadeScene(0.1) => [slideTitle, slideDescription, scaleFab]
    const sharedImageFirst = sequence(
      { sharedImages, duration: 0.7 },
      { crossFadeScene, duration: 0.1 },
      {
        animateContent: together(
          { slideTitle },  // default duration is to use up the rest of transition time
          { slideDescription },
          { scaleFab },
        )
      }
    );
    const sharedImageLast = sequence(
      {
        animateContent: together(
          { slideTitle },
          { slideDescription },
          { scaleFab },
          { crossFadeScene }
        ), duration: 0.2,
      },
      { sharedImages, },
    );
    const { fromRoute, toRoute } = this.props.navigation.transition;
    if (fromRoute === 'PhotoGrid') return sharedImageFirst;
    else if (toRoute === 'PhotoGrid') return sharedImageLast;
    else return {}; // default transition
  }
  render() {
    /*
     this._getTransitions() returns: 
     {
       sharedImages: {
         transition: new Transitions.SharedElement(`image-${this.props.photo.url}`),
         start: 0,
         duration: 0.7
       },
       crossFadeScene: {
         transition: new Transitions.CrossFade(),
         start: 0.7,
         duration: 0.1,
       },
       ...
     }
    */
    const {
      crossFadeScene,
      sharedImages,
      slideTitle,
      slideDescription,
      scaleFab,
    } = this._getTransitions();
    return (
      <View>
        <Transition.Image transition={sharedImages} source={{ uri: photo.url }} />
        <Transition.Text transition={slideTitle}>{photo.title}</Text>
        <Transition.Text transition={slideDescription}>{photo.description}</Text>
        <TransitionFab transition={scaleFab} onPress={() => alert('Hallo!')} />
      </View>
    );
  }
}