React Native i18next.changeLanguage is not changing app language

user_11764338 0
Viewed 939

I am trying to implement i18next library to change React Native app language, but I am not able to translate it. enter image description here I have created i18n.tsx file.

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import albanian from './al.json';
import english from './en.json';

i18next.use(initReactI18next).init({
  initImmediate: false,
  lng: 'en',
  resources: {
    en: english,
    al: albanian
  },
  react: {
    useSuspense: false
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});

export default i18next;

al.json

{
    "WelcomeTexxt": "E vleresoj qe po e shikon kete video",
    "Welcome": "Mire se vjen",
    "Museum": "Muzeuuuu",
    "welcomeBack": "MireseErdhe"
}

en.json

{
  "welcomeTexxt": "I really appreciate you are watching",
  "welcome": "Helloooooo",
  "museum": "ooooooooooooooooo",
  "welcomeBack": "Welcome Back 123455655"
}

and the translation page

import React from 'react';
import { View, Text, Button } from 'react-native';
import '../lang/i18n';
import { useTranslation } from 'react-i18next';
import SwitchSelector from 'react-native-switch-selector';

const options = [
    {
        label: 'English',
        value: 'en'
    }, {
        label: 'Albanian',
        value: 'al'
    },
];

const LoginScreen = () => {
    const { t, i18n } = useTranslation();
    console.log(t('welcome'));

    return (
        <View style={
            {
                flex: 1,
                justifyContent: 'center'
            }
        }>
            <Text>{t('welcomeBack')}</Text>

            <SwitchSelector options={options}
                initial={0}
                 onPress= {(language) => 
                    i18n.changeLanguage(language)
                }   
            />

            <Text style={{ fontSize: 26, textAlign: 'center' }}>{t("WelcomeTexxt")}</Text>
            <Text>{
                t("Welcome")
            }</Text>
        </View>
    );
}

export default LoginScreen;

Can anyone give me any idea why i18n.changeLanguage is not working to change the language? Thanks in advance

i18next react-native typescript reactjs
2 Answers

May you can try with withTranslation like below:

import { View, Text, Button } from 'react-native';
import '../lang/i18n';
import { useTranslation, withTranslation  } from 'react-i18next';
import SwitchSelector from 'react-native-switch-selector';

const options = [
    {
        label: 'English',
        value: 'en'
    }, {
        label: 'Albanian',
        value: 'al'
    },
];

const LoginScreen = () => {
    const { t, i18n } = useTranslation();
    console.log(t('welcome'));

    return (
        <View style={
            {
                flex: 1,
                justifyContent: 'center'
            }
        }>
            <Text>{t('welcomeBack')}</Text>

            <SwitchSelector options={options}
                initial={0}
                 onPress= {(language) => 
                    i18n.changeLanguage(language)
                }   
            />

            <Text style={{ fontSize: 26, textAlign: 'center' }}>{t("WelcomeTexxt")}</Text>
            <Text>{
                t("Welcome")
            }</Text>
        </View>
    );
}

export default withTranslation()(LoginScreen);
user_63412670

Can you try with this updated 18n.tsx file

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import albanian from './al.json';
import english from './en.json';

i18next.use(initReactI18next).init({
  initImmediate: false,
  lng: 'en',
  resources: {
     en: {
      translation: english, //changed here
    },
    al: {
      translation: albanian, //changed here
    },
  },
  react: {
    useSuspense: false
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});

export default i18next;

The documentation specifies that we need to pass the value of each language key as an object with key:translation and value as the translation file.

You have passed the translation file directly as value, for the language key. That's why it was not able to recognise the files to use for translation :)

user_157539450
Related