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

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: