title: How to make only one user on the left side and others on the right side in chat app with react-native-gifted-chat
body: <p>I'm developing a mobile chat app, and this is like a group chat.</p>
  
  <p>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.</p>
  
  <p><em>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.</em> </p>
  
  <p>I think I should use <code>renderMessage</code> to custom the chat message UI. But I don't understand how to use it effectively.</p>
  
  <p>I have already tried to develop <code>renderMessage</code> and <code>render</code> like below.</p>
  
  <pre><code>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: &lt;Text onPress={() =&gt; ( alert('Hello'))} style={{ color: 'red' }}&gt;Sample&lt;/Text&gt;,
        createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
        user: {
          _id: 1,
          name: 'Chat owner'
        }
      },
      {
        _id: 3,
        text: &lt;Text onPress={() =&gt; ( alert('Hello'))} style={{ color: 'red' }}&gt;Sample&lt;/Text&gt;,
        createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
        system: true,
        // Any additional custom parameters are passed through
      },
      {
        _id: 2,
        text: &lt;Text onPress={() =&gt; { alert('hello')}} style={{ color: 'red' }}&gt;Sample&lt;/Text&gt;,
        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 =&gt; {
      return (
        &lt;View style={{flexDirection: 'row'}}&gt;
          &lt;Icon type='SimpleLineIcons' name='paper-clip' style={{ fontSize: 20, justifyContent: 'center', paddingTop: 10, paddingLeft: 8 }}/&gt;
          &lt;Composer {...props} /&gt;
          &lt;Button&gt;Submit&lt;/Button&gt;
        &lt;/View&gt;
      );
    };
  
    renderMessage = props =&gt; {
      return (
        &lt;View style={{ paddingLeft: 10 }} &gt;
          &lt;Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/&gt;
        &lt;/View&gt;
      );
    };
  
    onSend = (messages = []) =&gt; {
      this.setState(previousState =&gt; ({
        messages: GiftedChat.append(previousState.messages, messages),
      }))
    };
  
    render() {
      return (
        &lt;Container&gt;
          &lt;GiftedChat
            renderComposer={this.renderComposer}
            renderMessage={this.renderMessage}
            onSend={(messages) =&gt; this.onSend(messages)}
            messages={this.messages}
            placeholder=''
            loadEarlier={true}
            showAvatarForEveryMessage={true}
            renderUsernameOnMessage={true}
          /&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  </code></pre>
  
  <p>Now, all messages are on the left side in the chat like below.</p>
  
  <p><a href="https://gyazo.com/bfe08a8f648f3d4648a8d6d26556b116" rel="nofollow noreferrer">https://gyazo.com/bfe08a8f648f3d4648a8d6d26556b116</a></p>
  
  <p>Of course, all messages on the left side in the chat because the <code>Thumbnail</code> 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.</p>
  
  <pre><code>renderMessage = props =&gt; {
      paddingLeft = (userId === 1 ? '10' : '200') // I will add this code
      return (
        &lt;View style={{ paddingLeft: paddingLeft }} &gt;
          &lt;Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>