I want to achieve something like follows [![enter image description here][1]][1]
The above is just a part of the screen. My actual screen is very complex.
So my parent view is scrollview
so I can't use FlatList
to achieve the above ui
I want 2 items per column and 6 items visible at a time and now when user swipes the next 6 items should be visible in the same format.
Following is my code
<ScrollView
style={{ flex: 1 }}
horizontal={true}
nestedScrollEnabled={true}
contentContainerStyle={{
flex: 1,
flexWrap: "wrap",
}}
>
{items.map((item, index) => {
return (
<Image
source={item}
style={{
width: width / 3.4,
marginVertical: 5,
marginHorizontal: 3,
borderRadius: 10,
resizeMode: "cover",
}}
key={String(index)}
/>
);
})}
</ScrollView>
But I keep getting all items in a column or all items in a row
your approach should be suppose your array is [1,2,3,4,5,6,7,8,9,10,11,12] with 1,2,3... are elements.
Now, make the array into array of 6 array's each like [[1,2,3,4,5,6],[7,8,9,10,11,12]].
The main array will b e your scrollview which represents its 2 child arrays as horizontal... and inside scrollview with key pass to its child to get child elements... and each chile elements will be flatlist with numColumns={3}.
It will work perfectly