0

enter image description hereeverything is fine but when I try to type the last message will be hidden and it is happening on the Android device as shown in the image

this is my code

     export function Chat() {
  const [text, setText] = useState('');
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages(initialMessages.reverse());
  }, []);

  const onSend = (newMessages = []) => {
    setMessages((prevMessages) => GiftedChat.append(prevMessages, newMessages));
  };

  return (
    <GiftedChat
      messages={messages}
      text={text}
      onInputTextChanged={setText}
      onSend={onSend}
      user={{
        _id: 1,
        name: 'Aaron',
        avatar: 'https://placeimg.com/150/150/any',
      }}
      alignTop
      alwaysShowSend
      scrollToBottom
      // showUserAvatar
      renderAvatarOnTop
      renderUsernameOnMessage
      bottomOffset={26}
      onPressAvatar={console.log}
      renderInputToolbar={renderInputToolbar}
      renderActions={renderActions}
      renderComposer={renderComposer}
      renderSend={renderSend}
      renderAvatar={renderAvatar}
      renderBubble={renderBubble}
      renderMessage={renderMessage}
      renderMessageText={renderMessageText}
      renderCustomView={renderCustomView}
      isCustomViewBottom
      forceGetKeyboardHeight={false}
      messagesContainerStyle={{ backgroundColor: 'transparent' }}
      parsePatterns={(linkStyle) => [
        {
          pattern: /#(\w+)/,
          style: linkStyle,
          onPress: (tag) => console.log(`Pressed on hashtag: ${tag}`),
        },
      ]}
    />
  );
};

this is how i setup but the hidding is the only problem enter image description here

everything is fine but when I try to type the last message will be hidden and it is happening on the Android device as shown in the image

EMATade
  • 105
  • 2
  • 13

2 Answers2

1

Please refer to https://github.com/FaridSafi/react-native-gifted-chat#notes-for-android

Specifically: Append KeyboardAvoidingView after GiftedChat. This should only be done for Android, as KeyboardAvoidingView may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:

<View style={{ flex: 1 }}>
   <GiftedChat />
   {
      Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
   }
</View>
Arunim Choudhary
  • 33
  • 1
  • 3
0

use this:

<GiftedChat
    {...props}
    renderChatFooter={()=><View style={{height:<some value>}} />}
    />
Hemza Talha
  • 79
  • 1
  • 3
  • Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. - [From Review](https://stackoverflow.com/review/low-quality-posts/32238228) – Saeed Zhiany Jul 20 '22 at 05:10