Dismiss keyboard on screen tap react native -
Dismiss keyboard on screen tap react native
by on on android

Dismiss keyboard on screen tap react native

When building interactive forms on react native, is very essential to dismiss keyboard on screen tap or when we tap outside the text input. here is a guide to do.


Step 1: Create a component called KeyboardDismiss 

Step 2: We are going to make this possible using the react native TouchableWithoutFeedBack from react native 

import React from 'react';
import {ReactElement} from 'react';
import {Keyboard, TouchableWithoutFeedBack} from 'react-native';
export default ({children}: {children: ReactElement}) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);


We used the touchable without feedback onPress to trigger the keyboard dismiss function, now go ahead to make use of this component to wrap your form components.