¿Cómo verificar que el teclado esté abierto o cerrado en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, macOS, tvOS, Web, Windows y UWP al permitir que los desarrolladores usen el marco React junto con con capacidades de plataforma nativa.

En este artículo, aprenderemos cómo verificar que el teclado esté abierto o cerrado en React Native.

Creación de la aplicación React Native: 

Paso 1: usaremos expo para crear la aplicación nativa de reacción. Instale expo-cli usando el siguiente comando en la terminal.

npm install -g expo-cli

Paso 2: Cree un proyecto nativo de reacción usando expo.

expo init "gfg"

Paso 3: Ahora ve al proyecto creado usando el siguiente comando.

cd "gfg"

Estructura del proyecto: Tendrá el siguiente aspecto:

Paso 4: podemos verificar fácilmente si el teclado está abierto o no en nuestra aplicación nativa de reacción. Para ello, vamos a utilizar el módulo Keyboard de react-native. Agregue el siguiente código en el archivo App.js.

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;

Aquí primero estamos creando nuestro brindis usando el módulo de teclado de react-native. Luego estamos escuchando los eventos keyboardDidHide y keyboardDidShow.

Paso para ejecutar la aplicación: Ahora ejecute la aplicación usando el siguiente comando en la terminal.

npm run web

Producción: