To attain drawer navigation menu on the right in react native

Question

When i am adding selected code then its showing undefined object (evaluating 'route.routeName'). Navigation drawer is by default on the left. How to attain it on right side ?

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { DrawerNavigator } from "react-navigation";
import ScreenFirst from "./src/ScreenFirst";
import ScreenTwo from "./src/ScreenTwo";

const DrawerExample = DrawerNavigator(
  {
    ScreenFirst: { screen: ScreenFirst },
    ScreenTwo: { screen: ScreenTwo }
  },
  {
    drawerPosition: "right",
    drawerWidth: 100
  }
);
export default DrawerExample;

Answer 1

if you are using navigation 3.x you will need to import these guys

import {createDrawerNavigator, createAppContainer} from 'react-navigation'

then try this one:

const DrawerExample = DrawerNavigator(
  {
    ScreenFirst: { screen: ScreenFirst },
    ScreenTwo: { screen: ScreenTwo }
  },
  {
    drawerPosition: "right",
    drawerWidth: 100
  }
);

const MyApp = createAppContainer(DrawerExample);
export default MyApp

Answer 2

For who comes from React Navigation V5. Just call drawerPosition like below:

<Drawer.Navigator initialRouteName="SignIn" drawerPosition="right">
    <Drawer.Screen name="welcome" component={Welcome} />
</Drawer.Navigator>

Answer 3

import {DrawerActions} from '@react-navigation/native';

<Drawer.Navigator screenOptions={{ drawerPosition: 'right', }}> <Drawer.Screen name="Home" component={Home} options={{ headerStyle: { backgroundColor: 'orange', }, headerTintColor: 'black', headerLeft:false, headerRight: () => ( <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}> ), }} /> <Drawer.Screen name="Standings" component={Standings} /> </Drawer.Navigator>

it worked for me

Answer 4

For 6.x

  <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home"  screenOptions={{drawerPosition:"right"}}
 >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>