React Native

Hello World

The Navigation router uses the underlying native APIs to provide faithful navigation on Android and iOS. We're going to build an example with two scenes. The first scene will show a button that says 'Hello'. Pressing the button will push a second scene onto the stack. This scene will display a button that says 'World'. Pressing it will pop the second scene off the stack and return you to the first.

After following the Setup instructions, we'll add two States to the StateNavigator array in App.js. There's one State for the 'hello' scene and another for the 'world' scene. The Navigation router manages the stack as a 'breadcrumb trail'. Named after the trail of breadcrumbs Hansel and Gretel dropped to remember their journey back, each breadcrumb in the trail represents a scene in the stack. We'll enable the breadcrumb trail by setting trackCrumbTrail to true on the 'world' State.

const stateNavigator = new StateNavigator([
  {key: 'hello'},
  {key: 'world', trackCrumbTrail: true}
]);

We create Home and World components for the two scenes and wrap them in Scene components. We map them back to their associated States using the stateKey prop.

import {Scene} from 'navigation-react-native';

<NavigationStack>
  <Scene stateKey="hello"><Hello /></Scene>
  <Scene stateKey="world"><World /></Scene>
</NavigationStack>

Push

The NavigationStack renders the 'hello' scene first because we added it as the first child. The scene consists of a button that says 'Hello'. When pressed, we want to push the 'world' scene onto the stack. We push scenes onto the stack by navigating to States. We'll access the stateNavigator using the React Context API and navigate to the 'world' State inside the onPress handler. The navigate function accepts navigation data as the second parameter. We’ll use it to pass across a size of 20 to the 'world' scene.

import {NavigationContext} from 'navigation-react';

const Hello = () => {
  const {stateNavigator} = useContext(NavigationContext);
  return (
    <Button
      title="Hello"
      onPress={() => {
        stateNavigator.navigate('world', {size: 20});
      }} />
  );
};

In the 'world' scene we'll get the size from the NavigationContext and assign it to Text component’s font size.

import {NavigationContext} from 'navigation-react';

const World = () => {
  const {data} = useContext(NavigationContext);
  return <Text style={{fontSize: data.size}}>World</Text>;
};

Pop

We pop scenes off the stack by navigating backwards. How far we navigate back determines the number of scenes popped. We'll change the 'world' scene so that it renders a button instead of plain text. Inside the onPress handler, we'll call the navigateBack function passing in a distance of 1. Because the Navigation router uses the underlying native APIs, you can also return to the 'hello' scene using the back button on Android or by swiping/pressing back on iOS.

const World = () => {
  const {data, stateNavigator} = useContext(NavigationContext);
  return (
    <Button
      title="World"
      style={{fontSize: data.size}}
      onPress={() => {
        stateNavigator.navigateBack(1);
      }} />
  );
};