¿Cómo esconder el teclado en React Native? La solución que me costó encontrar

Es increíble cómo algo tan básico como esconder el teclado táctil en React Native se volvió un tema de debate y, por qué no decirlo, de soluciones medio parche por un tiempo. Para mí, la frustración era real: tener un TextInput, que el teclado apareciera y no hubiera una forma obvia de hacer que desapareciera tocando fuera del campo. Recuerdo una madrugada depurando esto en un proyecto, pensando que era un problema mío, hasta que descubrí que era un punto de fricción para muchos. Mi cliente, de hecho, me había reclamado que su teclado numérico no tenía botón de cierre y que la app quedaba “pegada”.

El problema no es trivial, especialmente cuando usas un keyboardType='numeric' o similar, donde el teclado no tiene el botón de "Return" o "Listo" para cerrar. Los usuarios esperan poder tocar fuera y que el teclado se vaya, igual que en cualquier aplicación nativa.

Una de las soluciones más populares y que se usó por mucho tiempo, era envolver el contenido de tu pantalla en un TouchableWithoutFeedback. La idea es sencilla: cualquier toque fuera de los elementos interactivos se encarga de llamar a Keyboard.dismiss().

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

const MyScreen = () => {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={{ flex: 1, padding: 20 }}>
        <TextInput placeholder="Escribe algo aquí" style={{ borderWidth: 1, padding: 10 }} />
        {/* Más elementos aquí */}
      </View>
    </TouchableWithoutFeedback>
  );
};

export default MyScreen;

Esta solución, aunque funciona, siempre me pareció un poco un hack. No me convencía tener que envolver toda mi vista en un componente solo para manejar el teclado. Era como usar un martillo para clavar un tornillo, funciona, pero hay herramientas más específicas.

Afortunadamente, el equipo de React Native fue mejorando esto. Hoy, la solución más directa y la que yo prefiero en la mayoría de mis proyectos es simplemente llamar a Keyboard.dismiss() cuando lo necesites. Para el escenario de "tocar fuera del TextInput", la mejor práctica ahora es usar el componente ScrollView con la propiedad keyboardShouldPersistTaps='handled' o 'always', si tu contenido lo permite. Personalmente, 'handled' es mi opción por defecto porque el teclado se oculta solo si el toque no lo maneja otro componente hijo, lo que tiene sentido.

import React from 'react';
import { ScrollView, Keyboard, TextInput } from 'react-native';

const MyScrollableScreen = () => {
  return (
    <ScrollView keyboardShouldPersistTaps='handled' contentContainerStyle={{ flexGrow: 1, padding: 20 }}>
      <TextInput placeholder="Campo 1" style={{ borderWidth: 1, padding: 10, marginBottom: 10 }} />
      <TextInput placeholder="Campo 2" style={{ borderWidth: 1, padding: 10, marginBottom: 10 }} />
      {/* Puedes tener más TextInput o componentes aquí */}
    </ScrollView>
  );
};

export default MyScrollableScreen;

Si la idea es ocultar el teclado de forma programática, por ejemplo, al enviar un formulario, simplemente llamas a Keyboard.dismiss(). Es simple, directo y no requiere envolver componentes extra.

import { Keyboard } from 'react-native';

// Para ocultar el teclado en cualquier momento
Keyboard.dismiss();

Para mí, la solución del ScrollView con keyboardShouldPersistTaps='handled' junto con la posibilidad de llamar a Keyboard.dismiss() de forma explícita, cubre casi todos los escenarios sin sobreingeniería. Es una API mucho más limpia que lo que teníamos antes. Ojo que la opción del HOC (Higher-Order Component) que aparece en algunas respuestas de Stack Overflow, sinceramente, no la uso para esto. Meter un HOC solo para esconder el teclado me parece excesivo y añade una capa de abstracción innecesaria.

En mi experiencia, la mayoría de las veces te bastará con ScrollView y keyboardShouldPersistTaps='handled' si tienes un contenido desplazable, o Keyboard.dismiss() directamente si quieres controlarlo programáticamente. La opción de TouchableWithoutFeedback sigue siendo válida si no usas un ScrollView y necesitas un área "invisible" para cerrar el teclado, pero yo la reservo para casos muy específicos. Siempre busco la solución más simple que cumpla el requisito.