Member-only story

React Native. Cómo evitar que el teclado oculte un campo de texto (KeyboardAvoidingView)

Tecnicas para evitar que el teclado cubra los campos de texto

Gerardo Fernández
3 min readFeb 12, 2019

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:

React Native: KeyboardAvoidingView + FlatList

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

// ...

--

--

Gerardo Fernández
Gerardo Fernández

Written by Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React

No responses yet