React Native Create Multi Language Localization Support App iOS Android

There are so many languages in the world even in INDIA we can found more than 14 languages spoken fluently by million of peoples. By giving support of Localization also know as Multiple language support we can provide more facility to our application users. Users can choose their own language or the language they are familiar with. It’s easy to integrate Multiple language support in react native application using react-native-localization NPM library. So in this tutorial we would Create Multi Language Localization Support App for both iOS & Android mobile application.

What we are doing in current project:

We would give the functionality to choose between multiple languages in application. After selection user will navigate to next activity screen where he’ll see all the content in his selected language.

Contents in this project Create Multi Language Localization Support App for React Native iOS Android App:

1. Open your react native project in Command Prompt or Terminal and execute below command to install the react-native-localization npm library.


2. Next thing is to install the React Navigation library in our project because we are using multiple activities screens in our project. So again open your react native project folder in Command Prompt/Terminal and execute below command.

3. Next step is to install the Gesture Handler library which is necessary to install with React Navigation.

4. The final and most important step is to execute the LINK command to refresh the complete project and index all the newly installed libraries.

5. Next step is to start coding. Open your project’s App.js file and import StyleSheet, Text, View, Image, ScrollView & TouchableOpacity component in your project.

6. Import LocalizedStrings component from react-native-localization library.

7. Import createStackNavigator & createAppContainer from react navigation library.

8. Create a constant string group named as All_Language_Strings using LocalizedStrings component. As you can see in below code i have defined first a language code then in object section defining multiple languages with object data. You can define as many langues langues you want here.

9. Create a new activity class named as Select_Language_Screen. This would be our main home screen where we would select the Language.

  • navigationOptions : Used to set the Activity header title.
  • this.lang : This is the array we used to create Simple listview to show all the languages name.
  • navigate_To_Next_Activity : We would call this function on Touchable Opacity onPress event to navigate to next activity.
  • All_Language_Strings.setLanguage(item) : This would set the default language as Select item code.

10. Create another class named as HomeScreen. This would be our main content class where all the content shows in selected language.

componentDidMount : Inside the method we would dynamically changing the Activity header title text.

11. Creating a constant named as Root and pass the both screens using createStackNavigator. After that you’ll have to call the Root object into createAppContainer.

12. Creating style.

13. Complete source code for App.js file class.

Screenshots:

Create Multi Language Localization Support App iOS Android