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 NavigationStack component renders the scenes in the stack. It lets you animate the scenes as they progress through the stack. Any scene that isn't the current one is either unmounted or a crumb. It's unmounted when it's not on the stack yet and it's a crumb when it's anywhere in the stack apart from on top (in the breadcrumb trail).

You assign keyframe animations to the unmount and crumb style props. The NavigationStack runs the animations as the scene moves from unmounted or crumb to current and back again. In our email example, we'll make the unmount and crumb keyframes start at opacity 0 and finish at 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. 

<NavigationStack
  unmountStyle={[{opacity: 0}, {opacity: 1}]}
  crumbStyle={[{opacity: 0}, {opacity: 1}]}>

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>