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?
2
Answers
Setting the height of that container was killing my resize. So I had to change this line:
To this:
Once I did that it properly resized so it wasn't behind the keyboard.
did you set keyboardmode inside AndroidManifest?