Steve Sultan
Steve Sultan's Blog

Steve Sultan's Blog

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

Steve Sultan's photo
Steve Sultan
·Jan 26, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

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) folder structure

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

    language file structure

    //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

 
Share this