Evitar que el teclado oculte la interfaz de usuario en React Native usando KeyboardAvoidingView

Tiempo de lectura: 3 minutos

1. ¿Qué es KeyboardAvoidingView?

KeyboardAvoidingView es un componente en React Native que ayuda a manejar el comportamiento del teclado en dispositivos móviles, especialmente en pantallas pequeñas. Cuando un campo de texto o un input es seleccionado y el teclado aparece, KeyboardAvoidingView ajusta la posición de los componentes en la interfaz para que no queden cubiertos por el teclado.

---

2. ¿Cuándo usar KeyboardAvoidingView?

Deberías usar KeyboardAvoidingView cuando tengas campos de texto o formularios en tu app y quieras asegurarte de que el teclado no oculte ningún contenido importante, como botones de envío o listas.

3. Instalación y preparación

No necesitas instalar nada extra para usar KeyboardAvoidingView, ya que es parte de React Native desde el principio. Solo necesitas importar y configurar el componente correctamente.

---

4. Uso básico de KeyboardAvoidingView

Paso 1: Importar el componente

Primero, debes importar KeyboardAvoidingView desde React Native:

import { KeyboardAvoidingView, Platform, View, Text, TextInput, StyleSheet, Button } from 'react-native';

Paso 2: Estructura básica

Aquí tienes un ejemplo básico de cómo usar KeyboardAvoidingView:

import React, { useState } from 'react';
import { KeyboardAvoidingView, Platform, TextInput, Button, StyleSheet, Text, View } from 'react-native';

const App: React.FC = () => {
  const [text, setText] = useState('');

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // Ajuste según la plataforma
    >
      <View style={styles.innerContainer}>
        <Text style={styles.header}>Bienvenido</Text>
        <TextInput
          style={styles.input}
          placeholder="Escribe algo aquí"
          value={text}
          onChangeText={setText}
        />
        <Button title="Enviar" onPress={() => alert(`Texto enviado: ${text}`)} />
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // Centra el contenido
    alignItems: 'center',     // Centra el contenido
  },
  innerContainer: {
    width: '80%',
    alignItems: 'center',     // Centra el contenido dentro del contenedor
  },
  header: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    width: '100%',
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
    borderRadius: 5,
  },
});

export default App;

Explicación:

• KeyboardAvoidingView: El componente principal que ajusta la vista cuando el teclado aparece.
• behavior: El valor de esta propiedad puede ser:
  • 'height' (para Android): El área debajo del teclado se ajusta, pero el contenido no se mueve mucho.
  • 'padding' (para iOS): Añade espacio encima del teclado para que los elementos no sean tapados.
  • 'position': Utiliza un ajuste más agresivo moviendo elementos de la vista.
  • 'none': No realiza ningún ajuste (no recomendado si se usa con campos de texto).

---

5. Uso avanzado: Manejo de contenido adicional

En este caso, agregamos más contenido y vemos cómo KeyboardAvoidingView ayuda a ajustar todo el diseño.

import React, { useState } from 'react';
import { KeyboardAvoidingView, Platform, TextInput, Button, StyleSheet, View, FlatList } from 'react-native';

const App: React.FC = () => {
  const [text, setText] = useState('');
  const [items, setItems] = useState<string[]>(['Item 1', 'Item 2', 'Item 3']);

  const addItem = () => {
    setItems((prevItems) => [...prevItems, `Item ${prevItems.length + 1}`]);
    setText(''); // Limpiar el input después de añadir el item
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <View style={styles.innerContainer}>
        <TextInput
          style={styles.input}
          placeholder="Añadir un ítem"
          value={text}
          onChangeText={setText}
        />
        <Button title="Añadir" onPress={addItem} />
        <FlatList
          data={items}
          renderItem={({ item }) => <View style={styles.item}><Text>{item}</Text></View>}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  innerContainer: {
    padding: 20,
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
    borderRadius: 5,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default App;

Explicación:

• Hemos añadido una lista con FlatList, y el componente KeyboardAvoidingView sigue funcionando sin problemas para ajustarse cuando el teclado aparece, de modo que la lista no se ve afectada.

---

6. Consejos adicionales:

1. Uso de Keyboard.dismiss(): Puedes llamar a Keyboard.dismiss() para ocultar el teclado manualmente si lo necesitas en algún punto de tu aplicación (por ejemplo, al presionar un botón o un ítem en la lista).
2. Plataformas: Aunque el comportamiento por defecto funciona bien en ambos sistemas, siempre es buena idea verificar cómo se comporta en Android e iOS, ya que pueden existir diferencias visuales sutiles.
3. Combinación con TouchableWithoutFeedback: Si deseas cerrar el teclado cuando el usuario toca fuera del campo de texto, combina KeyboardAvoidingView con TouchableWithoutFeedback:

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

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
  <KeyboardAvoidingView style={styles.container} behavior="padding">
    {/* Tu contenido aquí */}
  </KeyboardAvoidingView>
</TouchableWithoutFeedback>

---

7. Resumen

KeyboardAvoidingView es una herramienta muy útil en React Native que ajusta la interfaz de usuario para asegurarse de que el contenido no sea cubierto por el teclado. Es ideal para formularios, campos de texto o cualquier componente que pueda ser afectado por el teclado en una pantalla pequeña.