I'm building a React Native (Expo managed project) application that has to be translated to English, Hebrew and Arabic.
I'm using expo-localization to make the layout change to RTL when the user has Hebrew or Arabic set as system language.
My app.json looks like this (only the relevant parts).
{
"expo": {
"extra": {
"supportsRTL": true
},
"plugins": ["expo-localization"]
}
}
I use react-i18next for managing languages I detect the user's default language and set that as the value of lng in the config.
When I go into the setting of my virtual Android device and change the system language to Hebrew and restart the app everything switches direction, but the Stack Navigation that I'm using from React Navigation (V6) still has the Back button on the left side and the custom component I added to headerRight is on the right. I would expect these to switch places. How could I do this if it doesn't happen automatically?
Searching for the problem I could only find this issue for React Navigation from 2017, the OP says that an update solved it for him. In my case I'm on the latest version and the issue persists.
I've also tried calling I18nManager.forceRTL(true); in my entry component (just to see what it does) and I didn't see any changes.
The docs of React Navigation say that they have "limited support" for RTL layout, but they don't specify what are the exact limitations. Is this one of them? Is there any workaround? Defining a custom Header component to the Stack Navigation maybe?
Library versions:
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.16",
"react": "18.2.0",
"react-i18next": "^13.5.0",
"react-native": "0.72.6",
"expo": "~49.0.15",
"expo-localization": "~14.3.0",