Question posted in
The official Twillio API documentation can be found here.

Messages displayed on one side only (left hand side of the screen) – react-native-gifted-chat – Twillio

If 2 user is using the app, messages are being displayed on the left side of the screen. cannot differentiate between them (sender who sent what messages),It occurs only when use our own REST Api Call to onload,

enter image description hereBut when send one new message at that time message will display separately sender and receiver format and one more scenario when i use twillio default getMessages method at that time also error won’t occur.

Twilio method to get Previous Messages on both user:

this.channel.getMessages(0).then((messages) => {
    console.log("getMessages" + messages);
    this.handleBatch(messages);
});

enter image description herePlease find screenshot above for your reference.Any one know how to fix this issue or any suggestions are welcome.

Tags:

3

Answers


  1. 0

    react-native-gifted-chat differentiates messages using user props, which specify
    User sending the messages,
    so you have to give user props as

        <GiftedChat
                            messages={this.state.messages}
                            onSend={this.handleNewMessage.bind(this)}
                            user={{
                                _id: your user id
                                name: users name,
                                avatar: users image 
                            }} 
/>

    name and avatar is useful for displaying name or image in gifted chat if you want

    and onSend event send this user with text to twillio as

    handleNewMessage = (message = {}) => {

            this.channel.sendMessage( message[0].text, message[0].user)
            .catch(error => console.error(error));
    }

    Now on your getMessages

    this.channel.getMessages(0).then((messages) => {
    console.log("getMessages" + messages);
    this.handleBatch(messages);
});

    before appanding gifted chat change message format as gifted chat want
    only for example i m using state to set message 

    handleBatch= (message) => {
        const messageData = this.formatMessage(message);
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messageData),
        }));
    }



 formatMessage(message) {

            return {
                _id: message.sid, // or your own unique id
                text: message.body,
                user: message.attributes, // here you can get your user parameters in message attributes which we send to identify user
                createdAt: message.timestamp,
            };
        }

// change above conditions as you get response by twillio.

    i hope it will help you.
    if any query let me know.

    Login or Signup to reply.
  2. 0

    try adding the user who is writting to the giftedChat:

     <GiftedChat
    isAnimated
    messages={this.props.messages}
    onSend={messages => this.onSend(messages)}
    user={{
        _id: 'sarathy',
        name: 'Minecraft',
    }}
/>

    Every message that has the user’s _id: 'sarathy' will be displayed on the right.

    example of message that will be displayed on the right side:

    {
  _id: 3,
  text: 'How r u?',
  createdAt: new Date(),
  user: {
    _id: 'sarathy',
    name: 'React Native'
  },
},
    Login or Signup to reply.
  3. 0

    anyone having this issue Like me not looking to docs code properly… Do one thing … add _id in-place id… both message object in user props inside

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search