Horizontal ScrollView with 2 items in a columns and 3 items visible at a time

Question

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

Answer 1

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