En este artículo os quiero enseñar la forma en que podemos emplear el componente KeyboardAvoidingView de React Native el cual nos permite evitar que el teclado tape el input donde estamos escribiendo. Además, también os daré otra alternativa en forma de un componente de terceros por si no conseguís integrarlo correctamente (es ese tipo de componentes que proporciona React Native que si funcionan a la primera es una maravilla pero que apañarlos es un dolor de cabeza).

Básicamente, lo que queremos es lo siguiente:

Como veis, la vista se trata de una FlatList donde cada elemento posee un campo de texto que permite enviar comentarios. Evidentemente, podemos pulsarlo en cualquier momento, por lo que podría ser que el teclado lo tapase si está demasiado abajo y es ahí donde entra el componente KeyboardAvoidingView .

Para habilitarlo, envolveremos toda nuestra FlatList con este componente

// ...return (  <KeyboardAvoidingView    behavior={behavior}    keyboardVerticalOffset={offset}  >    <FlatList ... />
 
  </KeyboardAvoidingView>);

Este componente tiene dos propiedades principales:

• keyboardVerticalOffset , que sirve para especificar la distancia que hay entre el borde superior de la pantalla y la vista y que como veréis a continuación nos va a permitir lograr que el componente funcione correctamente en los iPhone (y hacer el requiebro final para los iPhone con ceja).
• behavior , cuyos valores pueden ser height , position , padding aunque tras numerosas pruebas he comprobado que para iOS funciona mucho mejor padding y que para Android es mejor dejarlo en blanco.

Sabiendo esto, he desarrollado una pequeña función que devuelve los valores correctos según el tipo de dispositivo. En ella estoy tirando del helper react-native-iphone-x-helper de cara a comprobar si es un iPhone con notch, ya que como véis es necesario tenerlo en cuenta para calcular el valor de keyboardVerticalOffset .

import { Platform } from ‘react-native’;import { ifIphoneX } from ‘react-native-iphone-x-helper’;const isIOS = Platform.OS === ‘ios’;export default function() {  const statusBarHeight = isIOS ? ifIphoneX(44, 20) : 0;  const navBarHeight = isIOS ? 44 : 56;  const headerHeight = statusBarHeight + navBarHeight;  return {    offset: headerHeight,    behavior: isIOS ? ‘padding’ : ‘’  };}

Con esto obtendréis los valores correctos y en teoría vuestra vista se desplazará hacia arriba para mostrar el campo que quedaría oculto por el teclado. Fácil y sencillo… casi siempre.

KeyboardAwareScrollView

Sin embargo, en ocasiones puede ser que el funcionamiento del componente no sea todo lo fino que queramos, por lo que en vez de perder el tiempo jugueteando con los distintos valores hasta dar con los adecuados, os recomiendo que probéis el componente KeyboardAwareScrollView , el cual emplea una ScrollView o una ListView para desplazar la vista hacia el campo que tiene el foco. La verdad es que funciona muy muy bien y suele ser mi solución favorita para evitar las complejidades de la anterior solución.

Para emplearlo, lo instalaremos de la forma habitual:

npm -i --save react-native-keyboard-aware-scroll-view

Y al igual que hacíamos con el componente KeyboardAvoidingView , usaremos KeyboardAwareScrollView para envolver la vista donde se encuentran nuestros inputs:

...
   
return (  <KeyboardAwareScrollView    resetScrollToCoords={{ x: 0, y: 0 }}    contentContainerStyle={styles.container}    scrollEnabled  >...

Tiene bastantes opciones de configuración a pero como veis apenas necesitaremos establecer nosotros las opciones para tenerlo funcionando, por lo que se hace bastante sencillo integrarlo y que comience a funcionar.

Espero que este artículo os haya servido y si tenéis una solución mejor que las que os propongo la dejéis en los comentarios para seguir aprendiendo!

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter: