Question 287445 in React native Question posted in
The official React Native documentation can be found here.

React native – Keyboard overlays chat on Android only with react-native-gifted-chat

I’m using react-native-gifted-chat, which says that it handles keyboard overlapping issues by default but it’s not working for my on Android. On iOS it works completely fine. Here is my code:

    return (
        <View style={styles.outerContainer}>
            <View style={styles.container}>
                <GiftedChat
                    messages={messages}
                    onSend={(messages) => onSend(messages)}
                    onQuickReply={handleQuickReply}
                    user={{
                        _id: 1,
                    }}
                    renderBubble={(props) => (
                        <Bubble
                            {...props}
                            textStyle={{
                                right: { color: theme.colors.onTertiary },
                                left: { color: theme.colors.onSurface },
                            }}
                            wrapperStyle={{
                                right: {
                                    backgroundColor: theme.colors.primary,
                                },
                                left: { backgroundColor: theme.colors.surface },
                            }}
                        />
                    )}
                    isTyping={isTyping}
                    renderActions={(actionsProps) =>
                        keyboardOpen && (
                            <View
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    marginBottom: 15,
                                }}
                            >
                                <Entypo
                                    name="chevron-left"
                                    size={20}
                                    color="grey"
                                    onPress={Keyboard.dismiss}
                                />
                            </View>
                        )
                    }
                />
            </View>
        </View>
    );
};

const getStyles = (theme: MD3Theme) => {
    return StyleSheet.create({
        outerContainer: {
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: theme.colors.background,
        },
        container: {
            height: Dimensions.get("window").height * 0.85,
            // marginTop: "10%",
            width: "95%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-start",
            gap: 20,
        },
    });
};

What am I doing wrong here? I also tried using a KeyboardAvoidingView for a little bit but after it didn’t work initially and I found the part in the gifted-chat docs that says isKeyboardInternallyHandled (Bool) - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is true I figured I can trust the plugin to handle this. Am I misunderstanding how this is supposed to work or am I implementing it wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Setting the height of that container was killing my resize. So I had to change this line:

    height: Dimensions.get("window").height * 0.85,

    To this:

    flex: 1,

    Once I did that it properly resized so it wasn't behind the keyboard.


  2. 0

    did you set keyboardmode inside AndroidManifest?

    android:windowSoftInputMode="adjustPan"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search