I’ve been struggling to make the KeyboardAvoidingView work. I can’t seem to find out or come up with a solution.

I’ve tried several things, like wrapping all stuff inside a ScrollView, using KeyboardAwareScrollView, set up an offset and everything takes me to another problem or not to the desired solution

import { Image, StyleSheet, Text, View, TextInput, KeyboardAvoidingView, Platform, useWindowDimensions, Pressable } from 'react-native'
import React from 'react'
import { colors } from '../utils/colors'

const LoginScreen = () => {
  const { height, width } = useWindowDimensions()
  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : null} enabled style={styles.container}>
      <Image source={require('../assets/logo_white_notext.png')} style={styles.logo}></Image>
      <Text style={styles.title}>AGROMARKET</Text>
      <View style={styles.containerForm}>
        <Text style={styles.subTitle}>Iniciar Sesión</Text>
        <View style={styles.inputContainer}>
          <Text style={styles.formId}>Correo Electrónico</Text>
          <TextInput keyboardType="email-address" style={styles.formField}></TextInput>
        </View>
        <View style={styles.inputContainer}>
          <Text style={styles.formId}>Contraseña</Text>
          <TextInput secureTextEntry={true} style={styles.formField}></TextInput>
        </View>

        <Pressable onPress={() => console.log('Olvide mi contrasena')}>
          <Text style={{ color: '#E57DFF', fontSize: 12, marginBottom: 20, fontFamily: 'FiraSans_600SemiBold', textDecorationLine: 'underline' }}>
            ¿Olvidó su contraseña?
          </Text>
        </Pressable>
        <Pressable style={styles.primaryButton} onPress={() => console.log('Inciando sesion')}>
          <Text style={styles.primaryButtonText}>Iniciar Sesión</Text>
        </Pressable>
        <Text style={{ color: colors.primaryWhite, fontSize: 14, fontFamily: 'FiraSans_600SemiBold' }}>¿Aún no tienes una cuenta?</Text>
        <Pressable onPress={() => console.log('Registrando usuario')}>
          <Text style={{ color: '#E57DFF', fontSize: 14, marginBottom: 20, fontFamily: 'FiraSans_600SemiBold', textDecorationLine: 'underline' }}>
            ¡Regístrate ahora!
          </Text>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  )
}

export default LoginScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.primaryGreen,
    alignItems: 'center'
  },
  logo: {
    marginTop: 30,
    marginLeft: 30,
    width: 150,
    height: 150
  },
  title: {
    fontSize: 36,
    marginBottom: 20,
    marginLeft: 10,
    letterSpacing: 5,
    color: colors.primaryWhite,
    fontFamily: 'FiraSans_800ExtraBold'
  },
  subTitle: {
    fontSize: 28,
    color: colors.primaryWhite,
    fontFamily: 'FiraSans_800ExtraBold',
    marginTop: 30,
    marginBottom: 20
  },
  containerForm: {
    flex: 1,
    width: '100%',
    borderTopLeftRadius: 80,
    backgroundColor: colors.primaryBlack,
    alignItems: 'center'
  },
  formId: {
    textAlign: 'left',
    fontSize: 16,
    color: colors.primaryWhite,
    fontFamily: 'FiraSans_600SemiBold',
    marginVertical: 10
  },
  formField: {
    width: 200,
    height: 40,
    borderRadius: 10,
    backgroundColor: colors.secondaryWhite,
    padding: 10,
    fontFamily: 'FiraSans_500Medium'
  },
  primaryButton: {
    width: 200,
    height: 40,
    borderRadius: 30,
    backgroundColor: colors.secondaryGreen,
    alignItems: 'center',
    justifyContent: 'center'
  },
  primaryButtonText: {
    fontSize: 16,
    color: colors.primaryWhite,
    fontFamily: 'FiraSans_500Medium'
  }
})

Any suggestions would be highly appreciated. Thanks

the KeyboardAvoidingView component doesn’t work for me. I’m testing this on an Android device. When I open up the keyboard, the UI isn’t adjusted as it is supposed to be

PD: Alright guys. I managed to solve it myself lol. I just had to add a ScrollView component that wraps all other components, and the KeyboardAvoidingView wraps the whole thing. Kinda like this:

<KeyboardAvoidingView>
<ScrollView contentContainerStyle={{  height, width, alignItems: 'center', flexGrow: 1 }}>
the rest of the components...
<ScrollView contentContainerStyle={{  height, width, alignItems: 'center', flexGrow: 1 }}>
</KeyboardAvoidingView>

I’m not sure why, but when I dont include the height, width and the flex grow, the formContainer looks weird on my Android device. It doesn’t reach till the end of the screen or it’s very narrow and doesn’t cover 100% of the device’s width. So, if anyone is willing to explain to me the reason of this, is more than welcome since the issue is fixed already. Or… If you know a more efficient way of doing it, I’m also open to hear suggestions. Thanks!