Grid View With different Hight and width in react Native - react-native

Question

enter image description here
Can anyone give idea how I can create this design in React-Native
here is the design image

Answer 1

Your array -
[item1, item2, item3, ....]
Modify it as -
[
{id, type:1, data:[item1, item2, item3] },
{id, type:2, data:[item4, item5, item6] },
{id, type:3, data:[item7, item8, item9] },
{id, type:1, data:[item10, item11, item12] }
{id, type:2, data:[item13, item14, item15] }
...
...
]
Like, Each item will have a type field and array of 3 items..
Use this data inside flatlist or scrollview and you can classify it according to the type(1,2,3) field.
If type == 1
return below component.
If type == 2
return
If type == 3
return
So the final result will look like what you are expecting..!
It's just an idea! Try to implement.
For better performance you can build data in this format before sending from the backend.(if the data is coming as part of any APIs)
data format function
const modifyData = (arr) => {
let finalData = [];
for (let i=0; i < arr.length; i+=3){
let j = 0;
let data = []
while(j<3){
arr[i+j] && data.push(arr[i+j]);
j+=1;
}
finalData.push({id: Math.random().toString(), type: (i/3)%3 + 1, data})
}
return finalData;
}
use some random id generator for id (crypto or Math.random().toString())

Answer 2

I found a similar thread hope this helps
Grid layout with different height items (React Native)
The markup will look like this:
<View style={styles.wrapper}>
<ScrollView contentContainerStyle={styles.container}>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn1}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn2}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn3}
/>
</ScrollView>
</View>
Wrapper View will help you stretch the block to fit the entire area. From the styling point of view you can resolve the task with flexbox:
wrapper: {
flex: 1
},
container: {
flexDirection: 'row',
paddingHorizontal: 5
},
list: {
flex: 1,
flexDirection: 'column',
paddingVertical: 10,
paddingHorizontal: 5
}
The trick is that we treat every column as a row inside the container. Play around with paddings and alignItems styling to achieve consistent spacing.
Note that the handy onEndReached that comes with the ListView won't be available here, so you'll have to catch the user reaching the end of the ScrollView in order to know when new fetch is required. But that's a different question which I believe has already been answered elsewhere.
In case the grid is finite and you don't need to throw more items into it, things are simpler. Just split the data the way described above and use 3 View-s with nested items instead of the ListView-s.
Now you can edit as per your requirements and easily find the way through this.