React Native Multi Language App

In this blog post, I will tell you how to easily integrate multi-language support with react native into your application.

With the library I use for this, react-i18next and i18next

React native multi language

Firstly, create a new react native project

npx react-native init multiLanguage

Let’s add packages to your new app

cd multiLanguage

npm i react-i18next i18next

Create a new folder to your root directory, it calls “Translations”. and create index.js file in your Translations folder.

After create a new folder, it calls “resources” under Translations and create index.js file in your resources folder.

After that create which languages you want to translate, let’s create their files. For example en.js for English fr.js for French

Here is your file structure must be like this

Open your Translations/index.js and import libraries

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';

Now import your resources folder.

import * as resources from './resources';

Open your resources/index.js file and import your translation files.

export {default as en} from './en';
export {default as ar} from './ar';
export {default as fr} from './fr';
export {default as de} from './de';
export {default as tr} from './tr';

Let’s setup i18next library to your Translations/index.js

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    ...Object.entries(resources).reduce(
      (acc, [key, value]) => ({
        ...acc,
        [key]: {
          translation: value,
        },
      }),
      {},
    ),
  },
  fallbackLng: 'en',
});

export default i18n;

Here is your Translations/index.js full version

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import * as resources from './resources';

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    ...Object.entries(resources).reduce(
      (acc, [key, value]) => ({
        ...acc,
        [key]: {
          translation: value,
        },
      }),
      {},
    ),
  },
  fallbackLng: 'en',
});

export default i18n;

Import Translations to your App.js

import "./Translations";

Here is your full code example about App.js

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import './Translations';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>Test</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Now Let’s add some text to your translations files, here is your example Translations/resources/en.js

export default {
  home: {
    title: 'Home',
    description: 'This is the home page',
  },
};

Here is another language from Turkey. I wanna use tr.js also

export default {
  home: {
    title: 'Anasayfa',
    description: 'Burası Anasayfadır',
  },
};

Now import use Translation from react-i18next library your App.js file

Using translation example like that

 <Text style={styles.title}>{t('home.title')}</Text>
   <Text style={styles.desc}>{t('home.description')}</Text>

Base example for App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import './Translations';
import {useTranslation} from 'react-i18next';

const App = () => {
  const {t} = useTranslation();
  return (
    <SafeAreaView>
      <View style={styles.baseContainer}>
        <Text style={styles.title}>{t('home.title')}</Text>
        <Text style={styles.desc}>{t('home.description')}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  baseContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'black',
  },
  desc: {
    fontSize: 18,
    color: 'black',
  },
});
export default App;

Let’s change language when press some button.

We must use i18n inside useTranslation

  const {t, i18n} = useTranslation();

This is our function when click button to change language

 const changeLangToTr = () => {
    i18n.changeLanguage('tr');
  };
  const changeLangToEn = () => {
    i18n.changeLanguage('en');
  };

Here is full source code for App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Button, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import './Translations';
import {useTranslation} from 'react-i18next';

const App = () => {
  const {t, i18n} = useTranslation();

  const changeLangToTr = () => {
    i18n.changeLanguage('tr');
  };
  const changeLangToEn = () => {
    i18n.changeLanguage('en');
  };
  return (
    <SafeAreaView>
      <View style={styles.baseContainer}>
        <Text style={styles.title}>{t('home.title')}</Text>
        <Text style={styles.desc}>{t('home.description')}</Text>
        <Button title={t('home.buttonTr')} onPress={() => changeLangToTr()} />
        <Button title={t('home.buttonEn')} onPress={() => changeLangToEn()} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  baseContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'black',
  },
  desc: {
    fontSize: 18,
    color: 'black',
  },
});
export default App;

That’s it we finished multi language in your react native app.

You can find full source code on my github account