I have just started working on a React Native project and I got stuck. I need to display a listof images from an API. The API only gives image urls that I can use like this:

<Image
      style={{width: 50, height: 50}}
      source={{uri: ';v=4'}}
/>

The image count is dynamic but I want to display only 3 images per row. How can I achieve this?

I have just started working on a React Native project and I got stuck. I need to display a listof images from an API. The API only gives image urls that I can use like this:

<Image
      style={{width: 50, height: 50}}
      source={{uri: 'https://avatars0.githubusercontent./u/13102253?s=460&v=4'}}
/>

The image count is dynamic but I want to display only 3 images per row. How can I achieve this?

• javascript
• image
• reactjs
• react-native

• So API gives you HTML? Can you problem be simplified down to removing the excess HTML code (too many pictures) from API's response? This is way too little information.. Also where is your code where you have tried to solve problem? – CodeSmith Commented Dec 4, 2017 at 16:42

2 Answers 2

You can use ListView in which you can style it by wrapping it into row like this and page size will take care of arranging into row

<ListView
   contentContainerStyle={styles.list}
   dataSource={this.props.yourData} //datasource either props/state only
   pageSize={3}
   renderRow={(data, rowID, sectionID) => (
<Image
  style={{width: 50, height: 50}}
  source={{uri: data.path}}/>)} //path here is url that you receive

const styles = StyleSheet.create({
list: {
flexDirection: "row",
flexWrap: "wrap"
}})

The React-Native FlatList is exactly what you need. It accepts a numColumns prop which in your case should be 3.

<FlatList
  numColumns={3}
  data={yourImagesArray}
  renderItem={<YourImageComponent >}
/>

Each iteration of the data array (which I called here yourImagesArray) is passed to the renderItem (which I called here YourImageComponent) as a data prop. So the render function of YourImageComponent should be something like this:

render() {
  const { data } = this.props;

  return (
    <Image source={{ uri: data.uri }} style={{ width: 50, height: 50 }} />
  );
}