Styjun

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',
 
 
 
);