React Native

Drawer

The Navigation router works with the built-in DrawerLayoutAndroid component from React Native. The DrawerLayoutAndroid component is 100% native on Android. You can see how it works on the the React Native website, but make sure you add it at the top of the scene. We add the drawer to the 'inbox' scene so the user can view their sent email. When the user taps the 'sent' button we close the drawer and navigate to their sent email once the close animation completes.

import {DrawerLayoutAndroid} from 'react-native';

<DrawerLayoutAndroid
  ref={drawer}
  onDrawerClose={() => {
    if (selected)
      stateNavigator.navigate('sent');
  }}
  renderNavigationView={() => (
    <View>
      <TouchableHighlight
        onPress={() => {
          setSelected(true);
          drawer.closeDrawer();
      }}>
        <Text>Sent</Text>
      </TouchableHighlight>
    </View>
  )}>
  ...
</DrawerLayoutAndroid>

Remember that the Navigation router manages the stack by dropping a breadcrumb at each visited scene. You disable the breadcrumb trail by setting trackCrumbTrail to false (the default) against a State. When navigating to that State the stack of scenes will start from scratch. In our email example, we disable the breadcrumb trail for the 'sent' State so that the 'sent' scene replaces the 'inbox' scene in the stack.

const stateNavigator = new StateNavigator([
  {key: 'inbox'},
  {key: 'mail', trackCrumbTrail: true},
  {key: 'compose', trackCrumbTrail: true},
  {key: 'sent'}
]);

When one scene replaces another, the Navigation router animates the transition. We can use the custom animation API to disable the animation so that the 'sent' scene immediately appears in place of the inbox. When the user taps the 'sent' button in the drawer, the Navigation router calls our unmountStyle prop passing in the target State. We return an empty string that tells the Navigation router to disable the animation.

<NavigationStack unmountStyle={(from, state) => state === sent ? '' : null}>
  <Scene stateKey="inbox"><Inbox /></Scene>
  <Scene stateKey="mail"><Mail /></Scene>
  <Scene stateKey="compose"><Compose /></Scene>
  <Scene stateKey="sent"><Sent /></Scene>
</NavigationStack>