CODEWITHSUNDEEP
javascriptimagereactjsreact-native
Ikiugu
Ikiugu

Reputation: 677

Arrange 3 images in a row in React Native

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.com/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?

Upvotes: 0

Views: 7988

Answers (2)

Asaf David
Asaf David

Reputation: 3297

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 }} />
  );
}

Upvotes: 2

senthil balaji
senthil balaji

Reputation: 628

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"
}})

Upvotes: 2

Related Questions