How to Hide keyboard in react-native?

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 = () => {
  Keyboard.dismiss();
};

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

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.