Build a React Native App using Expo - Avatar ListItem Part 4

18/07/2020   by Luciana Sato

In this post, you can see how to add images or avatar in ListItem component in a React Native app.

If you want to watch how I implemented this post, you can check in the video below:

The first step in this tutorial is get the ID param using the navigation in MapDetailScreen.js file.

Add the images that you want to show in the avatar ListItem. You can add in the assets folder.

For this part of the tutorial, we don't have a api yet. So, you can call the images in the fake json response in screens/MapListView.js as you can see below:

  const response = [
    {
      id: '1',
      title: 'Mato Grosso',
      image: require('../../assets/MatoGrosso.png')
    }
  ]

Inside the tag ListItem, you can configurate the leftAvatar adding the tags View and Image.


  <ListItem 
    chevron
    title={ item.title } 
    leftAvatar={
      <View>
        <Image source={ item.image } />
      </View>
    }
  />

After that, you can see all the images that you imported.

The result of this post will be like the image below

React Native App - Avatar ListItem

It's a very simple way to import images in your FlatList.