How to make only one user on the left side and others on the right side in chat app with react-native-gifted-chat

Question

I'm developing a mobile chat app, and this is like a group chat.

The comments of the room owner should be on the left side in the chat screen, and the comments of others should be on the right side in it.

Example: The comments of user id 1 should be left side in the chat, the comments of user id 2~100 should be right side in the chat.

I think I should use renderMessage to custom the chat message UI. But I don't understand how to use it effectively.

I have already tried to develop renderMessage and render like below.

import React, { Component } from 'react';
import { Image, ImageBackground, Text, Linking, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
import { Body, Container, Header, Icon, Left, Right, Thumbnail } from "native-base";
import { Button, List } from 'react-native-paper';
import { GiftedChat, Composer } from 'react-native-gifted-chat';

export default class ChatScreen extends Component {
  messages = [
{
      _id: 4,
      text: <Text onPress={() => ( alert('Hello'))} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      user: {
        _id: 1,
        name: 'Chat owner'
      }
    },
    {
      _id: 3,
      text: <Text onPress={() => ( alert('Hello'))} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
      // Any additional custom parameters are passed through
    },
    {
      _id: 2,
      text: <Text onPress={() => { alert('hello')}} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
      // Any additional custom parameters are passed through
    },
    {
      _id: 1,
      text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
      createdAt: new Date(),
      user: {
        _id: 2,
        name: 'Chat user',
      },
    },
  ];

  renderComposer = props => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Icon type='SimpleLineIcons' name='paper-clip' style={{ fontSize: 20, justifyContent: 'center', paddingTop: 10, paddingLeft: 8 }}/>
        <Composer {...props} />
        <Button>Submit</Button>
      </View>
    );
  };

  renderMessage = props => {
    return (
      <View style={{ paddingLeft: 10 }} >
        <Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
      </View>
    );
  };

  onSend = (messages = []) => {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
  };

  render() {
    return (
      <Container>
        <GiftedChat
          renderComposer={this.renderComposer}
          renderMessage={this.renderMessage}
          onSend={(messages) => this.onSend(messages)}
          messages={this.messages}
          placeholder=''
          loadEarlier={true}
          showAvatarForEveryMessage={true}
          renderUsernameOnMessage={true}
        />
      </Container>
    )
  }
}

Now, all messages are on the left side in the chat like below.

https://gyazo.com/bfe08a8f648f3d4648a8d6d26556b116

Of course, all messages on the left side in the chat because the Thumbnail is placed on the left side. I would like to know how to fetch the user id from the message in the 'renderMessage'. If I know it, I will develop the code like below.

renderMessage = props => {
    paddingLeft = (userId === 1 ? '10' : '200') // I will add this code
    return (
      <View style={{ paddingLeft: paddingLeft }} >
        <Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
      </View>
    );
  };

Answer 1

try adding the user who is writting to the giftedChat:

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

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

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

    {
    _id: 5,
     text: 'Hello World?',
     createdAt: new Date(),
     user: {
        _id: '200',
        name: 'fasial'
      },
     },