React-native-gifted-chat: Question - How to use renderAvatar?

[ghost]

Question

I find the documentation fairly difficult to go on, as renderAvatar seems like it would require arguments in order to pass the source of the avatar into the component.

Currently we are trying to make the Avatar buttons on our application intractable. By going through the Source i see that onPress is supported in GiftedAvatar but I see no way to call it. This leads me to believe that we must use renderAvatar and pass a <GiftedAvatar component in there manually, while supplying the onPress prop. My question is, how would I go about getting the avatar link for the current user to pass it in to the <GiftedAvatar> Component.

As per the "documentation" on the ReadME, all that is shown is that there is a renderAvatar function.

How do we go about getting the avatar for the displayed message to pass to the component.

[kfiroo]

@ChristianTucker See in the example App.js#L155 how to override the default rendering of components in GiftedChat.

[ashneyderman]

@kfiroo you can not override avatar the way you can bubble due to how avatar's rendering is coded in Message.js:

`renderAvatar() {
if (this.props.user._id !== this.props.currentMessage.user._id) {
const {containerStyle, ...other} = this.props;
const avatarProps = {
...other,
isSameUser: this.isSameUser,
isSameDay: this.isSameDay,
};

  return <Avatar {...avatarProps}/>;
}
return null;

}`

there is no way to override it with a property. Whereas bubble can be overwritten.

[kfiroo]

@ashneyderman see here

[ashneyderman]

@kfiroo - there is no way to display avatar that is self (i.e. on the 'right'). I guess I should have been clearer in my comment on what exactly is not overridable.

[lishuanghe0902]

how can I Set on the right side of the avatar？it's too difficult

[sastred]

The problem I see/suffer is that despite you pass renderAvatar prop it is not always used.

[MrGurns]

For anyone still confused as how to use this:

//each message structure
var newItem = {
  text: item.text,
  user: {
    _id: item.user_id,
    name: user.name,
    avatar: true,
  },
  avatarProps: {
    name: user.name,
    icon: user.icon,
  },
  createdAt: item.created_date,
   _id: item._id,
};

//in render
<GiftedChat
  messages={this.convertToGiftedMessage}
  onSend={messages => this.addMessage(messages)}
  user={{
  _id: localDataStore.activeUser,
  }}
  keyboardShouldPersistTaps={'never'}
  renderAvatar={(props) => {
    const { avatarProps } = props.currentMessage;
    if (avatarProps.name) {
      return(
        <UserAvatar size="40" name={avatarProps.name} src={avatarProps.icon} />
      );
    }
    return(null);
  }}
/>

Passing true to the avatar was key for me, cause if it is null, then it won't render the avatar, nor call the renderAvatar prop.

[jamesdmurphy51]

Where does UserAvatar component come from in that last example?

[hunter547]

@jamesdmurphy51 I'm sure you already found a workaround/solution for this but it's the UserAvatar component from this library. Gives a little more control over the avatar and the creator of react-native-gifted-chat was inspired by this library, giving credit (in the form of a comment) in node_modules/react-native-gifted-chat/lib/GiftedAvatar.js: