Question 33055 in React native Question posted in
The official React Native documentation can be found here.

React native make image layout

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. 0

    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