The String function .concat() gives us the functionality to merge two or multiple string into one string. So in this tutorial we would going to create a react native Android iOS app with Two different strings and we would Combine Two Strings into one string using the .concat() String function and show the merged text into Text component.
Contents in this project Combine Two Strings Into One Using concat() Function :
1. Import StyleSheet, Text, View and Button component in your project.
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
|
2. Create constructor() in your main class and define a state named as SampleText. This state is used to show merged text inside Text component.
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
SampleText : “”
}
}
|
3. Create a function named as CombineTwoStrings() . Inside this function we would create 2 String variable named as String_1 and String_2. Now we would Save the String_1 and String_2 var value into String_3 var using concat() function. Finally we would store the String_3 value into SampleText state.
1
2
3
4
5
6
7
8
9
10
|
CombineTwoStrings=()=>{
var String_1 = “Hello” ;
var String_2 = “User” ;
var String_3 = String_1.concat(” “ , String_2);
this.setState({SampleText : String_3});
}
|
4. Create Parent View in render’s return block with One Text component and One Button. We would call the CombineTwoStrings() function on Button onPress event.
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}> {this.state.SampleText} </Text>
<Button title=” Combine 2 Strings On Button Click “ onPress={this.CombineTwoStrings} />
</View>
);
}
|
5. Create Style for View and Text component.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextComponentStyle:{
fontSize : 23,
textAlign : ‘center’,
marginBottom: 10
}
});
|
6. Complete source code for App.js File :
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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
export default class App extends Component<{}> {
constructor(){
super();
this.state={
SampleText : “”
}
}
CombineTwoStrings=()=>{
var String_1 = “Hello” ;
var String_2 = “User” ;
var String_3 = String_1.concat(” “ , String_2);
this.setState({SampleText : String_3});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}> {this.state.SampleText} </Text>
<Button title=” Combine 2 Strings On Button Click “ onPress={this.CombineTwoStrings} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextComponentStyle:{
fontSize : 23,
textAlign : ‘center’,
marginBottom: 10
}
});
|
Screenshot in Android device :
Screenshot in iOS device :