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

Image for post
Image for post
Image for post
Image for post
React Native: KeyboardAvoidingView + FlatList
// ...return (  <KeyboardAvoidingView    behavior={behavior}    keyboardVerticalOffset={offset}  >    <FlatList ... />

</KeyboardAvoidingView>
);
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’ : ‘’  };}

KeyboardAwareScrollView

...

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

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

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store