transitions.js

class PhotoDetail extends React.Component {
  _getTransitions() {
    const sharedImages = new Transitions.SharedElement(`image-${this.props.photo.url}`);
    const crossFadeScenes = new Transitions.CrossFade();
    const slideTitle = new Slide();
    const slideDescription = new Slide();
    const scaleFab = new Transitions.Scale();
    // sharedImages(0.7) => crossFadeScene(0.1) => [slideTitle, slideDescription, scaleFab]
    return sequence(
      { sharedImages, duration: 0.7 },
      { crossFadeScenes, duration: 0.1 },
      together(
        { slideTitle },  // default duration is to use up the rest of transition time
        { slideDescription },
        { scaleFab },
      )
    );
  }
  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>
    );
  }
}

/*
 TODOs:
 - how to animate scene roots?
 - how to set animated config?
 - how to set different transitions for different "from" routes?

 Props:
  - Got rid of regex
  - Got rid of bindTransition etc.
  - Mnimal introsion to element tree, compared to wrapping elements

 Cons:
  - hard to configure the animation for bulit-in views, such as scene root and header
  - configuration of transitions is not as flexible: you'd have to modify the component to change the transition, whereas in the previous design you can just change the transition configuration. But this doesn't seem to matter, and it might even be a good thing.
*/