React-native-gifted-chat: [Question] How to make left bubbles stick on the left ? (No avatar displayed)

Created on 12 Oct 2017  路  3Comments  路  Source: FaridSafi/react-native-gifted-chat

Issue Description

I don't want to display avatars, I want my left bubbles to stick on the left but I cannot find the right propStyle to pass to GiftedChat and don't even find where the left is applied.

I don't have an avatar prop in my messages and I can confirm that messageImage is not rendered here

Could you please tell me what prop I should pass and what is the right component to pass prop to ?

Thanks

Additional Information

  • React Native version: 0.48.2
  • react-native-gifted-chat version: 0.2.8
  • Platform(s) (iOS, Android, or both?): Android 8
question waiting-response

Most helpful comment

Hey @l1br3,
that is actually pretty easy to do.
You should check out the README.md. You can find all kinds of functions to help you customize your chat.

One of those functions is called : _renderAvatar_

renderAvatar (Function) - Custom message avatar; set to null to not render any avatar for the message

The messages will automatically allign with the left border of the window.

So you can just use this function and set it to null like this:
(This is the GC example)

```
render() {
return (
messages={this.state.messages}
onSend={this.onSend}
loadEarlier={this.state.loadEarlier}
onLoadEarlier={this.onLoadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
user={{
_id: 1, // sent messages should have same user._id
}}
renderActions={this.renderCustomActions}
renderBubble={this.renderBubble}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}

    renderAvatar = {null}
  />
);

}
}
```

This should work pretty good. Tell us if it worked for you!

All 3 comments

Hey @l1br3,
that is actually pretty easy to do.
You should check out the README.md. You can find all kinds of functions to help you customize your chat.

One of those functions is called : _renderAvatar_

renderAvatar (Function) - Custom message avatar; set to null to not render any avatar for the message

The messages will automatically allign with the left border of the window.

So you can just use this function and set it to null like this:
(This is the GC example)

```
render() {
return (
messages={this.state.messages}
onSend={this.onSend}
loadEarlier={this.state.loadEarlier}
onLoadEarlier={this.onLoadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
user={{
_id: 1, // sent messages should have same user._id
}}
renderActions={this.renderCustomActions}
renderBubble={this.renderBubble}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}

    renderAvatar = {null}
  />
);

}
}
```

This should work pretty good. Tell us if it worked for you!

Please feel free to reopen if the solution purposed by @vgorte does not work, but it should.

Thanks!

@vgorte @brunocascio It was easy ! Thank you for your help !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

luisar picture luisar  路  3Comments

cassioseffrin picture cassioseffrin  路  3Comments

radvc picture radvc  路  3Comments

tafelito picture tafelito  路  3Comments

maharjanaman picture maharjanaman  路  3Comments