Left and Right Drawers with React Navigation

App.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { DrawerNavigator } from 'react-navigation';

const ContentScreen = ({ navigation }) => (
  <Text>Content Hello World</Text>
);

const LeftDrawerScreen = ({ navigation }) => (
  <Text>Left Drawer</Text>
);

const RightDrawerScreen = ({ navigation }) => (
  <Text>Right Drawer</Text>
);

const ContentNavigator = DrawerNavigator({
  Content: {
    screen: ContentScreen,
  }
}, {
  contentComponent: RightDrawerScreen,
  drawerPosition: 'right'
});

const RootNavigator = DrawerNavigator({
  Child: {
    screen: ContentNavigator,
  }
}, {
  contentComponent: LeftDrawerScreen
});

export default class App extends Component {
  render() {
    return (<RootNavigator />);
  }
}

Hi @kevinold - I have a question on drawer navigator. If I do props.navigation.openDrawer().. and I have 2 drawer navigators, one within another.. how do I control which drawer navigator to open?

Hi @kevinold - I have a question on drawer navigator. If I do props.navigation.openDrawer().. and I have 2 drawer navigators, one within another.. how do I control which drawer navigator to open?
@rawadrifai

If anyone is still interested, found a strange workaround for pinpointing which drawer to open.
Normally, you've found that if you use the navigation.openDrawer(), it will open the right drawer (or whichever is the closest drawer navigation parent).

If you want to open the other drawer, you have to call the openDrawer() from its instance.
The only way I managed to do this was to get the 3rd parent of the current screen:
navigation.dangerouslyGetParent().dangerouslyGetParent().dangerouslyGetParent().openDrawer() ✔️

I know it doesn't seem right, but it works for now. Any suggestion is welcome.

Note that I have tried to use the navigation.navigate('OpenLeftDrawer'), where 'OpenLeftDrawer' is the value given to the DrawerNavigatorConfig.drawerOpenRoute attribute. Needless to say that it did not work.

navigation.dangerouslyGetParent().dangerouslyGetParent().dangerouslyGetParent().openDrawer() ✔️
yup it works

code snippet below is my implementation for two side drawer, when I set the drawerPosition to right it goes to a transparent screen like thing and doesn't show the drawerContent component,
do you have any idea, any suggestion is appreciated.

const HomeDrawer = createDrawerNavigator();
const MainDrawer = createDrawerNavigator();

const SettingsScreen = () => (
  <AppLayout>
    <Text>Settings Screen</Text>
  </AppLayout>
);

const FilterScreen = () => {
  return (
    <AppLayout>
      <Text>Filter Screen</Text>
    </AppLayout>
  );
};

export const _HomeScreenNavigation = () => {
  const { Screen, Navigator } = HomeDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}>
      <Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} />
    </Navigator>
  );
};

export const HomeScreenNavigation = () => {
  const { Navigator, Screen } = MainDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}>
      <Screen name={"homeDrawer"} component={_HomeScreenNavigation} />
    </Navigator>
  );
};

code snippet below is my implementation for two side drawer, when I set the drawerPosition to right it goes to a transparent screen like thing and doesn't show the drawerContent component, do you have any idea, any suggestion is appreciated.

const HomeDrawer = createDrawerNavigator();
const MainDrawer = createDrawerNavigator();

const SettingsScreen = () => (
  <AppLayout>
    <Text>Settings Screen</Text>
  </AppLayout>
);

const FilterScreen = () => {
  return (
    <AppLayout>
      <Text>Filter Screen</Text>
    </AppLayout>
  );
};

export const _HomeScreenNavigation = () => {
  const { Screen, Navigator } = HomeDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}>
      <Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} />
    </Navigator>
  );
};

export const HomeScreenNavigation = () => {
  const { Navigator, Screen } = MainDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}>
      <Screen name={"homeDrawer"} component={_HomeScreenNavigation} />
    </Navigator>
  );
};

this is the question that I also have asked at StackOverflow.

I have solved the problem by using react-native-reanimated and an overlay View on the top of other components :). I thought this is going to put me in trouble while I'm going to have a deep nested navigation