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?

are you using any library or ListItem is your custom component, if it is a custom component please post its code for better understanding — Ammar Tariq, Nov 27 '18 at 07:32
That did the trick! Do you know what the diff is between `avatar` and `leftAvatar`? — The Kraken, Nov 27 '18 at 07:52
`leftAvatar` is in beta version and `avatar` is in stable version as per the docs. — Pritish Vaidya, Nov 27 '18 at 07:57

Pritish Vaidya · Accepted Answer · 2018-11-27T08:00:15.243

4

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 } }}

edited Nov 27 '18 at 08:00

answered Nov 27 '18 at 07:54

Pritish Vaidya

21,561
3
58
76

score 3 · Answer 2 · answered Nov 27 '18 at 07:36

3

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}
      />

answered Nov 27 '18 at 07:36

Ammar Tariq

799
2
13
29

just to test if it is getting your props try adding this rounded: true in your leftAvatar object – Ammar Tariq Nov 27 '18 at 07:41
When I use `leftAvatar=` I get nothing but when I use `avatar=` I get a grey box without rounded corners. – The Kraken Nov 27 '18 at 07:48
For me leftAvatar works with local image, and get grey box with external url – Eric Dec 10 '19 at 08:52
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. – Paddymac Apr 06 '20 at 15:46

score 0 · Answer 3 · answered Mar 16 '20 at 18:13

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" }
      }}

ListItem Avatar Not Displaying

3 Answers3

Stable Version

Beta Version

Linked