KeyboardAvoidingView is not adjusting height - reactjs

Question

Im trying to get my text view and button to center when the Keyboard is summoned.
I tried wrapping my SafeArea with KeyboardAvoidingView but that did not seem to work.
I also tried setting the KeyBoardAvoidingView behavior to position which also did not work.
Any guidance would be appreciated.
KeyboardAvoidingView does not seem to work as expected.
**Whats happening : **
**Heres my code : **
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.Os == 'ios' ? 'padding' : null}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 0.6 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
<Text
style={{
color: '#fff',
fontSize: 10,
padding: 5,
}}
>
(Tap to add)
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
}}
>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
<View
style={{
flex: 0.4,
backgroundColor: '#376772',
margin: 5,
borderRadius: 5,
}}
>
<Input
placeholder="Enter Crossing name here"
inputStyle={{ color: 'orange' }}
rightIcon={
<Icon
name="edit"
size={25}
color="orange"
/>
}
placeholderTextColor={'orange'}
errorStyle={{ color: 'red' }}
/>
<Button
buttonStyle={{
margin: 10,
top: scale(10),
padding: 15,
backgroundColor: '#5cb85c',
borderRadius: 4,
}}
icon={
<Icon name="send" size={15} color="white" />
}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title="Submit "
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>

Answer 1

Setting behavior to "position" worked for me by removing flex: 1 from styles, like
<KeyboardAvoidingView behavior="position">
{children}
</KeyboardAvoidingView>
Cheers!