Cómo detectar cuando el teclado está abierto o cerrado en React Native

Contamos con el hallazgo a este enigma, al menos eso creemos. Si tienes preguntas puedes escribirlo en el apartado de comentarios y sin tardar

Solución:

1. Puedes usar clase de teclado de Facebook.

Aquí hay un código de muestra.

import React,  Component  from 'react';
import  Keyboard, TextInput  from 'react-native';

class Example extends Component 
  componentWillMount () 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  
    
  componentWillUnmount () 
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  
    
  _keyboardDidShow () 
    alert('Keyboard Shown');
  
    
  _keyboardDidHide () 
    alert('Keyboard Hidden');
  
    
  render() 
    return (
      
    );
  

###2. También puede usar alguna otra dependencia de npm, como Reaccionar-nativo-teclado-escucha.

Importe el componente al archivo que desea utilizar:

import KeyboardListener from 'react-native-keyboard-listener';

Utilice el componente directamente en su código. El componente no renderizará nada.

    this.setState( keyboardOpen: true ); 
    onWillHide=() =>  this.setState( keyboardOpen: false ); 
  />

Para instalar esta dependencia, ejecute el siguiente comando.

npm install --save react-native-keyboard-listener

Elige cualquiera que creas más conveniente.

Gracias chicos por sus respuestas. Aquí está la versión de ganchos si alguien está interesado:

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

 useEffect(() => 
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => 
        setKeyboardVisible(true); // or some other action
      
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => 
        setKeyboardVisible(false); // or some other action
      
    );

    return () => 
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    ;
  , []);

Versión mejorada de la respuesta de @Khemraj (que funcionó muy bien para mí) con métodos vinculados a la instancia para poder actualizar el estado del componente del oyente y volver a renderizar.

import React,  Component  from 'react';
import  Keyboard, TextInput  from 'react-native';

class Example extends Component 

  state = 
      keyboardState: 'closed'
  

  componentWillMount () 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  

  componentWillUnmount () 
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  

  _keyboardDidShow = () => 
    this.setState(
        keyboardState: 'opened'
    );
  

  _keyboardDidHide = () => 
    this.setState(
        keyboardState: 'closed'
    );
  

  render() 
    return (
      
    );
  

Si eres capaz, tienes la habilidad dejar una sección acerca de qué le añadirías a este ensayo.

---

---

Utiliza Nuestro Buscador