CODEWITHSUNDEEP
react-nativereact-navigation
Panda-Toine
Panda-Toine

Reputation: 131

How to refresh react navigation header - multi-language issue

I am trying to integrate multi-language inside my react native app using "i18n-js": "^3.2.1" I would like to update the header from react-navigation after changing the locale of i18n.

Once the locale is change, i am running this.forceUpdate(); to reload the page.

switchSettings = (field_name, value) => {
        console.log(field_name);
        switch (field_name) {
            case "languages": 
                setLanguage(value[0])
                this.forceUpdate();
                break;

            default: 
                break;
        }
    }

this works well for my custom components however, this is not updating my react navigation header title/back-button :\

is there anything available with react-navigation to re-render the header or something to re-evaluate the navigationOptions?

I would really appreciate your help. Thanks

EDIT1: 

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: i18n.t('title')
        }
    };

The above is working fine when I am going on the next page, but if I go back, the navigationOptions is not re-evaluate

Any suggestions?

Thanks

Upvotes: 0

Views: 3683

Answers (2)

phatmann
phatmann

Reputation: 18503

You can refresh the navigation headers by updating the theme object. To do this I include the locale in the theme. Here is some sample Typescript code:

import {
  DarkTheme,
  DefaultTheme,
  NavigationContainer,
  Theme,
} from '@react-navigation/native'

...

export function Navigation({ darkMode }: Props) {
  const { locale } = useLocale() // a custom hook to get locale from a context

  type ThemeWithLocale = Theme & {
    locale: string | undefined
  }

  const theme: ThemeWithLocale = {
    locale,
    ...(darkMode ? DarkTheme : DefaultTheme),
  }

  return (
    <NavigationContainer theme={theme}>
      <Root />
    </NavigationContainer>
  )
}

Upvotes: 1

Nishant Nair
Nishant Nair

Reputation: 2020

The routes and the navigationOptions that you define when declaring the router are set when the app is launched. So they won't change when the language prop is updated. What you can do is add static navigationOptions inside your screen component and define the title there.

For eg.

static navigationOptions = {
     title: this.props.language : "en"? "English title": "Other language title",
};

Upvotes: 0

Related Questions