skip to Main Content

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

enter image description here

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

2

Answers


  1. Chosen as BEST ANSWER

    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!


  2. 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>
        )
    } 
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search