Double row scroll

Hi guys does anyone has a clue how to do a double horizontal row with a scroll in React Native.

I've already made a double row scroll with 2 lines but there's 2 scroll (one on first line and second on second line).

I would like to create, for example, 3 blocs on the first line and 3 blocs on the second line (and the others blocs).

If the user scroll on top, second line scroll too and vice versa

Before scroll :
Line 1 : 1,2,3
Line 2 : 4,5,6 (and 7 to 20)

After scroll :

Line 1 : 2,3,4
Line 2 : 5,6,7 (and 8 to 20 + bloc 1)

(snack link : https://snack.expo.dev/vEcWc4HSOU8kHPmK_WJoP)

`import React from 'react';
import { View, Text, StyleSheet, ScrollView, FlatList, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const itemWidth = width / 3; // Largeur de chaque élément (3 colonnes)

const listData = Array.from({ length: 20 }, (_, index) => ({
id: index.toString(),
title: Item ${index + 1},
}));

const GridItem = ({ item }) => (

{item.title}

);

const HorizontalScrollingGrid = () => {
return (
horizontal
showsHorizontalScrollIndicator={false}
directionalLockEnabled={true}
alwaysBounceVertical={false}
>
contentContainerStyle={{ alignSelf: 'flex-start' }}
numColumns={Math.ceil(listData.length / 2)}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={listData}
renderItem={({ item }) => }
keyExtractor={(item) => item.id}
/>

);
};

const styles = StyleSheet.create({
item: {
width: itemWidth,
height: itemWidth,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
margin: 5,
borderRadius: 8,
},
itemText: {
fontSize: 16,
fontWeight: 'bold',
},
});

export default HorizontalScrollingGrid;`