title: RTL and LTR Drawer Navigation switching between them depending on user language
body: <p>How to add drawer dynamic drawer navigation that changes from RTL to ltr and vice versa.
  after logged in goes to the main page where drawer be able to open but its position depending on the language that user chose it when logged in </p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React from 'react';
      import TeaApp from './Pages/navigation';
  
  
      export default class App extends React.Component {
        constructor(){
          super();
          this.state = {
            name : '',
          };
  
        }
  
        render() {
          return (
  
              &lt;TeaApp/&gt;
  
          );
        }
      }
  </code></pre>
  
  <p><strong>navigation</strong></p>
  
  <pre><code>            import React,{ Component } from 'react';
              import { AsyncStorage, View, Text, Image, StyleSheet, Button, SafeAreaView} from 'react-native';
              import { StackNavigator , SwitchNavigator, DrawerNavigator, DrawerItems,TouchableOpacity} from 'react-navigation';
              import Login from './login';
              import Mainpage from './mainPage';
              import Menu from './menu';
              import CustomizeOrder from './customizeOrder';
              import Intro from './intro';
              import PreviewOrder from './previewOrder';
              import ViewOrder from './viewOrder';
  
              const INTRO = StackNavigator({ Intro:{screen: Intro} });
              const LOGIN = StackNavigator({ Login:{screen: Login} });
  
              const REST = StackNavigator({ 
                  UserHome:{screen: Mainpage,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})},
                  Menu:{screen: Menu,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})},
                  customizeOrder:{screen: CustomizeOrder,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})},
                  previewOrder:{screen: PreviewOrder,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})}, 
                  viewOrder:{screen: ViewOrder,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})}, 
  
              });
  
  
              const DrawerUserAR = DrawerNavigator(
                  {
                      الصفحة_الرئيسية :{screen: REST,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})},
                      المطبخ :{screen: KitchenPage},
                      الطلبات:{screen: VIEWORDER},
                      تغيير_كلمة_المرور:{screen: ChangePassword},
                      تغيير_اللغة: {screen: ChangeLanguage}
                      //logout:{}
                  },
                  {
                      initialRouteName: 'الصفحة_الرئيسية',
                      drawerPosition: 'right',
                      contentComponent:(props) =&gt; (
                          &lt;View style={{flex:1}}&gt;
                              &lt;Image
                                  style={styles.drawerImage}
                                  source={{uri:props.descriptors.الصفحة_الرئيسية.navigation.state.routes[0].params.content.company_logo_small}} /&gt;
                              &lt;Text/&gt;
                              &lt;Text style={{textAlign:'center',fontSize:15,marginVertical:15}}&gt;{props.descriptors.الصفحة_الرئيسية.navigation.state.routes[0].params.content.name}&lt;/Text&gt;
                              &lt;Text/&gt;
                              &lt;DrawerItems {...props} /&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                          &lt;/View&gt;),
                      drawerOpenRoute: 'DrawerOpen',
                      drawerCloseRoute: 'DrawerClose',
                      drawerToggleRoute: 'DrawerToggle'
                  }
              );
  
              const DrawerUserEN = DrawerNavigator(
                  {
                      Mainpage :{screen: REST,navigationOptions:({navigation})=&gt;({drawerLockMode:"locked-closed"})},
                      Kitchen :{screen: KitchenPage},
                      viewOrder:{screen: VIEWORDER},
                      changePassword:{screen: ChangePassword},
                      changeLanguage: {screen: ChangeLanguage}
                      //logout:{}
                  },
                  {
                      initialRouteName: 'Mainpage',
                      drawerPosition: 'left',
                      contentComponent:(props) =&gt; 
                          (
                          &lt;View style={{flex:1}}&gt;
                              &lt;Image
                                  style={styles.drawerImage}
                                  source={{uri:props.descriptors.Mainpage.navigation.state.routes[0].params.content.company_logo_small}} /&gt;
                              &lt;Text/&gt;
                              &lt;Text style={{textAlign:'center',fontSize:15,marginVertical:15}}&gt;{props.descriptors.Mainpage.navigation.state.routes[0].params.content.name}&lt;/Text&gt;
                              &lt;Text/&gt;
                              &lt;DrawerItems {...props} /&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
                              &lt;Text/&gt;&lt;Text/&gt;
  
                          &lt;/View&gt;),
                      drawerOpenRoute: 'DrawerOpen',
                      drawerCloseRoute: 'DrawerClose',
                      drawerToggleRoute: 'DrawerToggle'
                  }
              );
  
              export default SwitchNavigator(
                  {
                      intro:{screen: INTRO},
                      login:{screen: LOGIN},
                      rest:{screen: REST},
                      rest:{screen: /*drawer depending on the language that will get it from login*/},
                  },
                  {
                      initialRouteName: 'intro'
                  }
              );
  
  
              const styles = StyleSheet.create({
  
                  container: {
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center'
                  },
                  drawerHeader: {
                  height: 200,
                  backgroundColor: 'white'
                  },
                  drawerImage: {
                  marginTop: 20,
                  height: 150,
                  width: 150,
                  borderRadius: 75,
                  alignSelf:'center'
                  }
  
              })
  </code></pre>
  
  <p>________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________                                     ________________________________________________________________________________________________________________________________________________________________                                                                             </p>