React native make image layout

Question

If I want to make a layout of this genre how would you do it!?

I tried with Flatlist

numColumns={3}

columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between' }}

But the last two are always one on the right and one on the left... The list can end in 1 item, 2 items or 3 items depending on the case..

import React from 'react'
import {FlatList, View} from 'react-native'

const Item = () =>{

  return <View style={{flex:1, width:50, height:50, backgroundColor:'white'}}/>
}

const exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]

  return 
    <View style={{flex:1}}>
      <FlatList 
        data={array}
        renderItem={({ item, index }) => {
          return (
            <Item />
          )
        }}
        numColumns={3}
        columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between'}}
      />
    </View>
}

//result:
/*
O O O
O O O
O   O

and i want:
O O O
O O O
O O
-- or --
O O O
O O O
O 
-- or --
O O O
O O O
O O O
*/

rafiulah · Accepted Answer · 2023-02-12T14:06:43.463

try this Code

import React from 'react'
import {FlatList, View,Image} from 'react-native'

const Item = () =>{

  return <View style={{width:"27%", height:50, backgroundColor:'white',margin:"3%"}}/>
}

export default exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]

  return (
    <View style={{flex:1,backgroundColor:"black"}}>
      <FlatList 
        data={array} numColumns={3} 
renderItem={({ item }) => (
<Item/> )}
            />
    </View>
    )
}

score 1 · Answer 2 · answered Feb 12 '23 at 18:08

This help me, but i need some modifications...

import React from 'react'
import {FlatList, View,Image} from 'react-native'

const Item = (props) =>{
  const {itemCount} = props

  return <View style={{flex:1, width:"30%", height:50, backgroundColor:'white', marginRight: itemCount<=2 ? "5%" : 0}}>
  
  </View>
}

export default exemple = () =>{
  const array = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8}]
  let itemCount=0
  
  return (
    <View style={{flex:1,backgroundColor:"black"}}>
      <FlatList 
        data={array} numColumns={3} 
        renderItem={({ item }) => {
          if(itemCount===3) itemCount=0
          itemCount++
          
          return <Item itemCount={itemCount}/> 
        }}
        columnWrapperStyle={{ flex: 1 / 3, flexWrap: 'wrap' }}
            />
    </View>
    )
}

/*
this return this:
O O O
O O O
O O O

O O O
O O O
O O

O O O
O O O
O
*/

Thanks for help me! If there are other solutions, I ask you to put them here to help more people like you helped me!

React native make image layout

2 Answers2