expo keyboard avoiding view weird results

[stevemoretz]

Please provide the following:

1. SDK Version:~36.0.0
2. Platforms(Android/iOS/web/all):Android/iOS

I’m trying to create a chat page at the top there’s a flatlist and at the bottom a textinput.I put this view in a keyboardAvoidingView and added some padding in props so this actually gets working.It’s fine untill it reaches back done where it was and the weird thing is that is upper than what it was before.

The problem is:

So here’s my code:

<ImageBackground style={styles.screen} source={require('../assets/bg.png')}>
    <KeyboardAvoidingView
        keyboardVerticalOffset={100} // adjust the value here if you need more padding
        style={{ flex: 1 }}
        <FlatList ref={refList} onScroll={scrollHandler} contentContainerStyle={styles.list} inverted={true} data={messages}
                  renderItem={(itemData) => renderChatMessage(itemData.index, itemData.item.message, itemData.item.isMe)}
                  keyExtractor={item => item.id} style={{width : Dimensions.get('screen').width}}
                  onEndReachedThreshold={0.1}
                  onEndReached={async () => {
                      await loadNextPage();
                  }}
                  ListFooterComponent={() => {
                      if (loadedAll) {
                          return <View/>
                      } else {
                          return <ActivityIndicator size='large' style={{padding: 30}}/>
                      }
                  }}/>
        <View style={styles.bottomView}>
            <Form validate={validate} ref={formRef} style={{height: 60,marginBottom : 5}}>
                <TextInputWithError name='message' style={styles.textInput}
                                    mode='outlined'
                                    placeholder={i18n.t('chatPlaceHolder')}/>
            </Form>

            <Animatable.View ref={buttonRotationRef} style={{marginLeft: 5}}>
                <FAB
                    // style={{...styles.sendButton,transform : [{ rotateX: `${buttonRotation.toString()}deg`}]}}
                    icon="send"
                    disabled={!canSend}
                    onPress={onSentButtonAnimationPlay}/>
            </Animatable.View>
        </View>
    </KeyboardAvoidingView>
</ImageBackground>

And here’s the styling:

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    card: {
        width: '90%',
        elevation: 7,
        marginVertical: 20,
    },
    dropdownContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    dropdown: {
        borderColor: Colors.primary,
        borderWidth: 1,
        padding: 4,
        borderTopEndRadius: 3,
        borderBottomEndRadius: 5,
    },
    textinput: {
        flexGrow: 1,
        maxWidth: 150,
        width: 150,
        backgroundColor: Colors.accent,
        height: 40,
        borderRadius: 0
    },
    text: {
        borderColor: Colors.primary,
        borderWidth: 1,
        padding: 7,
        paddingVertical: 10,
        color: Colors.primary,
        maxWidth: 150,
        width: 150,
        textAlign: 'right'
    },
    image: {
        width: '100%',
        height: 300,
        marginTop: 20
    }
});