In react native the Keyboard.dismiss() method is used to hide the keyboard or soft keypad, touchpad on a certain click event. In some of applications we have seen that user can tap outside the TextInput component and automatically the keyboard will hide, there is no need to click on a button or other component to hide the touchpad. This functionality is called as hiding keyboard by touching anywhere on screen. So in this tutorial we would learn about React Native Hide Dismiss Keyboard on Touch Outside Android iOS Example.
Contents in this project React Native Hide Dismiss Keyboard on Touch Outside Example:-
1. Open your project’s main App.js file and import Keyboard, StyleSheet, View, Text, TextInput and TouchableWithoutFeedback component.
|
1
2
|
import React from ‘react’;
import { Keyboard, StyleSheet, View, Text, TextInput, TouchableWithoutFeedback } from ‘react-native’;
|
2. Creating custom component named as HideKeyboard with children prop. Inside the component we would use the TouchableWithoutFeedback component and apply the onPress={() => Keyboard.dismiss()} event. We would use this component as our Root component below.
|
1
2
3
4
5
|
const HideKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
|
3. Creating our main export default App functional component. Here we would first call our custom component HideKeyboard as Root parent component -> creating 2 Text Input components.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
export default function HomeScreen() {
return (
<HideKeyboard>
<View style={styles.MainContainer}>
<Text style={styles.text}>React Native Hide Keyboard on Touch Outside</Text>
<TextInput
style={styles.textinput}
placeholder=“Enter Your Email”
keyboardType=“numeric”
/>
<TextInput
style={styles.textinput}
placeholder=“Enter Your Password”
/>
</View>
</HideKeyboard>
);
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 28,
textAlign: ‘center’
},
textinput: {
width: ‘80%’,
height: 40,
paddingVertical: 12,
margin: 8,
borderRadius: 7,
backgroundColor: ‘#F9FBE7’,
borderWidth: 2,
borderColor: ‘#00B8D4’,
textAlign: ‘center’
},
});
|
5. 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
|
import React from ‘react’;
import { Keyboard, StyleSheet, View, Text, TextInput, TouchableWithoutFeedback } from ‘react-native’;
const HideKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
export default function HomeScreen() {
return (
<HideKeyboard>
<View style={styles.MainContainer}>
<Text style={styles.text}>React Native Hide Keyboard on Touch Outside</Text>
<TextInput
style={styles.textinput}
placeholder=“Enter Your Email”
keyboardType=“numeric”
/>
<TextInput
style={styles.textinput}
placeholder=“Enter Your Password”
/>
</View>
</HideKeyboard>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 28,
textAlign: ‘center’
},
textinput: {
width: ‘80%’,
height: 40,
paddingVertical: 12,
margin: 8,
borderRadius: 7,
backgroundColor: ‘#F9FBE7’,
borderWidth: 2,
borderColor: ‘#00B8D4’,
textAlign: ‘center’
},
});
|
Screenshot:
Also Read :
View All Data From SQLite Database in React Native FlatList Example
React Native Share API example to Share TextInput message from App
Subscribe to Our YouTube Channel Coding Tech Examples
React Native Set Hint PlaceHolder Align Center Inside TextInput
React Native List of All Text Component CSS Style Props Explained Example
