Soft keypad is basic input medium in both android and iOS devices, because without its we cannot submit any input in android and iOS devices. The Soft keyboard will automatically show when user selects the TextInput component and hide after pressing the enter button on Keypad. But sometimes developer needs to Manually Hide Soft Keyboard on button click or Image click to show another window on screen, Just like we have seen in Whats-app and Hike and other social chatting apps. So in this tutorial we would going to Manually Dynamically Hide Soft Keyboard on Button Click in iOS Android react native applications using Keyboard.dismiss() method.
We are using the Keyboard.dismiss() method to hide the Soft keypad from phone’s screen.
Contents in this project Dynamically Hide Soft Keyboard on Button Click in iOS Android App:
1. Import StyleSheet, View, Platform, Keyboard, TextInput, TouchableOpacity and Text component in your project’s class.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Keyboard, TextInput, TouchableOpacity, Text } from ‘react-native’;
|
2. Create a function named as Hide_Soft_Keyboard() in your class, Inside this function we would call the Keyboard.dismiss() method. We would call this function on Button onPress event.
|
1
2
3
4
5
|
Hide_Soft_Keyboard=()=>{
Keyboard.dismiss();
}
|
3. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
)
}
|
4. Create a Button in root view using TouchableOpacity component, we would call the Hide_Soft_Keyboard() function on its onPress event. After that we would make a TextInput component.
|
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
|
render()
{
return(
<View style = { styles.MainContainer }>
<TouchableOpacity
onPress={this.Hide_Soft_Keyboard}
activeOpacity={0.7}
style={styles.button} >
<Text style={styles.TextStyle}> Click Here To Hide Soft Keyboard </Text>
</TouchableOpacity>
<TextInput
placeholder=“Enter Your Name”
underlineColorAndroid=‘transparent’
style={styles.textInput}
/>
</View>
)
}
|
5. 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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0
},
textInput:{
textAlign: ‘center’,
height: 40,
borderRadius: 12 ,
width: ‘90%’,
backgroundColor : “#FFF”,
borderWidth: 2,
borderColor: ‘#FF1744’,
},
button: {
width: ‘90%’,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginBottom: 20,
padding: 10
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Keyboard, TextInput, TouchableOpacity, Text } from ‘react-native’;
export default class Mynewproject extends Component <{}> {
Hide_Soft_Keyboard=()=>{
Keyboard.dismiss();
}
render()
{
return(
<View style = { styles.MainContainer }>
<TouchableOpacity
onPress={this.Hide_Soft_Keyboard}
activeOpacity={0.7}
style={styles.button} >
<Text style={styles.TextStyle}> Click Here To Hide Soft Keyboard </Text>
</TouchableOpacity>
<TextInput
placeholder=“Enter Your Name”
underlineColorAndroid=‘transparent’
style={styles.textInput}
/>
</View>
)
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0
},
textInput:{
textAlign: ‘center’,
height: 40,
borderRadius: 12 ,
width: ‘90%’,
backgroundColor : “#FFF”,
borderWidth: 2,
borderColor: ‘#FF1744’,
},
button: {
width: ‘90%’,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginBottom: 20,
padding: 10
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
Example of Insert Data Into SQLite Database in React Native
Animated useNativeDriver was not specified This is a required option React Native Error Solution
React Native Auto Scale Image Width Height Dimension Example Tutorial
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
React Native Timeline ListView FlatList Android iOS Component Example Tutorial
