Hi, so I’ve got stuck while implementing Hebrew and RTL support inside React Native App (with Expo SDK) which is using react-navigation and redux-persist.
As users of my app should be able to change language inside the app (so I don’t really care about system language, only while the very first opening of the app) I’m currently using redux-persist to keep redux state after relaunching the app.
I’ve also created simple helper function which is only getting state from redux store:
export function isHebrew() {
return !!(getReduxLanguage().locale.includes('he') && getReduxIsRTL());
}
The problem is that I’m using that helper function isHebrew inside my StyleSheets to decide how to render components and also inside react-navigation’s createNavigator for the same purpose to change order of items in bottomTabBar BUT stylesheets and navigator are somehow called before redux-persist rehydrates store, which ends in wrong render of the whole app (isHebrew is always false before rehydration as initialState is empty for language before rehydration).
So my question is:
how to postpone stylesheet and navigation loading to occur after redux-persist store rehydration?
I’m doing it like that:
App.js
...
componentDidMount() {
this.persistor = persistStore(store, null, () => {
this.setState({ isReduxRehydrated: true });
});
}
render() {
if (!this.state.isLoadingComplete && !this.state.isReduxRehydrated) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
}
return (
<Provider store={store}>
<PersistGate loading={<ActivityIndicator/>} persistor={this.persistor}>
<Root />
</PersistGate>
</Provider>
);
}
...
but this is not working, even if I comment out component isHebrew is still being called inside stylesheets/navigator before redux-persist.
Usage inside stylesheets:
StyleSheet.create({
container: {
flexDirection: isHebrew() ? 'row-reverse' : 'row',
}
})
Usage inside navigation:
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
ProfileStack,
ScheduleStack,
MarketStack,
MoreStack
},
{
tabBarOptions: {
showLabel: false,
style: {
flexDirection: isHebrew() ? 'row-reverse' : 'row',
}
}
}
);