CODEWITHSUNDEEP
react-native
Hamza Ahmed
Hamza Ahmed

Reputation: 31

React native FlatList not showing images

I want to show list of images on my app horizontally. I know if I give prop to my flat list horizontal ={true} it will be horizontal but the problem is that FlatList not showing images at all. This is what I have tried so far



const data = [
    {
      imageUrl: "https://c7.uihere.com/files/45/824/935/united-states-win-the-white-house-hotel-business-company-refresh-icon-thumb.jpg",
      id:"1"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"2"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"3"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"4"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"5"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"6"
    }
  ];

export default class CircularImage extends Component {
    constructor(props) {
        super (props)
        this.state = {
            data:data
        }
    }


  render() {
  return (
    <FlatList 
    data = {this.state.data}
    renderItem = {({item}) => {
      <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }}
    keyExtractor ={item => {item.id.toString()}}
    />
  )
  }
}

Upvotes: 1

Views: 6122

Answers (2)

katie
katie

Reputation: 51

In React Native, image has to have width and height in order to show. You might missed out of that part.

Upvotes: 3

Mohit Mutha
Mohit Mutha

Reputation: 3001

You are missing a return statement in your renderItem function

<FlatList 
    data = {this.state.data}
    renderItem = {({item}) => {
      return <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }}
    keyExtractor ={item => {item.id.toString()}}
    />

OR

<FlatList 
    data = {this.state.data}
    renderItem = {({item}) => <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }
    keyExtractor ={item => {item.id.toString()}}
    />

Upvotes: 3

Related Questions