react native using KeyboardAvoidingView with FlatList

Question

I want to use the <KeyboardAvoidingView> to push a flatlist bundeled with an input field up when the keyboard pops up. The code looks like this:

<SafeAreaView style={styles.container}>
    <KeyboardAvoidingView behavior="height" style={{flex: 1}} >
        <View style={{flex: 12}}>
            <FlatList
            data={DATA}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={item => item.id}
            style={{marginTop: 10}}
            />
        </View>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignContent: 'center', alignItems: 'center' }}>
            <Icon style={{ color: "white", flex: 1, padding: 10 }} type="AntDesign" name="arrowleft"/>
            <TextInput
                placeholder="Create new item..."
                style={{flex: 10, backgroundColor: "white", borderRadius: 50, padding: 10, margin: 5}}
            />
        </View>
    </KeyboardAvoidingView>
</SafeAreaView>

The result is this:

The red square in the right picture is where the inputfield has stranded. It seems like it atleast moved a bit. The flatlist however refused to budge. My expectation here is to get a whatsapp like experience where the inputfield hovers above the keyboard and the flatlist is pushed up so you can see the text that was on the screen before opening the keyboard. I tried various things like <KeyboardAwareFlatList /> and <KeyboardSpacer />, however none deemed succesful.

Is this just me forgetting something or is this simply not the right way of using <KeyboardAvoidingView> for this case?

Try to play around with KeyboardAvoidingView prop `keyboardVerticalOffset`. From docs: "This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Defaults to 0." I had similar problems, and this saved me. — schogges, Oct 05 '19 at 20:31
Possible duplicate of [KeyboardAvoidingView not Working Properly](https://stackoverflow.com/questions/48420468/keyboardavoidingview-not-working-properly) — schogges, Oct 05 '19 at 20:37
@schogges I tried to use `keyboardVerticalOffset` and it seems to do something, however it renders the inputfield smaller and disabled. Any ideas? In any case its a lot more than i used to start with — 2hTu2, Oct 05 '19 at 20:39

react native using KeyboardAvoidingView with FlatList

0 Answers0