React gifted chat message alignment

Question

I cannot get messages from two users to align on the left and right side, while pulling them from state. They all go on the left side. If i try to post a new message, that message goes on the right side as expected, but not while pulling them from state.

Example code

    import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [messages, setMessages] = useState([
    {
    _id: 1,
    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
    createdAt: new Date(),
    user: {
      _id: 2,
      name: 'React Native',
    },
  },
  {
    _id: 2,
    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
    createdAt: new Date(),
    user: {
      _id: 3,
      name: 'React',
    },
  }
  ]);

  const onSend = (newMessage = []) => {
    setMessages(GiftedChat.append(messages, newMessage));
  };
  
  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => onSend(newMessage)}
      user={{
        _id: 1,
      }}
    />
  );
}

This example contains 2 messages, both with different user ids, but the messages are displayed on the left side. I also saved the messages in backend, and while writing new messages is not a problem, pulling them from backend and displaying them is.

I also modified renderMessage property of giftedChat, but to no avail. I am using a server that accepts group chats only, could that be the problem? Any ideas? Thanks

score 1 · Accepted Answer · edited May 31 '21 at 17:22

1

I am very glad to answer this question for the right alignment one message in right and one message on the left you have to use this

use RenderBubble

<GiftedChat renderBubble={this.renderBubble}. 
            isLoadingEarlier={true}/>

in renderBubble function, check this condition ( sender id or current message user id )

currentMessage.user._id == this.state.senderData.id) {
      <Bubble
           {...props}
           wrapperStyle={{
             right: {
               height: 200,
               backgroundColor: 'blue',
             },
           }}
         />
    } else {

<Bubble
         {...props}
         wrapperStyle={{
           left: {
             backgroundColor: '#f0f0f0',
           },
         }}
       />
}

that all in this code we differentiate the message in the left side or right side

edited May 31 '21 at 17:22

azro

53,056
7
34
70

answered Jan 06 '21 at 09:49

Pushpendra Chouhan

44
4

hi thanks for the answer, i tried your solution but it did not work. I also tried using without any condition it still did not work, (see this link https://amanhimself.dev/blog/chat-app-with-react-native-part-4/). Is there something i am doing wrong? – sid0972 Jan 06 '21 at 11:18
1

After playing around with i found property Position, which enabled me to align the messages. Thanks – sid0972 Jan 06 '21 at 18:53
dear u have to check the id of both messages if the id is equal then the right bubble will render on the right side .. this will show that the right messages are yours if id will no equal then it will be on the left side try this if u still facing the problem then you can share your code at the snack expo here is url = https://snack.expo.io/ – Pushpendra Chouhan Jan 07 '21 at 04:44

React gifted chat message alignment

1 Answers1