Custom Animation

In our example email application, we want the same push and pop animations that we've already got running on Android. When a user opens an email, the 'mail' scene slides in from the right and the 'inbox' scene fades out. When the user presses back, the 'inbox' scene fades in as the 'mail' scene slides back out the way it came.

We assign a style prop for each of the three different stages a scene can be in - mounted is when the scene is pushed onto the stack, unmounted is when the scene is popped off the stack and crumbed is when the scene is hidden in the stack. On the web, the NavigationStack provides a renderTransition callback function that lets us animate between these styles as a scene moves from one stage to another. We use the callback's parameters to style the scene with the interpolated translation and opacity values. 

<NavigationStack
  unmountedStyle={{translate: 100, opacity: 1}}
  mountedStyle={{translate: 0, opacity: 1}}
  crumbedStyle={{translate: 0, opacity: 0}}
  renderTransition={(style, scene, key) => (
    <View
      key={key}
      style={{
        transform: `translate(${style.translate}%)`,
        opacity: style.opactity,
        position: 'absolute',
        left: 0, right: 0, top: 0, bottom: 0,
        overflow: 'hidden'
      }}>
      {scene}
    </View>
  )}>