Estoy tratando de colocar una entrada en la parte inferior de la pantalla y cuando hago clic, quiero que esté sobre el teclado. Estoy usando Expo. He probado dos escenarios:

1. Sin "softwareKeyboardLayoutMode": configuración "pan" en el archivo app.json. En este enfoque, funciona bien, espero que también cambie la barra de pestañas inferior sobre el teclado, por lo que no funciona para mí. Para eso he probado el

 screenOptions={{ tabBarHideOnKeyboard: 'true' }}

configuración en la barra de pestañas, pero no funciona sin problemas y tampoco funcionará si trato de agregar un componente personalizado para la barra de pestañas inferior.

2. Con "softwareKeyboardLayoutMode": "pan". Con este enfoque, la barra de pestañas inferior está oculta y eventualmente funciona, pero se comporta de manera extraña. Cuando me enfoco en la entrada de texto, abre el teclado, cambia la entrada demasiado arriba y luego la devuelve a la derecha arriba del teclado (donde debería estar). Probé algunos cambios en mi código pero no pude terminar con ninguna solución. Por favor, prueba el código y verás.

Aquí está mi código:

NuevoComp.js:

 const NewComp = () => { return ( <KeyboardAvoidingView behavior={"height"} style={{ flex: 1 }} > <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <View style={{ padding: 24, flex: 1, justifyContent: "flex-end" }}> <TextInput placeholder="Username" style={{ height: 40, borderColor: "#000000", borderBottomWidth: 1, }}/> </View> </TouchableWithoutFeedback> </KeyboardAvoidingView> ); };

BottomNavigator.js:

 const BottomNavigator = ({ navigation, route }) => { return ( <Tab.Navigator> <Tab.Screen key={1} name={'TAB_1'} component={NewComp} options={{header: () => null}}/> <Tab.Screen key={2} name={'TAB_2'} component={NewComp} options={{header: () => null}} /> <Tab.Screen key={3} name={'TAB_3'} component={NewComp} options={{header: () => null}} /> </Tab.Navigator> ); }