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.
|
1 |
npm install react-native-localization --save |
|
1 |
npm install react-navigation --save |
3. Next step is to install the Gesture Handler library which is necessary to install with React Navigation.
|
1 |
npm install react-native-gesture-handler --save |
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.
|
1 |
react-native link |
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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native'; |
6. Import LocalizedStrings component from react-native-localization library.
|
1 |
import LocalizedStrings from 'react-native-localization'; |
7. Import createStackNavigator & createAppContainer from react navigation library.
|
1 |
import { createStackNavigator, createAppContainer } from 'react-navigation'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const All_Language_Strings = new LocalizedStrings({ "hi": { text_1: "हैलो दोस्तों.", text_2: "हमारी वैबसाइट पर आपका स्वागत है.", }, "en": { text_1: "Hello Guys.", text_2: "Welcome to our Website.", }, "fr": { text_1: "Bonjour les gars.", text_2: "Bienvenue sur notre site.", }, "sp": { text_1: "Hola chicos.", text_2: "Bienvenido a nuestro sitio web.", } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
class Select_Language_Screen extends Component { static navigationOptions = { title: 'Select_Language_Screen', header: null }; constructor(props) { super(props); this.lang = [ { shortName: 'hi', longName: 'Hindi' }, { shortName: 'en', longName: 'English' }, { shortName: 'fr', longName: 'French' }, { shortName: 'sp', longName: 'Spanish' }, ]; } navigate_To_Next_Activity(item) { All_Language_Strings.setLanguage(item); this.props.navigation.navigate('Second', { Language_Code: item }); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.heading}> Please Select Your Language </Text> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }} style={styles.imageStyle} /> <ScrollView style={{ marginTop: 30, width: '80%' }}> { this.lang.map((item, key) => ( <TouchableOpacity key={key} onPress={this.navigate_To_Next_Activity.bind(this, item.shortName)}> <Text style={styles.text} >{item.longName} </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} /> </TouchableOpacity> )) } </ScrollView> </View> ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
class HomeScreen extends Component { static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('Title', 'Default Title'), }; }; componentDidMount() { var that = this; var heading = ''; if (this.props.navigation.state.params.Language_Code == 'hi') { heading = 'Selected Language Hindi'; } else if ( this.props.navigation.state.params.Language_Code == 'en' ) { heading = 'Selected Language English'; } else if ( this.props.navigation.state.params.Language_Code == 'fr' ) { heading = 'Selected Language French'; } else if ( this.props.navigation.state.params.Language_Code == 'sp' ) { heading = 'Selected Language Spanish'; } that.props.navigation.setParams({ Title: heading, }); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> {All_Language_Strings.text_1}</Text> <Text style={styles.text}> {All_Language_Strings.text_2} </Text> </View> ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
const Root = createStackNavigator( { Home: Select_Language_Screen, Second: HomeScreen }, { initialRouteName: "Home" } ); export default createAppContainer(Root); |
12. Creating style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, heading: { color: '#000', fontSize: 28, textAlign: 'center', marginTop: 40 }, imageStyle: { width: 64, height: 64, marginTop: 30 }, text: { color: '#000', fontSize: 24, textAlign: 'center', padding: 10 } }); |
13. Complete source code for App.js file class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native'; import LocalizedStrings from 'react-native-localization'; import { createStackNavigator, createAppContainer } from 'react-navigation'; const All_Language_Strings = new LocalizedStrings({ "hi": { text_1: "हैलो दोस्तों.", text_2: "हमारी वैबसाइट पर आपका स्वागत है.", }, "en": { text_1: "Hello Guys.", text_2: "Welcome to our Website.", }, "fr": { text_1: "Bonjour les gars.", text_2: "Bienvenue sur notre site.", }, "sp": { text_1: "Hola chicos.", text_2: "Bienvenido a nuestro sitio web.", } }); class Select_Language_Screen extends Component { static navigationOptions = { title: 'Select_Language_Screen', header: null }; constructor(props) { super(props); this.lang = [ { shortName: 'hi', longName: 'Hindi' }, { shortName: 'en', longName: 'English' }, { shortName: 'fr', longName: 'French' }, { shortName: 'sp', longName: 'Spanish' }, ]; } navigate_To_Next_Activity(item) { All_Language_Strings.setLanguage(item); this.props.navigation.navigate('Second', { Language_Code: item }); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.heading}> Please Select Your Language </Text> <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }} style={styles.imageStyle} /> <ScrollView style={{ marginTop: 30, width: '80%' }}> { this.lang.map((item, key) => ( <TouchableOpacity key={key} onPress={this.navigate_To_Next_Activity.bind(this, item.shortName)}> <Text style={styles.text} >{item.longName} </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} /> </TouchableOpacity> )) } </ScrollView> </View> ); } } class HomeScreen extends Component { static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('Title', 'Default Title'), }; }; componentDidMount() { var that = this; var heading = ''; if (this.props.navigation.state.params.Language_Code == 'hi') { heading = 'Selected Language Hindi'; } else if ( this.props.navigation.state.params.Language_Code == 'en' ) { heading = 'Selected Language English'; } else if ( this.props.navigation.state.params.Language_Code == 'fr' ) { heading = 'Selected Language French'; } else if ( this.props.navigation.state.params.Language_Code == 'sp' ) { heading = 'Selected Language Spanish'; } that.props.navigation.setParams({ Title: heading, }); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> {All_Language_Strings.text_1}</Text> <Text style={styles.text}> {All_Language_Strings.text_2} </Text> </View> ); } } const Root = createStackNavigator( { Home: Select_Language_Screen, Second: HomeScreen }, { initialRouteName: "Home" } ); export default createAppContainer(Root); const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, heading: { color: '#000', fontSize: 28, textAlign: 'center', marginTop: 40 }, imageStyle: { width: 64, height: 64, marginTop: 30 }, text: { color: '#000', fontSize: 24, textAlign: 'center', padding: 10 } }); |
Screenshots:
hii sir,
please make tutorial on react-native with
npm i redux ,
npm i react-redux,
npm i react-thunk,
npm i react-navigation,
Rahul i have already make tutorial on react navigation and soon will be upload tutorial about Redux.
Hello, I did try your way and I get this : ” Something went wrong initializing the native ReactNativeLocalization module. Please check your configuration. Did you run ‘react-native link’? ”
But I installed react-native link and use it…
Do you have an idea of where the problem come ?
Thanks
Did you link the library ?
This is best if the application size is small but what in case if app is too large and the data may come from API of only one language?
Rohit did you want to implement Language Translation functionality in app?
How to use it for two different .js files? I have tried alot but can’t get what I want.
Something went wrong initializing the native ReactNativeLocalization module. Please check your configuration. Did you run ‘react-native link
did reac-native link
did react-native link react-native-localization
not nothing