Add example to test RTL Modified from example provided in https://github.com/react-navigation/react-navigation/issues/5279

packages/drawer/example/App.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { FlatList } from 'react-native';
+// eslint-disable-next-line no-unused-vars
+import { FlatList, I18nManager } from 'react-native';
 import { createAppContainer } from '@react-navigation/native';
 
 // eslint-disable-next-line import/named
@@ -8,6 +9,9 @@ import { List, Divider } from 'react-native-paper';
 import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer';
 import StyledDrawer from './src/StyledDrawer';
 import GestureInteraction from './src/GestureInteraction';
+import RTLDrawer from './src/RTLDrawer';
+
+// I18nManager.forceRTL(false);
 
 const data = [
   {
@@ -26,6 +30,11 @@ const data = [
     title: 'Gesture Interaction',
     routeName: 'GestureInteraction',
   },
+  {
+    component: RTLDrawer,
+    title: 'Right drawer to test RTL',
+    routeName: 'RTLDrawer',
+  },
 ];
 
 class Home extends React.Component {

packages/drawer/example/src/RTLDrawer.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+
+// eslint-disable-next-line import/named
+import { createStackNavigator } from 'react-navigation-stack';
+import { createDrawerNavigator } from 'react-navigation-drawer';
+
+class RightDrawer extends Component {
+  state = {
+    categories: [{ i: 'c1', n: 'name1' }, { i: 'c2', n: 'name2' }],
+  };
+
+  render() {
+    return (
+      <View style={{ backgroundColor: 'white', flex: 1 }}>
+        <ScrollView
+          style={{ height: '100%', width: '100%', backgroundColor: '#333333' }}
+        >
+          {this.state.categories.map(key => {
+            return (
+              <TouchableOpacity
+                key={key.n}
+                onPress={() => {
+                  let nid = key.i;
+                  this.props.navigation.navigate('CategoryScreen', {
+                    id: nid,
+                    title: key.n,
+                  });
+                  this.props.navigation.closeDrawer();
+                }}
+              >
+                <View
+                  style={{
+                    width: '100%',
+                    height: 60,
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: 'white',
+                      height: 32.5,
+                      width: '100%',
+                      paddingRight: 20,
+                      fontSize: 20,
+                    }}
+                  >
+                    {key.n}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const CategoryScreen = ({ navigation }) => {
+  return (
+    <View>
+      <Text>CategoryScreen {navigation.getParam('title')}</Text>
+    </View>
+  );
+};
+
+const AppNavigator = createStackNavigator(
+  {
+    CategoryScreen,
+  },
+  {
+    defaultNavigationOptions: {
+      title: 'RTL Test',
+      headerStyle: {
+        backgroundColor: '#0f5599',
+      },
+      headerTintColor: 'white',
+      headerBackTitleStyle: {
+        color: 'white',
+      },
+    },
+  }
+);
+const DrawerNavigator = createDrawerNavigator(
+  {
+    Item1: {
+      screen: AppNavigator,
+    },
+  },
+  {
+    contentComponent: RightDrawer,
+    drawerLockMode: 'unlocked',
+    drawerPosition: 'right',
+    drawerWidth: () => {
+      return Dimensions.get('window').width - 150;
+    },
+    drawerType: 'slide',
+    drawerBackgroundColor: '#333333',
+    backBehavior: 'none',
+  }
+);
+
+export default DrawerNavigator;