How to Hide Keyboard Programmatically in React Native

By Rashid •  Updated on: January 9th, 2023 • 
React Native Tutorials

The appearance of the Keyboard in your react native app may make behavioral changes in your user interface and hence sometimes we may need to hide the Keyboard to not affect the UI. Hiding or dismissing the keyboard programmatically in react native is pretty easy.

You just need to import the Keyboard component from react native and invoke the dismiss method on the Keyboard.

import {Keyboard} from 'react-native';
Keyboard.dismiss();

In the following react native keyboard dismiss example, I have a TextInput component in which the autoFocus prop is true. Hence once the app is run, the keyboard appears automatically. I wrote a timeout function with Keyboard.dismiss() in the useEffect, so that the Keyboard gets dismissed after 5 seconds.

import React, {useState, useEffect} from 'react';
import {View, Keyboard, TextInput, StyleSheet} from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  useEffect(() => {
    setTimeout(() => {
      Keyboard.dismiss();
    }, 5000);
  }, []);

  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 50}}
        placeholder="Type here!"
        autoFocus={true}
        value={text}
        onChangeText={input => setText(input)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

export default App;

The output will be as given in the gif below:

react native dismiss keyboard

I hope this tutorial to dismiss keyboard in react native is helpful for you.

Rashid