CODEWITHSUNDEEP
reactjsreact-nativei18nextreact-i18next
Deddy
Deddy

Reputation: 213

react-i18next navigates back to first screen in navigation on changeLanguage

My problem is that when changing language with react-18next it navigates back to first screen.

I call it like this for example:

i18n.changeLanguage('en')

and I have init like:

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en
    },
    nl: {
      translation: nl
    }
  }
})

And if my navigation has routes like ['Main', 'Settings', 'Language'] and my language change button is in Language view (I navigate there like: Main -> Settings -> Language), it redirects user to Main screen after language has changed.

Language changes correctly and everything works, apart that it seems to reset everything. I don't have any specific navigation setup.

Anybody has experienced anything like this?

Upvotes: 2

Views: 1332

Answers (2)

Fatjon Rrapaj
Fatjon Rrapaj

Reputation: 153

thank you for your question & answer, it helped me resolve this case. Look, actually you can use the useTranslation hook inside the navigation component, but do not pass the t('translation') at the route name. What you have to do is:

 <Tab.Screen
    name="Home" {/* this stays un-translated*/}
    options={{tabBarLabel: t('navigate:home')}} {/* this takes the translation function instead*/}
    component={HomeScreen}
  />

source: This amazing example

Upvotes: 5

Deddy
Deddy

Reputation: 213

I found the problem - I was using useTranslation hook inside my navigation component. So as translations changed there, it also reset navigation to first screen.

Upvotes: 3

Related Questions