CODEWITHSUNDEEP
javascriptreact-nativereact-native-gifted-chat
CCP
CCP

Reputation: 1236

react-native-gifted-chat last bubble coveredby composer

enter image description here

when i try to elevate the composer by it's padding, the last chat bubble is covered by it, so what should i do to give space between the last bubble and composer? i tried to search for the answer but didn't find any related to this kind of issues

   const renderInputToolbar = (props) => {
    return (
      <InputToolbar
        {...props}
        containerStyle={{ borderTopWidth: 0, paddingVertical: 12 }}
      />
    );
  };


const renderComposer = (props) => {
    return (
      <Composer
        {...props}
        textInputProps={{
          onFocus: () => setOnFocus(true),
          onBlur: () => setOnFocus(false),
          marginHorizontal: 12,
          blurOnSubmit: true,
          paddingVertical: 12,
          paddingHorizontal: 15,
          backgroundColor: onFocus ? "#F1E9FD" : "#fff",
          borderRadius: 60,
          borderColor: onFocus ? "#7210FF" : "#c0c0c0",
          borderWidth: 1,
          width: "80%",
        }}
      ></Composer>
    );
  };


<GiftedChat
        messages={messages}
        showUserAvatar={false}
        renderBubble={renderBubble}
        renderInputToolbar={renderInputToolbar}
        renderComposer={renderComposer}
        renderActions={renderActions}
        renderSend={renderSend}
        alwaysShowSend
        
        user={{ _id: userID, name: username, avatar: avatar }}
        onSend={(messages) => handleSend(messages)}
      />

Upvotes: 0

Views: 1302

Answers (4)

Hari Krishnani
Hari Krishnani

Reputation: 1

You can simply use below prop provided by Giftedchat

messagesContainerStyle={{paddingBottom: 20}}

Upvotes: 0

Sir&#39;Damilare
Sir&#39;Damilare

Reputation: 314

I had exactly this issue , but nothing else worked for me except

const renderChatFooter = () => {
    return(
      <View style={{height:20}}></View>
    )
}

and then

<GiftedChat
  ...
  renderChatFooter={renderChatFooter} // THIS
  ...
/>

Upvotes: 0

CCP
CCP

Reputation: 1236

SOLVED

is found the solution for this with adding box height in renderFooter

     const renderFooter = (props) => {
    return <Box {...props} height={6} />;
  };



<GiftedChat
            messages={messages}
            renderBubble={renderBubble}
            renderInputToolbar={renderInputToolbar}
            renderComposer={renderComposer}
            renderActions={renderActions}
            renderSend={renderSend}
            renderDay={renderDay}
            renderFooter={renderFooter} // THIS
            alwaysShowSend
            user={{ _id: userID, name: username, avatar: avatar }}
            onSend={(messages) => handleSend(messages)}
          />

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12235

Hey CCP can you try this ?

<GiftedChat
        messages={messages}
        showUserAvatar={false}
        renderBubble={renderBubble}
        renderInputToolbar={renderInputToolbar}
        renderComposer={renderComposer}
        renderActions={renderActions}
        renderSend={renderSend}
        alwaysShowSend
        bottomOffset={100} // this
        user={{ _id: userID, name: username, avatar: avatar }}
        onSend={(messages) => handleSend(messages)}
      />

Hope it helps

Upvotes: 0

Related Questions