CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlistcreate-react-native-app
Badal S
Badal S

Reputation: 567

React-Native -Elements Avatar not rendering and showing only gray background even though the image path is correct

I am trying to render the avatar in my listItem in my React_Native Application but the image is not rendering even though my image URI path is correct and it's only giving the gray background.

Here is my code

<View>
      {props.dishes.map((l, i) => (
        <ListItem key={i} bottomDivider>
          <Avatar rounded source={{ uri: l.image }} />
          <ListItem.Content>
            <ListItem.Title>{l.name}</ListItem.Title>
            <ListItem.Subtitle>{l.description}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))}
    </View>

Here is the image of what I am getting

enter image description here

I want the images to be rendered there but it's showing only a grey background. I also tried putting the URI of online images but it's giving the same result.

I also followed the solutions mentioned here but it is not working.

I also passed the online uri to check if my path uri is incorrect but it the same result

<Avatar
     source={{
              uri:"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",        
            }}
          />

Upvotes: 2

Views: 2540

Answers (2)

Geziel Carvalho
Geziel Carvalho

Reputation: 301

I tried several ways, until I found a guy who encouraged me to check emulator connectivity ... and that was the problem!!

To solve it, before running your app, launch emulator with

emulator -avd <your-emulator-name> -dns-server 8.8.8.8

Upvotes: 0

Badal S
Badal S

Reputation: 567

I solve the issue as passing the path of the image like this was not working Bypassing an image path like this was rendering only grey background.

<Avatar rounded source={{ uri: "./images/uthappizza.png"}} />

This is how I passed the image path and its rendering properly by using require()

<Avatar rounded source={require("./images/uthappizza.png")} />

Upvotes: 2

Related Questions