How to display chat messages on left and right in react-native-gifted-chat

Question

I have to load previous chat messages first and i am getting response of messages like this

  {
    "id": "8102f902-d54b-457a-823e-13d3sssssds",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Hello, I would like to learn how to contour my cheeks.",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T22:51:11.220Z",
    "senderType": "BUYER",
    "updatedAt": "2021-01-02T22:51:11.220Z"
  },
  {
    "id": "08a8e684-2279-4cc1-9d2d-d5e4ebd9210a",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Sure how can I help contour?",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T22:56:49.019Z",
    "senderType": "SELLER",
    "updatedAt": "2021-01-02T22:56:49.019Z"
  },
  {
    "id": "67d75630-245a-46d4-9d33-8812d1e48b68",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Yo tell me how I can help",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T23:04:39.893Z",
    "senderType": "SELLER",
    "updatedAt": "2021-01-02T23:04:39.893Z"
  },

but all the messages are displaying on the left side of screen but i want buyer messages on the right side I have including giftedChat component like this

<GiftedChat
    messages={messages}
    onSend={messages => onSend(messages)}
/>

because response doesn't have users avatar i also want to display avatar from custom url but that is also not working i am first time using gifted chat can anybody help me how to do it ? or any suggestions

Thanks in advance

score 0 · Accepted Answer · answered Jun 08 '21 at 07:55

I found solution for it I changed the format of messages into required format of gifted chat it will not work fine until we modify our response into the gifted chat required format Here it is what i did

let filteredChatMessages = yourMessages.map((chatMessage) => {
    let modifiedMessages = {
        _id: chatMessage.user_id,
        text: chatMessage.text,// or chatMessage.message
        createdAt: chatMessage.createdAt,
        user: {
            _id: chatMessage.id
            avatar: chatMesssage.user_img_url
        }
    };
    return modifiedMessages;
});

console.log(filteredChatMessage);

Then render bubble

// Render bubble
const renderBubble = props => {

    const message_sender_id = props.currentMessage.user._id;

    return (
        <Bubble
            {...props}
            position={message_sender_id == currentLoggeduser ? 'right' : 'left'}
            textStyle={{
                right: {
                    color: COLORS.white,
                    fontSize: SIZES.s3
                },
                left: {
                    fontSize: SIZES.s3,
                },

            }}
            wrapperStyle={{
                right: {
                    backgroundColor: COLORS.appViolet,
                    marginRight: 5,
                    marginVertical: 5
                },
                left: {
                    marginVertical: 5
                },
            }}
        />
    );
};

and finally render your gifted chat component

<GiftedChat
    messages={messages}
    onSend={messages => onSend(messages)}
    renderBubble={renderBubble}
    showUserAvatar={true}
    scrollToBottom={true}
    scrollToBottomComponent={renderScrollToBottom}
    text={textMessage}
    onInputTextChanged={text => setTextMessage(text)}
    inverted={false}
/>

How to display chat messages on left and right in react-native-gifted-chat

1 Answers1