React native drawer navigation with I18nManager.forceRTL isn't working - react-native

Question

Been trying to implement #react-navigation/drawer with #react-navigation/native-stack and forcing the app to be RTL, using Expo.
App.tsx:
import { I18nManager } from 'react-native'
import { SafeAreaProvider } from 'react-native-safe-area-view'
import {useLoading} from '#hooks'
I18nManager.forceRTL(true)
I18nManager.allowRTL(true)
export default function App() {
const isLoadingComplete = useLoading()
if (!isLoadingComplete) {
return null
} else {
return (
<SafeAreaProvider style={{flex:1}}>
<Navigation />
<StatusBar style="dark" />
</SafeAreaProvider>
)
}
}
Navigation.tsx:
import { createNativeStackNavigator, NativeStackNavigationOptions } from '#react-navigation/native-stack'
import { createDrawerNavigator } from '#react-navigation/drawer'
import { NavigationContainer } from '#react-navigation/native'
const Stack = createNativeStackNavigator<RootStackParamList>()
const Drawer = createDrawerNavigator<RootDrawerParamList>()
function RootNavigator() {
return (
<Stack.Navigator screenOptions={{presentation: 'modal', headerShown: false}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Root" component={DrawerNavigator} />
<Stack.Screen name="Customer" component={CustomerScreen} />
</Stack.Navigator>
)
}
function DrawerNavigator() {
return (
<View style={styles.container}>
<Drawer.Navigator initialRouteName='Customers' screenOptions={{headerRight: Logout}}>
<Drawer.Screen name="Home" component={HomeScreen} options={{title: Lang.Navigation.Home}} />
<Drawer.Screen name="Customers" component={CustomersScreen} options={{title: Lang.Navigation.Customers}} />
</Drawer.Navigator>
</View>
)
}
export default function Navigation() {
return (
<NavigationContainer ref={navigationRef} linking={LinkingConfiguration}>
<RootNavigator />
</NavigationContainer>
)
}
Dependencies:
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"expo": "~44.0.0",
"react": "17.0.1",
"react-native": "0.64.3",
"react-native-safe-area-view": "^1.1.1",
The result i'm getting when clicking on the menu built-in hamburger is that the screen does become grayish but the menu never pops in. Using inspect I found that there is a problem with the menu's "left" and "translateX" settings automatically given by the react navigation plugin.
Everything works well when removing the 'ForceRTL' part, but I need the app the be RTL.

Answer 1

instead of using the following code.
I18nManager.forceRTL(true)
I18nManager.allowRTL(true)
fix for this issue is to use direction:'rtl' in the style of Root level component. sample working code demo https://snack.expo.dev/PIIGNx70v
sample code
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={navigation.openDrawer} title="Open drawer" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<View style={{ flex: 1, direction: 'rtl' }}>
<NavigationContainer>
<Drawer.Navigator drawerPosition="right" initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
</View>
);
}