How to persist and integrate multi language support in react native

  1. install @react-native-community/async-storage for persist lanuage
  2. 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");

}

language(persistedLocale);

},

init: () => {},

cacheUserLanguage: (locale:any) => {

AsyncStorage.setItem(LOCALE_PERSISTENCE_KEY, locale);

}

};

i18next

.use(languageDetector)

.use(initReactI18next)

.init({

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

i18n.changeLanguage(‘ar’);
7.Restart you app using react-native-restart
8.change layout from left to right use I18nManager form react-native

I18nManager.forceRTL(true);

I18nManager.forceRTL(false);

--

--

--

Software Engineer (React/React Native Developer)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to CRUD in Angular + Firebase Firestore

Course Agenda for Higher order RxJS observable

JavaScript #13 — Conditional If/Else

Make your React components more efficient by using Pure Components or React.memo()

Debugging Angular CLI inside VSCode with Browser Preview

IMAGE EDITING USING PYTHON

What are Props in React?

Best Chrome Extensions for Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahtisham Shahzad

Ahtisham Shahzad

Software Engineer (React/React Native Developer)

More from Medium

How to add deep linking support to your React Native project and also support Universal links…

Crash! Crash! Crash! Integration of Huawei Crash Kit in Application using React Native.

From React to React Native, or There and Back

React + Native code = React Native

[React] Modal with Backdrop and slide animation effects