React-Native render a horizontal List that have 2 rows-CodePudding

I want to implement a List that have 2 rows and I can scroll horizontally and show more (two rows)

Just like this image:

I have an array with these Items, but I can't figure out how to do that in flatlist since we render one item only at once. Also, is there any component if flatlist or scrollList can't be applied ?

CodePudding user response：

If you have only a single list and need to show 2 rows

<ScrollView
          horizontal
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingVertical: 20 }}>
          <FlatList
            scrollEnabled={false}
            contentContainerStyle={{
              alignSelf: 'flex-start',
            }}
            numColumns={Math.ceil(list.length / 2)}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={list}
            renderItem={({ item, index }) => {
            //your image code 
        }}
          />
</ScrollView>

Snack URL