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?

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

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