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
|
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.
|
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: ‘/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: ‘/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:
Also Read :
React Native Infinite List FlatList Pagination to Load More JSON Data dynamically on Button Click Tutorial
React Native Simple Custom Switch Component Android iOS Tutorial
React Native Add Floating Action Button in Both Android iOS App
React Native Convert Text to Upper Case Lower Case on Button Click
React Native Change Background Color Using Animation in Android iOS
