Animated Navigation

Dropping Breadcrumbs

The Navigation router brings native-like navigation to the web. It builds a stack of the scenes a user visits. You can navigate back to any scene in the stack and animate the scenes as they move through and off the stack. The Navigation router remembers the visited scenes by dropping a breadcrumb at each one, like the fairy-tale characters Hansel and Gretel. After following the Setup instructions, you enable the breadcrumb trail by setting trackCrumbTrail to true against each State in the StateNavigator. In an email application, we set trackCrumbTrail to true on the 'mail' State so that we can animate out the 'inbox' scene and animate in the 'mail' scene when the user opens an email. 

const stateNavigator = new StateNavigator([
  {key: 'inbox', route: ''},
  {key: 'mail', trackCrumbTrail: true}
]);

Animating

The NavigationMotion component renders the scenes in the stack. It lets you animate the scenes as they progress through the stack. A scene is said to be either unmounted, mounted or a crumb. It's unmounted when it's not on the stack; it's mounted when it's at the top of the stack; and it's a crumb when it's anywhere else in the stack (in the breadcrumb trail).

You assign a style prop to each of these three stages and the NavigationMotion component calls you back with the interpolated values so you can animate the scenes. In our email example, we'll give the unmounted and crumb styles an opacity of 0 and the mounted style an opacity of 1. When the user opens a mail, the 'inbox' scene fades out as it becomes a crumb and the 'mail' scene fades in as it's mounted. 

<NavigationMotion
  unmountedStyle={{opacity: 0}}
  mountedStyle={{opacity: 1}}
  crumbStyle={{opacity: 0}}
  renderMotion={(style, scene, key) => (
    <div
      key={key}
      style={{...sceneStyle, opacity: style.opacity}}>
      {scene}
    </div>
  )}>

You can navigate back to a visited scene using the NavigationBackLink. The distance prop indicates how many scenes to go back. In our email example, we add a NavigationBackLink to the 'mail' scene. A distance of 1 allows the user to return to their inbox. When they tap the Hyperlink, the 'mail' scene fades out as it's unmounted and the 'inbox' scene fades back in as it's mounted. 

import {NavigationBackLink} from 'navigation-react';

<NavigationBackLink distance={1}>
  Back to Inbox
</NavigationBackLink>

You can also navigate back programmatically by passing the distance into the navigateBack function on the stateNavigator. 

import {NavigationContext} from 'navigation-react';

const {stateNavigator} = useContext(NavigationContext);

<div onClick={() => stateNavigator.navigateBack(1}>
  Back to Inbox
</div>