Question - How to use renderAvatar?

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.

[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.

[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: