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
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
// ...