Custom Animation

You can change the default animation that runs when a scene is pushed onto or popped off the stack. You provide the position of the scene when it's off the stack in the unmountStyle prop of the NavigationStack. The Navigation router uses the underlying native transition apis on Android and iOS to animate it into place. In our email application, we start the 'mail' scene off to the right of the screen. The Navigation router slides it in when the user selects a mail and back out again when they return to their inbox. Without the customAnimation prop the animation only runs on Android. 

<NavigationStack customAnimation unmountStyle={{type: 'translate', startX: '100%'}}>

You can also specify the position of the scene when it's hidden in the stack using the crumbStyle prop of the NavigationStack. The Navigation router will animate the current scene to and from that position when a new scene is pushed and then popped. By setting the crumb's start opacity to 0, when the user opens an email the 'inbox' scene fades out as the 'mail' scene slides in from the right. 

<NavigationStack customAnimation crumbStyle={{type: 'alpha', start: 0}}>

We can make the 'inbox' scene shrink as well as fade by passing in multiple start styles.The Navigation router runs both animations together when a user opens an email. 

<NavigationStack customAnimation crumbStyle={[
  {type: 'alpha', start: 0},
  {type: 'scale', startX: 0.8, startY: 0.8}
]}>

The Scene component also has unmountStyle and crumbStyle props so you can have different animations for different scenes. In our email application, we want every scene to slide in from the right apart from the 'compose' scene. To make it slide up from the bottom right of the screen we configure a special unmountStyle for just the 'compose' scene. 

<Scene stateKey="compose" unmountStyle={{type: 'translate', startX: '100%', startY: '-100%'}}>
  <Compose />
</Scene>