Docs Github

1. Define Your States

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

   You create one State for each scene (screen) in your app. You can think of the stack of scenes as a trail of breadcrumbs. Each scene is one crumb. Like Hansel and Gretel in the fairy story, the Navigation router drops a crumb every time it visits a scene (if you set 'trackCrumbTrail' to true).

   

2. Create Your Scenes

   <NavigationHandler stateNavigator={stateNavigator}>
     <NavigationStack>
       <Scene stateKey="hello"><Hello /></Scene>
       <Scene stateKey="world"><World /></Scene>
     </NavigationStack>
   </NavigationHandler>

   For each State, you create a Scene component that renders the UI. The Navigation router provides React components to help you build your scenes. All of these components render to the same native primitives as other native apps. For example, the TabBar component renders to a BottomNavigationView on Android and a UITabBarController on iOS.

   

3. Navigate to a Scene

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

   You use the stateNavigator from the NavigationContext to change scenes. You pass the name of the scene and the data. The navigation is 100% native on Android and iOS.

   

4. Use the Data

   import { NavigationContext } from 'navigation-react';
   
   const World = () => {
     const { data } = useContext(NavigationContext);
     return (
       <Text style={{ fontSize: data.size }}>
         World
       </Text>
     );
   };

   In the next scene, you access the data from the NavigationContext. You can return to the 'hello' scene via the Android back button or swiping/pressing back on iOS.

Take a look at the complete Hello World example