React Native

Pop Navigation

Popping

Because the Navigation router pushes scenes using the native APIs, the user can pop them via the Android back button or swiping/pressing back on iOS. You can also programmatically pop scenes by calling the navigateBack function on the StateNavigator. The number you pass in indicates the number of scenes to pop. In our email example, we can add a button to the 'compose' scene that returns the user to the inbox.

import {NavigationContext} from 'navigation-react';

const Compose = () => {
  const {stateNavigator} = useContext(NavigationContext);
  return (
    <Button
      title="Back to Inbox"
      onPress={() => {
        stateNavigator.navigateBack(1);
      }} />
  );
};

Popping to Top

You recall that the Navigation router drops a breadcrumb at each visited scene, just like the fairy-tale characters Hansel and Gretel. The stack of visited scenes is represented in JavaScript as an array of breadcrumbs. Each crumb corresponds to a visited scene and holds the State and navigation data associated with it.

Let's use this array of crumbs to make the 'Back to Inbox' button work regardless of the route the user takes to get to the 'compose' scene. For example, if the user presses the 'Compose Mail' button after opening an email, then popping one scene off the stack goes back to the open email instead of the inbox. We ensure the 'Back to Inbox' button always pops to the top of the stack by navigating back the length of the crumbs array.

const {crumbs} = stateNavigator.stateContext;
stateNavigator.navigateBack(crumbs.length);