How to dismiss the keyboard in React native without clicking the return button ? - GeeksforGeeks

17 Jun, 2021
In this article, we will see how to dismiss the keyboard in React Native without clicking the return button. To dismiss the keyboard we will be discussing two methods. The first method uses TouchableWithoutFeedback component to invoke a function that dismisses the keyboard whenever the screen is tapped. The second method will use ScrollView along with keyboardShouldPersistTaps=’handled’ attribute which will also provide us with the same functionality.
Method 1: Using TouchableWithoutFeedback Component: We simply encapsulate the outermost View component of our App inside the TouchableWithoutFeedback component and set the onPress value of this component to Keyboard.dismiss.
Syntax:
<TouchableWithoutFeedback onPress={Keyboard.dismiss} 
                          accessible={false}>
     <View style={{flex: 1}}>
         ...Rest of the Application Code...
     </View>
</TouchableWithoutFeedback>
 
Example: Write down the following code in the App.js file.
App.js
import React from 'react';import { View,          StyleSheet,          StatusBar,          TouchableWithoutFeedback,          TextInput,         Keyboard } from 'react-native';  export default class App extends React.Component {  render(){    return (      <TouchableWithoutFeedback onPress={Keyboard.dismiss}                                 accessible={false}>          <View style={styles.container}>              <TextInput style={styles.input} keyboardType="numeric"               placeholder="Type here"/>          </View>      </TouchableWithoutFeedback>    );  }}  const styles = StyleSheet.create({  container:{    flex: 1,    justifyContent:'center',    alignItems:'center',    backgroundColor: '#ccd2db'  },    input:{    width:200,    height:50,     borderWidth:1,    marginTop: 200,    marginLeft: 100  }});
Output:
Method 2: Using ScrollView: We will make use of the ScrollView component along with the keyboardShouldPersistTaps=’handled’ attribute as the outermost view for our application. This will enable us to dismiss the keyboard whenever we tap on the screen apart from the buttons and text input regions. If we were to use the ScrollView component without the keyboardShouldPersistTaps=’handled’ attribute then in case of multiple input areas or buttons tapping on these will also dismiss the keyboard.
Syntax:
<ScrollView keyboardShouldPersistTaps='handled'>
     ... Rest of the Application Code ...
</ScrollView>
Example: Write down the following code in the App.js file.
App.js
import React from 'react';import { View,          StyleSheet,          StatusBar,          TouchableWithoutFeedback,         TextInput,         Keyboard,          ScrollView } from 'react-native';  export default class App extends React.Component {  render(){    return (              <ScrollView keyboardShouldPersistTaps='handled'         style={styles.container}>          <TextInput style={styles.input} keyboardType="numeric"           placeholder="Type here"/>      </ScrollView>        );  }}  const styles = StyleSheet.create({  container:{    flex: 1,    backgroundColor: '#ccd2db'  },    input:{    width:200,    height:50,     borderWidth:1,    marginTop: 200,    marginLeft: 100  }});
Output: 
Picked
React-Native
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript