Draw A View With Image Pattern

I want to render the view with images pattern as a picture below. At first, I push a needed amount of items in an array and then I called the method that returned me a view(row).

Solution 1:

I think the easy and best way is just use a single View with flexWrap, store your all images in an array call the map function inside your View with flexWrap.

render(){
   return(
          <Viewstyle={styles.gridView}>
                    {imagesArray.map((image, index) => this.renderImage(image, index))}
          </View>);
}
renderImage=(image, index)=>{
    return (
            <Image.../>[![Hope it will help , you can show your images like this way.][1]][1]
        );
}

const styles = {
    gridView: {
        paddingVertical: 10,
        marginHorizontal: 20,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
    },
}

Solution 2:

There are a couple of unknowns right now:

• what is inside this.images ?
• what does this.drawRow do ?

So in this answer, there are a couple assumptions:

• this.images is an array of Image components with N elements like:

  [
   (<Imagestyle={styles.image}source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
   />),
   (...)
  ]
  

---

If we abstract the logic a little bit we would have something like the following:

// `this.images` seems to be a little sturdy for now so instead we will// have an `imagesPerRow` method that takes in the number of// images that we want on each `row`imagesPerRow(number) {
      const img = [];
      for(let i = 0; i < number; i++) {
       img.push(
          <Imagestyle={styles.image}source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
          />
        );
      }
      return img;
    }
    // the `getRow` method wrap the array of images inside a `View` element// Here number will be the number of images inside it
    getRow = (number) => {
      return (
      <Viewstyle={styles.row}>
        { this.imagesPerRow(number) }
      </View>
      );
    }

    // drawTable takes two parameters rowNum (amount of rows)and// columnNum (amount of columns), these will render the actual tabledrawTable(rowNum, columnNum) {
      const rows = []
      for(let i = 0; i < rowNum; i++) {
       rows.push(this.getRow(columnNum));
      }
      return rows;
    }

    // In the render method we just call the `drawTable` with the desired paramsrender() {
      return (
        <Viewstyle={styles.container}>
          { this.drawTable(10, 4) }
        </View>
      );
    }

It is important to keep styling in mind, otherwise it will look all cramped

conststyles=StyleSheet.create({container: {
        flex:1,
        alignItems:'stretch',
        justifyContent:'center',
        paddingTop:Constants.statusBarHeight,
        backgroundColor:'#222222',
      },image: {
        width:50,
        height:50

      },row: {
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
      }
    });

here you can find a working example that I created.

Hope this helps.