Routing

The navigation routing about this starter kit

Drawer

Actually, our side menu is custom made, so we need to import it in contentComponent.

const Router = createDrawerNavigator(
  {
    Main: {
     screen: HomeStack
    },
...
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 300,
    initialRouteName: 'Main',
  }
);

From the sample code, we imported the homeStack as Main, and set it for initial route

Additional handling

But we need additional handling for our seamless side menu, why?

It is because the side menu gesture is overlay with our detail screen. In detail screen, we swipe right to back previous screen, but this gesture will trigger our side menu too, so we need to lock the gesture for detail screen to prevent any side menu pop out.

setDrawerLock = ({ navigation }) => {
...
};

HomeStack.navigationOptions = setDrawerLock

From the sample code, we need to call the setDrawerLock function to prevent any side menu for detail screen. It will lock the side menu except the main screen. The full version of this function, you can check the code in App.js

Stack

const GridStack = createStackNavigator(
  {
    Home: { screen: GridScreen },
    Details: { screen: DetailScreen },
    MapDetails: { screen: MapScreen },
  },
  {
    initialRouteName: 'Home',
  }
);

According the sample code, we set three screen in grid stack with different names, it will help us much more easy to control the routing once the route getting complex.