KeyboardAvoidingView doesn't work properly on my app - react-native

Question

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.

Answer 1

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>
)
}

Answer 2

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>

Answer 3

import { useHeaderHeight } from "#react-navigation/elements"
import {
Keyboard,
Platform,
TouchableWithoutFeedback,
View,
KeyboardAvoidingView
} from "react-native"
const Chat = () => {
// This is the crucial variable we will place it in
// KeyboardAvoidingView -> keyboardVerticalOffset
const headerHeight = useHeaderHeight()
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView
style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
// If you want the input not to stick exactly to the keyboard
// add a const here for example headerHeight + 20
keyboardVerticalOffset={headerHeight}
>
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<InputWrapper>
<RawInput />
</InputWrapper>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
)
}
Also take a look at this article it might be helpful: https://medium.com/#nickyang0501/keyboardavoidingview-not-working-properly-c413c0a200d4