OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

KeyboardAvoidingView not working properly || React Native

  • Thread starter Thread starter St1nkyDev
  • Start date Start date
S

St1nkyDev

Guest
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

Code:
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:

Code:
<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!
<p>I've been struggling to make the KeyboardAvoidingView work. I can't seem to find out or come up with a solution.</p>
<p>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</p>
<pre><code>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'
}
})

</code></pre>
<p>Any suggestions would be highly appreciated. Thanks</p>
<p>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</p>
<p>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:</p>
<pre><code><KeyboardAvoidingView>
<ScrollView contentContainerStyle={{ height, width, alignItems: 'center', flexGrow: 1 }}>
the rest of the components...
<ScrollView contentContainerStyle={{ height, width, alignItems: 'center', flexGrow: 1 }}>
</KeyboardAvoidingView>
</code></pre>
<p>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!</p>
Continue reading...
 

Latest posts

M
Replies
0
Views
1
MOHAMED AMIIN ABDI AADAN
M
Top