ListItem Avatar Not Displaying

Question

As part of a FlatList, I render each ListItem (from the react-native-elements library) where I try to display an avatar (icon) from a url to a photo:

  <ListItem
     avatar={{ source: { uri: item.icon } }} 
   />

All the other props display fine but on the left side of each cell I just get a grey box. I've logged the value of item.icon and it points to a valid photo. Do I need to download the photo and then provide a local link to it?

How can I get the photo to show up as the cell's avatar?

Seep

are you using any library or ListItem is your custom component, if it is a custom component please post its code for better understanding – Labe

It is from react-native-elements – Seep

Try avatar={{ uri: item.icon }} – Collision

That did the trick! Do you know what the diff is between avatar and leftAvatar? – Seep

leftAvatar is in beta version and avatar is in stable version as per the docs. – Collision

Answer 1

You're using the wrong object for the image avatar.

Stable Version

Either

avatar={{ uri: item.icon }}

OR

avatar={<Avatar
           rounded
           source={{uri: item.icon}}
           title={'Sample Title'}
       />}

Beta Version

leftAvatar={{ source: { uri: item.icon } }}

Collision

Answer 2

According to react-native-elements they have leftAvatar and no just avatar

<ListItem
        key={i}
        leftAvatar={{ source: { uri: l.avatar_url } }}
        title={l.name}
        subtitle={l.subtitle}
      />

Labe

just to test if it is getting your props try adding this rounded: true in your leftAvatar object – Labe

When I use leftAvatar= I get nothing but when I use avatar= I get a grey box without rounded corners. – Seep

For me leftAvatar works with local image, and get grey box with external url – Willywilly

Works for me in expo web view, but on my mobile device, I get a grey round avatar with no image. Tried calling the image both locally and from the web. – Premarital

Answer 3

This is what I did to customize my leftAvatar with icons (react-native-elements / flatlist)

 leftAvatar={{
        icon: { name: item.icon, type: "ionicon", color: "black" },
        size: "large",
        overlayContainerStyle: { backgroundColor: "white" }
      }}

Muscat