Procedure of selecting TextInput component is called as RequestFocus. When Android and iOS application user selects the TextInput for entering some value then it will automatically became high light this is because of RequestFocus. By default when react native app starts then there is no TextInput component will be focus but we can manually-dynamically focus any TextInput present in react native app using autoFocus = {true} prop. This prop would allow us to automatically focus/selects any TextInput on application starts time. So in this tutorial we would going to create a react native android iOS app and RequestFocus TextInput Programmatically Example Tutorial.
Topics cover in this example :
- Enabling Auto Focus using autoFocus = {true} prop in TextInput.
- Showing Next button on Keypad ( Both Android & iOS devices ).
- Auto Select next TextInput on Next button Press.
Contents in this project RequestFocus TextInput Programmatically Example in React Native App :
1. Import StyleSheet, View and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput } from ‘react-native’;
|
2. Create a Root View in render’s return block. This view is used as Parent View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Create 1st TextInput component in Root View. Now we would use the autoFocus = {true} prop in this TextInput. Using this prop it will by default automatically selects-focus the TextInput on app starts time. We would use another prop returnKeyType = {“next”} in TextInput. This prop will show the Next Button on Keypad screen. Now we would use the onSubmitEditing={} prop this would help us to automatically navigate to next TextInput. We would use the ref=’ ‘ prop in next TextInput and pass some unique 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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter First Name”
style={styles.TextInputStyle}
returnKeyType = {“next”}
autoFocus = {true}
onSubmitEditing={(event) => {
this.refs.LastName.focus();
}}
/>
</View>
);
}
|
4. Create another TextInput for User Last Name and use the ref = ‘ ‘ prop. This prop is used as reference ID .
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter First Name”
style={styles.TextInputStyle}
returnKeyType = {“next”}
autoFocus = {true}
onSubmitEditing={(event) => {
this.refs.LastName.focus();
}}
/>
<TextInput
ref=‘LastName’
placeholder=“Enter Last Name”
returnKeyType = {“next”}
style={styles.TextInputStyle}
onSubmitEditing={(event) => {
this.refs.Address.focus();
}}
/>
</View>
);
}
|
5. Create another TextInput for Address.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter First Name”
style={styles.TextInputStyle}
returnKeyType = {“next”}
autoFocus = {true}
onSubmitEditing={(event) => {
this.refs.LastName.focus();
}}
/>
<TextInput
ref=‘LastName’
placeholder=“Enter Last Name”
returnKeyType = {“next”}
style={styles.TextInputStyle}
onSubmitEditing={(event) => {
this.refs.Address.focus();
}}
/>
<TextInput
ref=‘Address’
placeholder=“Enter Address”
style={styles.TextInputStyle}
/>
</View>
);
}
|
6. Create Style for Root View and TextInput component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
marginBottom: 10,
height: 50,
width: ‘93%’,
},
});
|
7. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput } from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter First Name”
style={styles.TextInputStyle}
returnKeyType = {“next”}
autoFocus = {true}
onSubmitEditing={(event) => {
this.refs.LastName.focus();
}}
/>
<TextInput
ref=‘LastName’
placeholder=“Enter Last Name”
returnKeyType = {“next”}
style={styles.TextInputStyle}
onSubmitEditing={(event) => {
this.refs.Address.focus();
}}
/>
<TextInput
ref=‘Address’
placeholder=“Enter Address”
style={styles.TextInputStyle}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
marginBottom: 10,
height: 50,
width: ‘93%’,
},
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Add Search Bar Filter on JSON Listview Example
Add New Activity in React Native App Using StackNavigator Android iOS Tutorial
Use React Native Ionicons Icon in Android iOS App Example
React Native calculate child view X Y Dimensions dynamically on Button Click iOS Android Example
React Native Set Change App Icon in iOS Android Example Tutorial
