How to Hide Keyboard Programmatically in React Native

Last Updated on December 14, 2020.

The appearance of 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 keyboard programmatically in react native is pretty easy.

You just need to import Keyboard component from react native and invoke dismiss method on 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 componentDidMount lifecycle, so that the Keyboard get dismissed after 5 seconds.

Class based component

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


class Home extends Component {

    componentDidMount(){
    setTimeout(() => {
    Keyboard.dismiss();
    }, 5000);
    }

    constructor(props){
        super(props);
        this.state = {
         text: ''
        }
    }

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


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    image: {
        height: 180,
        width: 200,
        transform: [{ rotate: '90deg' }]
    }
});


export default Home;

Function based component

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

const Home = () => {
  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',
  },
  image: {
    height: 180,
    width: 200,
    transform: [{rotate: '90deg'}],
  },
});

export default Home;

The out put will be as given in the gif below:

That’s how you hide Keyboard in react native!