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
*/

Answer 1

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