« Back to Blogs

How To Achieve Internationalization In React Native

Internationalization is the process of designing and developing our software or mobile application product so it can be adapted and localized to different cultures, regions, and languages. Here, we are going to implement internationalization which will provide multilingual support and make the app accessible and usable to a wider range of users.
Prerequisite :
  1. Node and Npm installed
  2. VS Code
  3. React native set up

Follow these steps to achieve internationalization:

Step 1 : Set up the project in react-native
  • react-native init Project_name

Ex. react-native init InternationalizationDemo

Step 2 : Install i18next and react -18next libraries

react-i18next is a powerful internationalization framework for React Native which is based on i18next.

So, if we are using react-i18next then we need to configure i18next first.

 

For iOS go into the ios folder and do pod install

  • cd ios - > pod install
Step 3 : Create locales for different languages

Go to the src folder and create one new folder named i18.

Inside that create two json files as follow:

src/i18/en.json

{
  "translation":{
	"WelcomeText":"Welcome..."
  }
}

src/i18/sp.json

{
    "translation":{
	"WelcomeText":"Bienvenido..."
   }
}
Step 4 : Adding the initializer file

Create another file to initialize the languages,

import the packages and the language file which we created and provide the resources

src/i18/i18next.js

import i18next from 'i18next';
import english from './en.json';
import spanish from './sp.json';
import {initReactI18next} from 'react-i18next';

i18next.use(initReactI18next).init({
   lng: 'en',
   fallbackLng: 'en',
   resources: {
     en: english,
     sp: spanish,
   },
   react: {
     useSuspense: false,
   },
 });

export default i18next;
Step 5 : Configure the react-native picker

React Native Picker is used when we need to provide an alternative to choose from multiple options.

 

For iOS run this :

  • npx pod install
Step 6 : Localizing app-text with App.js

Create a simple screen with a text and picker to choose a language.

Set the default language as English.

Use the inbuilt method to change the language of the react i18next.

Using translation displays the text which is in the json file.

App.js

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Picker} from '@react-native-picker/picker';
import {styles} from './android/app/src/style';

const App = () => {
 const [selectedValue, setSelectedValue] = useState('english');
 const {t, i18n} = useTranslation();
 return (
   <View style={styles.container}>
     <View>
       <Picker
   	selectedValue={selectedValue}
   	mode={'dropdown'}
   	onValueChange={item => {
	   setSelectedValue(item);
	   i18n.changeLanguage(item);
       	}}
   	style={styles.pickerView}>
   	<Picker.Item style={styles.pickerText} label="english" value="en" />
   	<Picker.Item style={styles.pickerText} label="spanish" value="sp" />
       </Picker>
     </View>
     <View>
       <Text style={styles.textStyle}> {t('WelcomeText')}</Text>
     </View>
  </View>
 );
};
export default App;

Add this style file in your project to style the view and text

import {StyleSheet} from 'react-native;

export const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignContent: 'center',
 },
 pickerView: {
   marginLeft: 250,
   marginTop: -360,
 },
 pickerText: {
   fontSize: 20,
 },
 textStyle: {
   color: '#0000ff',
   fontSize: 35,
   marginLeft: 120,
 },
});

 

Now, save the code and run the app in the emulator

Your app will look as displayed in following screens :


 

We have learned how internationalizing React Native applications helps the user to pick a display language from the setting and there are many ways to apply the internationalize of mobile languages. We provide mobile app development services as per the requirements of the client. For more information contact us.

contact-us Request a callback WhatsApp