KeyboardAvoidingView doesn't work properly on my app

user_11671225 0
Viewed 2240

I searched a lot about this issue and I don't know what to do now so I decided to ask here and any help would be appreciated. in my register screen I have some input that user must fill and for the last one I need to avoid keyboard overlay. so I used KeyboardAvoidingView component to solve this but as you can see in the screenshot the device keyboard still overlay my input (birth date).

here is my code for this screen :

import React, { useState } from 'react';
import { View, Text, KeyboardAvoidingView, Image, Dimensions, PixelRatio, StyleSheet } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

import { COLORS } from '../Constants/COLORS';
import PrimaryButton from '../Components/PrimaryButton';
import PrimaryInput from '../Components/PrimaryInput';
import CheckBox from '../Components/CheckBox';

const Register = (props) => {
  const [lisenceTerm, setLisenceTerm] = useState(true);
  const [privacyPolicy, setPrivacyPolicy] = useState(true);

  return (
    <View style={styles.screen}>
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
      </View>
      <View style={styles.loginContainer}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>Join us</Text>
        </View>
          <KeyboardAvoidingView style={styles.inputContainer}>
            <PrimaryInput placeholder='Name Surname' />
            <PrimaryInput placeholder='Your Email' />
            <PrimaryInput placeholder='Phone Number (05***)' />
            <PrimaryInput placeholder='Birth Date' />
          </KeyboardAvoidingView>
        <View style={styles.checkBoxContainer}>
          <CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
          <CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
        </View>
        <View style={styles.buttonsContainer}>
          <PrimaryButton
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title='Register' />
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  imageContainer: {
    width: '100%',
    height: '34%'
  },
  image: {
    width: '100%',
    height: '100%'
  },
  loginContainer: {
    backgroundColor: 'white',
    width: '100%',
    height: '71%',
    position: 'absolute',
    zIndex: 1,
    bottom: 0,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    alignItems: 'center'
  },
  buttonsContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '75%',
    paddingVertical: '3%',
    marginTop: hp(1.2),
    borderRadius: hp(3.5),
    backgroundColor: COLORS.royalBlue
  },
  buttonText: {
    fontSize: hp(3.2),
    fontFamily: 'BalooPaaji2ExtraBold',
    color: 'white'
  },
  arrow: {
    right: 20
  },
  inputContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: hp(1),
  },
  headerContainer: {
    marginTop: hp(3),
    marginBottom: hp(2),
    width: '75%',
  },
  headerText: {
    fontSize: hp(3.5),
    fontFamily: 'BalooPaaji2Bold',
    color: COLORS.royalBlue
  },
  checkBoxContainer: {
    width: '70%',
    justifyContent: 'flex-start',
    marginBottom: hp(1)
  }
})

export default Register;

and here below is the result. btw I used behavior and keyboardVerticalOffset props to control the way this component behave but still same problem.

enter image description here

react-native
2 Answers

Your KeyboardAvoidingView component must be on top of render tree

In order to scroll onto your Join us view, you must set a ScrollView in your KeyboardAvoidingView and those component must be on top of renderer.

Try this (based on my iOS / android setup) :

import { KeyboardAvoidingView, ScrollView } from 'react-native';

const Register = (props) => {
  const [lisenceTerm, setLisenceTerm] = useState(true);
  const [privacyPolicy, setPrivacyPolicy] = useState(true);

  return (
    <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={(Platform.OS === 'ios') ? 'padding' : null}
        enabled
        keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
    <ScrollView>
    <View style={styles.screen}>
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
      </View>
      <View style={styles.loginContainer}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>Join us</Text>
        </View>
          <View style={styles.inputContainer}>
            <PrimaryInput placeholder='Name Surname' />
            <PrimaryInput placeholder='Your Email' />
            <PrimaryInput placeholder='Phone Number (05***)' />
            <PrimaryInput placeholder='Birth Date' />
          </View>
        <View style={styles.checkBoxContainer}>
          <CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
          <CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
        </View>
        <View style={styles.buttonsContainer}>
          <PrimaryButton
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title='Register' />
        </View>
      </View>
    </View>
    </ScrollView>
    </KeyboardAvoidingView>
  )
}
user_68174630

you need to install react-native-keyboard-aware-scroll-view by

yarn add react-native-keyboard-aware-scroll-view

and you need to wrap KeyboardAwareScrollView instead of KeyboardAvoidingView

like

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView>
<View>
...
</View
</KeyboardAwareScrollView>
user_80798680
Related