Custom Animation (Android)

You can change the default Android 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 api 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 when the user selects a mail and back out again when they return to their inbox.

<NavigationStack 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 crumbStyle={{type: 'alpha', startX: 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 crumbStyle={[
    {type: 'alpha', startX: 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 of the screen we configure a special unmountStyle for just the 'compose' scene.

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