Two horizontal rows with synchronized scroll

I'm working on a React Native project where I have a single horizontal line of items that should be divided into two rows. The first row contains the first 6 blocks, while the second row contains the remaining blocks. Both rows need to scroll together, as if there's just one scroll behavior controlling both rows, rather than each row scrolling independently.

To summarize:

• The first row should contain the first 6 items.
• The second row contains the remaining items, including those that aren't visible initially due to the scroll.
• The user scrolls once, and both rows respond to the scroll.
• There is a visual separation between the rows, similar to a line break (br in HTML), but they are still dependent on the same scroll.

How can I implement this in React Native using a single ScrollView for the scrolling behavior?

I've tried with 2 ScrollView but this still not the best way to have a good synchronized scroll.The ScrollViews :

<ScrollView        horizontal        showsHorizontalScrollIndicator={false}        style={styles.blocLogoNonAffiliates}        ref={scrollRefTop}        onScroll={handleScrollTop}        scrollEventThrottle={5} // Lisse le défilement        onScrollBeginDrag={() => setIsScrollingTop(true)}        onScrollEndDrag={() => setIsScrollingTop(false)}><View style={styles.containerBlocImages}>          {listData.map((item, index) => (<View key={index} style={styles.blocImageNonAffiliates}><Text>{item}</Text></View>          ))}</View></ScrollView>      {/* Deuxième ScrollView, commence à partir de la position 7 */}<ScrollView        horizontal        showsHorizontalScrollIndicator={false}        style={styles.blocLogoNonAffiliates}        ref={scrollRefBottom}        onScroll={handleScrollBottom}        scrollEventThrottle={5} // Lisse le défilement        onScrollBeginDrag={() => setIsScrollingBottom(true)}        onScrollEndDrag={() => setIsScrollingBottom(false)}><View style={styles.containerBlocImages}>          {listData.slice(6).map((item, index) => (<View key={index} style={styles.blocImageNonAffiliates}><Text>{item}</Text></View>          ))}</View></ScrollView>

My functions :

  // Fonction pour synchroniser les scrolls  const handleScrollTop = (event) => {    if (!isScrollingBottom) {      setIsScrollingTop(true);      const offsetX = event.nativeEvent.contentOffset.x;      scrollRefBottom.current?.scrollTo({ x: offsetX, animated: false });      setIsScrollingTop(false);    }  };  const handleScrollBottom = (event) => {    if (!isScrollingTop) {      setIsScrollingBottom(true);      const offsetX = event.nativeEvent.contentOffset.x;      scrollRefTop.current?.scrollTo({ x: offsetX, animated: false });      setIsScrollingBottom(false);    }  };