React navigation drawer navigator move main content when drawer open

Question

I want to open drawer and move main content to side.

example like this

Answer 1

In version 3.x of react-navigation you could use drawerType: 'slide'. See the following example:

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

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

Notice the createDrawerNavigator() instead of DrawerNavigator()

Documentation: https://reactnavigation.org/en/

Answer 2

You can create a DrawerNavigator like this

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

Look at this documentation

https://reactnavigation.org/docs/navigators/drawer