React Answers

How to Hide keyboard in react-native?

Spread the love

In React Native, we can hide the keyboard programmatically using the Keyboard module from the react-native package. Here’s how we can achieve this:

import { Keyboard } from 'react-native';

// Call this function to hide the keyboard
const dismissKeyboard = () => {

// Example usage in a component
const MyComponent = () => {
  return (
      <TextInput placeholder="Enter text" />
      <Button title="Hide Keyboard" onPress={dismissKeyboard} />

export default MyComponent;

In this example, pressing the button will trigger the dismissKeyboard function, which in turn calls Keyboard.dismiss() to hide the keyboard. Make sure we import the Keyboard module from 'react-native' at the top of our file.

This approach allows we to hide the keyboard programmatically, which can be useful in scenarios where we want to dismiss the keyboard when a certain action is performed, such as pressing a button or navigating away from a screen.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *