Remove Intendation of Messages in react-native-gifted-chat

Question

I use the following configuration of react-native-gifted-chat:

<GiftedChat
                messages={messages}
                timeFormat="HH:mm"
                dateFormat="ll"
                onSend={message => onSend(message)}
                placeholder="Message"
                user={{
                    _id: 1,
                }}
                showAvatarForEveryMessage={false}
                showUserAvatar={false}
                renderAvatar={() => null}
                renderComposer={props => customComposer(props)}
                renderSend={props => customSendButton(props)}
                renderInputToolbar={props => customInputToolbar(props)}
                renderTicks={message => customTicks(message)}
            />

and a message is constructed like this

 message = {
            _id: message.id,
            text: message.content,
            createdAt: new Date(message.timestamp),
            user: {
                _id: user.id == message.author_id ? 1 : 2,
                name: message.username,
                avatar: message.avatar_url
            },
            sent: true,
            received: true,
            pending: true,
            isTyping: false,
        }

Which gives me this result:

Now I don't want consecutive messages to have an indent. I know the indent is there because of the avatar that you might want to render but in my configuration, I don't. So I'm confused as to why there's still the indentation.

How can I get rid of it? I can't figure out, which style property I have to change and on which component of Gifted chat.

Answer 1

You can set a custom renderMessage. Note the renderAvatar={null}

  const renderMessage = React.useCallback((props) => {
    return (
      <Message
        {...props}
        renderAvatar={null}
        containerStyle={{
          left: { backgroundColor: "lime" },
          right: { backgroundColor: "gold" },
        }}
      />
    );
  }, []);