# 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)
![folder structure](https://i.postimg.cc/bY6DCpX4/Screen-Shot-2022-01-26-at-11-14-02-AM.png )  

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

 ![language file structure](https://i.postimg.cc/0QFcg3bs/Screen-Shot-2022-01-26-at-11-26-23-AM.png )

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