Open In App

How to check keyboard is opened or closed in React Native ?

Improve
Improve
Like Article
Like
Save
Share
Report

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.

In this article, we will be learning how to check keyboard is opened or closed in React Native.

Creating React Native App: 

Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.

npm install -g expo-cli

Step 2: Create a react native project using expo.

expo init "gfg"

Step 3: Now go to the created project using the below command.

cd "gfg"

Project Structure: It will look like the following:

Step 4: We can easily check if the keyboard is opened or not in our react native app. For this, we are going to use the Keyboard module of react-native. Add the below code in the App.js file.

Javascript




import React, { useState } from "react";
import { Keyboard, TextInput, Button, View, Text } from "react-native";
  
const GfGApp = () => {
    const keyboardShowListener = Keyboard.addListener(
        'keyboardDidShow',
        () => {
            alert('Keyboard is open')
        }
    );
    const keyboardHideListener = Keyboard.addListener(
        'keyboardDidHide',
        () => {
            alert('Keyboard is closed')
        }
    );
  
    return (
        <View style={{ marginTop: 200 }}>
            <Text style={{ fontSize: 18 }}>
                GeeksforGeeks React Native Keyboard</Text>
            <TextInput
                style={{ backgroundColor: 'grey' }}
                onSubmitEditing={Keyboard.dismiss}
            />
        </View>
    );
};
  
export default GfGApp;


Here first we are creating our toast using the keyboard module of react-native. Then we are listening to the keyboardDidHide and keyboardDidShow events.

Step to run the application: Now run the application using the below command in the terminal.

npm run web

Output:



Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads