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;`
Top comments (0)