How to add multi language support service to your React Native App?

Let us begin with a installing package libraries like i18next , react-i18next, and @os-team/i18next-react-native-language-detector

You can use either yarn or npm

In my case, I will use yarn for demonstrating purpose.

• Step 1: installing the 3 packages

`yarn add i18next react-i18next @os-team/i18next-react-native-language-detector`

• Step2: creating i18n.js file inside a folder or root (I would create a folder called services)

• Step3: Creating .json files as desired languages like en.json for English zh.json for Chinese.

  

    //en.json
    {
        "translation": {

            "hello":"Hello",

            "world":"World"

        }
    }
---------------------------------

    //zh.json
    {
        "translation": {

            "hello":"你好",

            "world":"世界"

        }
    }

• Step 4: import .json files to i18n.js then populate with other packages shown blow code snippet

import  i18n  from  "i18next";

import { initReactI18next } from  "react-i18next";

import  RNLanguageDetector  from  "@os-team/i18next-react-native-language-detector";

import  en  from  "../../assets/languages/en.json"; //---json for ENG

import  zh  from  "../../assets/languages/zh.json"; //---json for CHN



i18n
    .use(RNLanguageDetector)

    .use(initReactI18next)

    .init({

            fallbackLng: ["en", "zh"],

            compatibilityJSON:  "v3",

            supportedLngs: ["en", "zh"],

            ns: [],

            defaultNS:  undefined,

            //this is where you put the imported .json file
            resources: {

                en:  en, //For English

                zh:  zh, //For Chinese

            },

            interpolation: {

                escapeValue:  false, // react already safes from xss

            },

        });



export  default  i18n;

• Step 5: Using it on your component by importing useTranslation hook

• Tip (auto-detect): As we already used RNLanguageDetector so that can detect your system native language . So that you don't need to implement changeLanguage function. You can get desired language by wrapping the string as {t("JSON Value")}

• If you want to test language auto detect feature, you should switch between Chinese and English on your OS Device(Android or iOS) then open the App to see the results

import  React  from  "react";
import { View,Button,Text } from  "react-native";
import { useTranslation } from  "react-i18next";

export  default  function  Translation(){
    // t - function which accepts key as parameter and returns the

    // appropriate text based on current language selected.


    // i18n - object containing function like changeLanguage

    // and other useful values.

    const { t, i18n } = useTranslation();

    const [currentLanguage, setLanguage] = React.useState("en");


    //change langue function. value should be "en", "zh","fr"

    const  changeLanguage = (value) => {

        i18n

        .changeLanguage(value)

         .then(() => {
             //Store it to somewhere like AsyncStorage

            // AsyncStorage.setItem("language", value);

         })

        .catch((err) =>  console.log(err));

        };
    }

return (
    <View>
        <Button
            colorScheme="primary"
            onPress={() => changeLanguage("en")}
            size="sm"
        >
            English
        </Button>

        <Button
            colorScheme="tertiary"
            onPress={() => changeLanguage("zh")}
            size="sm"
        >
            中文
        </Button>

        <Text> {t("hello")} {t("world")}  </Text>

    </View>
)

blog.stevesultan.com