Uber-like Drawer navigation in React Native app

Question

I'm trying to figure out how to implement navigation in React Native app using react-navigation to make it similar to Uber app.

I'd like to use Drawer which contains a menu items like Settings, Profile etc. Click on each item should open a modal with navigation Stack with arrow left or cross icon button on the top (header) to close stack and back to main screen. When modal with navigation stack is opened I'd like to disable drawer.

Is this possible to achieve with react-navigation?

I use it in some of my projects. The react-navigation drawer is used as navigation. Although this is always valid, I don't prefer to use it this way. I prefer to use third-party drawer modules instead. You can solve this way if you don't want dynamic. I'm figuring it out like this. — Fatih Mert Doğancan

Harry Moreno Harry Moreno · Accepted Answer · 2019-06-26T02:21:25

Yes react navigation drawer accepts arbitrary react components as content. You can see an example by running https://expo.io/@react-navigation/NavigationPlayground on your phone.

Some example code from https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/src/Drawer.tsx

const InboxStack = createStackNavigator(
  {
    Email: { screen: EmailScreen },
    Inbox: { screen: InboxScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="move-to-inbox"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Inbox',
    },
  }
);

const DraftsStack = createStackNavigator(
  {
    Drafts: { screen: DraftsScreen },
    Email: { screen: EmailScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="drafts"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Drafts',
    },
  }
);

const DrawerExample = createDrawerNavigator(
  {
    Drafts: {
      path: '/sent',
      screen: DraftsStack,
    },
    Inbox: {
      path: '/',
      screen: InboxStack,
    },
  },

  {
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    initialRouteName: 'Drafts',
  }
);

Uber-like Drawer navigation in React Native app

1 Answers