First message not visible when scrolling to the top after opening the keyboard.

[joaquin-boto-celta]

Issue Description

When I open the keyboard, the chat window shifts up correctly, and I'm able to see the input field without any issues. However, when I scroll all the way to the top of the chat, the first message does not appear. It seems to be cut off or not rendered at all.

Steps to Reproduce / Code Snippets

untitled.webm

Additional Information

• Nodejs version: 20.11.1
• React version: 18.2.0
• React Native version: 0.72.4
• react-native-gifted-chat version: "^2.6.2"
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: "^4.8.4"

[joaquin-boto-celta]

I solved it by downgrading to version ^2.4.0

[fukemy]

many accepted pull request without check, do not using lasted version

[wallissonpr]

I solved it like this:

function Chat() {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      event => {
        setKeyboardHeight(event.endCoordinates.height);
      },
    );

    const keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      () => {
        setKeyboardHeight(0);
      },
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, [params.id]);

  return (
    <Box flex={1}>
      <GiftedChat
        locale={"pt-br"}
        messages={chats.getByID[params.id]}
        onSend={messages => onSend(messages)}
        placeholder="Mensagem"
        scrollToBottom
        listViewProps={{
          contentContainerStyle: {
            flexGrow: 1,
            justifyContent: "flex-start",
            paddingBottom: keyboardHeight,
          },
        }}
        keyboardShouldPersistTaps="never"
        renderBubble={renderBubble}
        renderInputToolbar={renderInputToolbar}
        renderMessageText={renderMessageText}
        renderComposer={renderComposer}
        alwaysShowSend
        renderSend={renderSend}
        messagesContainerStyle={{backgroundColor: theme.colors.background}}
        user={{
          _id: user.driver_id,
          name: plate,
        }}
      />
    </Box>
  );
}

export default memo(Chat);

[tannguyen05]

same issue

[thuandohoang]

Same issue, this way fixes it.