App keep refreshing when click on Change Language

[naveenprakash74]

🐛 Bug Report

I am Using this module in my react native app to handle Arebic and English language. app is keep refreshing when user click on changeLanguage button. this issue will create on if my mobile default language is arebic. it works fine if mobile default language is English

To Reproduce

change your device language to Arebic then open app and change app language to english then the app will keep refreshing user is not able to use the app.

i18n.changeLanguage(languageSelected === 'en-US' ? 'en' : 'ar');
.....

i18n
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    fallbackLng: 'ar',
    resources,
    // lng: 'en', //default language
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

dependency

"react-i18next": "^11.16.9", "i18next": "^21.8.0",

[adrai]

Not easy to help without seeing the rest of your code.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[abuzar-javed]

Facing the Same Issue in my React Native Application.

I am translating from English to Swedish. On Changing Language the app refreshed.

@adrai I have followed your article on Medium.

const handleLanguageChange = async (selected: number) => {
    const lang = selected === 0 ? 'en' : 'se';
    i18n.changeLanguage(lang);
  };

Dependencies

"react": "17.0.2", "react-native": "0.68.5", "react-i18next": "12.1.1", "i18next": "22.4.6",

[adrai]

@abuzar-javed not able to reproduce it myself, please create a minimal reproducible example repo or codesandbox

[abuzar-javed]

Issue Resolved

After a lot of Research I have found the clue from this Thread

I am making a Mistake By using the useTranslation Hook inside my navigation component (Bottom Tabs).

When the language changed it resets the navigation component which results in App Refreshing.

@naveenprakash74 @adrai

What I was doing

<Tab.Screen name={t('home')} component={HomeView}/>

Solution

<Tab.Screen name={'Home'} component={HomeView} options={{tabBarLabel: ${t('home')}}}/>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.