KeyboardAvoidingView is not adjusting height

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!