How do i set local directory image in leftAvatar of ListItem using react-native-elements?

Question

I am trying to add my local directory image into the leftAvatar but cant achieve it, also there is no such document hint for doing so.Any help would be really appreciated. This is my render method-

render() {
    return (
      <View>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{
                source: { uri: "../assets/images/classboard.png" },
                showEditButton: false
              }}
              title={`${item.className} ${item.section}`}
              subtitle={item.countStudents.toString()}
              containerStyle={{ borderBottomWidth: 1 }}
            />
          )}
          keyExtractor={item => item.classId.toString()}
          // ItemSeparatorComponent={this.renderSeparator}
          // ListHeaderComponent={this.renderHeader}
          // ListFooterComponent={this.renderFooter}
          // onRefresh={this.handleRefresh}
          // refreshing={this.state.refreshing}
          // onEndReached={this.handleLoadMore}
          // onEndReachedThreshold={50}
        />
      </View>
    );
  }
}

score 8 · Accepted Answer · answered Feb 26 '19 at 07:56

8

If you want to use your local resource you can do this:

source: require("../assets/images/classboard.png"),

Tell me if this is what you're looking for.

answered Feb 26 '19 at 07:56

arjayosma

540
3
15

thanks for the answer, but the avatar is still not being rendered – Kartik Saraf Feb 26 '19 at 08:00
it worked, it was a silly mistake, i didn't restart the server. sorry....n thanks for helping – Kartik Saraf Feb 26 '19 at 08:02
for a while there, i was about to question my RN knowledge – arjayosma Feb 26 '19 at 08:03
how can i add backgroundColor to the avatar ? – Kartik Saraf Feb 26 '19 at 08:04
as I am not familiar with rn-elements, consider reading the documentation of the avatar here: https://react-native-training.github.io/react-native-elements/docs/avatar.html#avatar-props it's the same avatar being used in the list and in other locations, check its props – arjayosma Feb 26 '19 at 08:07

score 0 · Answer 2 · edited Nov 26 '21 at 06:31

0

for local image in react native avatar use this

<Avatar.Image source={require("../images/a.jpg")} size={50} />

edited Nov 26 '21 at 06:31

Suraj Rao

29,388
11
94
103

answered Nov 26 '21 at 06:10

Muhammad Awais

109
1
3

How do i set local directory image in leftAvatar of ListItem using react-native-elements?

2 Answers2