Transforming data between activities is one of the most useful task in react native applications because using them we can communicate between activities by passing values to one another. The React Navigation library has its own method known as this.props.navigation.navigate{} which is used to navigate to next activity and with that it can also pass value from one activity screen to another. So in this tutorial we would going to Pass TextInput Entered Value From One Activity Screen to Another Activity using this.props.navigation.navigate{} method of React Navigation. So let’s get started .
Contents in this project Pass TextInput Entered Value From One Activity Screen to Another Activity in Android iOS React Native App Example Tutorial:
1. Before getting started with coding part we need to install the React Navigation library in our current react native project in order to use the Activity structure in our react native app. So to install the react navigation library open your project’s folder in CMD (Terminal) and run the below command .
|
1
|
npm install —save react–navigation
|
Screenshot of CMD:
Screenshot after successfully install the React Navigation library:
2. Import StyleSheet, TextInput, View, TouchableOpacity and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, TextInput, View, TouchableOpacity, Text } from ‘react-native’;
|
3. Import StackNavigator module from react navigation library in your project. This is used to add multiple activities in your project.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
4. Create a Class named as MainActivity, this would be our first home screen of application.
|
1
2
3
4
5
6
7
|
class MainActivity extends Component {
}
|
5. Create static navigationOptions in your Activity to set Activity screen Title.
|
1
2
3
4
5
6
7
8
9
10
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’
};
}
|
6. Creating Constructor() in your MainActivity class and inside the constructor we would make 2 States named as TextInput_Name and TextInput_Number . These states would used to hold the Text Input entered values.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor(props) {
super(props)
this.state = {
TextInput_Name: ”,
TextInput_Number: ”
}
}
|
7. Create a function named as Send_Data_Function() in MainActivity class. Inside this function we would use the this.props.navigation.navigate() method to navigate to next activity class and with that we are also sending the Values of States.
Second : Here the second means the SecondActivity. This will redirect us the second activity.
NameOBJ : Used as a Key object that holds the value of Name state . We would use this object into next activity for receiving name.
NumberOBJ : Used as key object that holds the value of Number state. We would use this object into another activity to receive the sent value of number.
|
1
2
3
4
5
6
7
8
|
Send_Data_Function = () => {
this.props.navigation.navigate(‘Second’, {
NameOBJ: this.state.TextInput_Name,
NumberOBJ: this.state.TextInput_Number
});
}
|
8. Creating 2 Text Input and 1 button component in MainActivity class inside render’s return block. We are using the TouchableOpacity component to make the button.
onChangeText : Used when user starts typing inside Text Input component and save the typed data into State.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Name here”
onChangeText={data => this.setState({ TextInput_Name: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TextInput
placeholder=“Enter Mobile Number here”
onChangeText={data => this.setState({ TextInput_Number: data })}
style={styles.textInputStyle}
keyboardType={‘numeric’}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity onPress={this.Send_Data_Function} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Send TextInput Value To Next Activity </Text>
</TouchableOpacity>
</View>
);
}
|
9. Complete code of MainActivity 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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’
};
constructor(props) {
super(props)
this.state = {
TextInput_Name: ”,
TextInput_Number: ”
}
}
Send_Data_Function = () => {
this.props.navigation.navigate(‘Second’, {
NameOBJ: this.state.TextInput_Name,
NumberOBJ: this.state.TextInput_Number
});
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Name here”
onChangeText={data => this.setState({ TextInput_Name: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TextInput
placeholder=“Enter Mobile Number here”
onChangeText={data => this.setState({ TextInput_Number: data })}
style={styles.textInputStyle}
keyboardType={‘numeric’}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity onPress={this.Send_Data_Function} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Send TextInput Value To Next Activity </Text>
</TouchableOpacity>
</View>
);
}
}
|
10. Creating another class named as SecondActivity. Inside this class we would receive the transfer value from previous activity and show inside the Text component. You can do whatever you want to using this value.
this.props.navigation.state.params.NameOBJ : As you can see the NameOBJ is the key which we have created in our previous MainActivity. So we would use this method to receive the value .
this.props.navigation.state.params.NumberOBJ : Used to receive the value of number object.
Complete source code of SecondActivity :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
class SecondActivity extends Component {
static navigationOptions =
{
title: ‘SecondActivity’
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.textStyle}>
Name = {this.props.navigation.state.params.NameOBJ}
</Text>
<Text style={styles.textStyle}>
Number = {this.props.navigation.state.params.NumberOBJ}
</Text>
</View>
);
}
}
|
11. Creating the StackNavigator activity navigator block. Inside this block we would define our all the activities and give them a unique identifier name which is used on navigation time.
|
1
2
3
4
5
6
7
|
export default Project = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
const styles = StyleSheet.create({
MainContainer: {
alignItems: ‘center’,
flex: 1,
margin: 10
},
textInputStyle: {
height: 40,
width: ‘90%’,
textAlign: ‘center’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 8,
marginTop: 15
},
button: {
width: ‘90%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius: 8,
marginTop: 15
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
},
textStyle: {
color: ‘#000’,
textAlign: ‘center’,
fontSize: 20
}
});
|
13. 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
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
|
import React, { Component } from ‘react’;
import { StyleSheet, TextInput, View, TouchableOpacity, Text } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’
};
constructor(props) {
super(props)
this.state = {
TextInput_Name: ”,
TextInput_Number: ”
}
}
Send_Data_Function = () => {
this.props.navigation.navigate(‘Second’, {
NameOBJ: this.state.TextInput_Name,
NumberOBJ: this.state.TextInput_Number
});
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Name here”
onChangeText={data => this.setState({ TextInput_Name: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TextInput
placeholder=“Enter Mobile Number here”
onChangeText={data => this.setState({ TextInput_Number: data })}
style={styles.textInputStyle}
keyboardType={‘numeric’}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity onPress={this.Send_Data_Function} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Send TextInput Value To Next Activity </Text>
</TouchableOpacity>
</View>
);
}
}
class SecondActivity extends Component {
static navigationOptions =
{
title: ‘SecondActivity’
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.textStyle}>
Name = {this.props.navigation.state.params.NameOBJ}
</Text>
<Text style={styles.textStyle}>
Number = {this.props.navigation.state.params.NumberOBJ}
</Text>
</View>
);
}
}
export default Project = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create({
MainContainer: {
alignItems: ‘center’,
flex: 1,
margin: 10
},
textInputStyle: {
height: 40,
width: ‘90%’,
textAlign: ‘center’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 8,
marginTop: 15
},
button: {
width: ‘90%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius: 8,
marginTop: 15
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
},
textStyle: {
color: ‘#000’,
textAlign: ‘center’,
fontSize: 20
}
});
|
Screenshots:
Also Read :
Example of Navigation Drawer with Section Menu in React Navigation 5.x
React Native Apply Auto Zoom on Background Image Example
How to Create Custom Trapezoid Shape View in React Native
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
React Native Segmented Control Tab Android iOS NPM Example
