Ahtisham Shahzad

Nov 12, 2020

2 min read

How to persist and integrate multi language support in react native

  1. intsall react-i18next i18next
    # npm
    $ npm install react-i18next i18next — save
    $ yarn add react-i18next i18next — save
  2. install @react-native-community/async-storage for persist lanuage
  3. create .json file for language in assest folder

4.create i18next.js file in utils folder for configuration
import AsyncStorage from "@react-native-community/async-storage";

import i18next from "i18next";

import { initReactI18next, useTranslation } from "react-i18next";

import en from "../../assets/localize/en.json";

import fr from "../../assets/localize/fr.json";

const LOCALE_PERSISTENCE_KEY = "language";

const languageDetector = {

type: 'languageDetector',

async: true,

detect: async (language:any) => {

const persistedLocale = await AsyncStorage.getItem(LOCALE_PERSISTENCE_KEY);

if (!persistedLocale) {

// Find best available language from the resource ones

// Return detected locale or default language

return language("en");




init: () => {},

cacheUserLanguage: (locale:any) => {

AsyncStorage.setItem(LOCALE_PERSISTENCE_KEY, locale);







// lng: "en",

resources: {

en: {

translation: en


fr: {

translation: fr




export default i18next;

5. import i18next.js file in App.js
import I18n from “./utils/i18n”;

6.For use follow these step

6.For change language

7.Restart you app using react-native-restart
8.change layout from left to right use I18nManager form react-native