RTL/Hebrew support with React Native + react-navigation and redux-persist

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

Bumping topic, anyone with a solution or alternative?

How do you guys handle RTL support inside app while user can select language?

Bumping once more, anyone with any kind of solution? :slight_smile:

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.