How to do an Horizontal ListView, or FlatList in react-native

Question

I'm searching a way to make an horizontal ListView or FlatList In React-native.

like the image below:

I tried to managed it with Flex but it's make me stranges results, and always with a vertical ListView

If you got any idea, let me know.

Regards,

Answer 1

The answer is to add the horizontal property set to true.

Yeah now it's described in the doc: https://reactnative.dev/docs/flatlist#horizontal

So obviously a FlatList is a Child of a ScrollView so he got the Horizontal Bool.

  <FlatList     horizontal={true}     data={DATA}     renderItem={renderItem}     keyExtractor={(item) => item.id}     extraData={selectedId}   /> 

Ciao

Answer 2

Thanks for the last answer, ListView is now deprecated.

solution with FlatList:

<FlatList     style={styles.videos_flatList}     horizontal={true}     data={data1}     renderItem={({item}) =>          <RowItem/>     }      ItemSeparatorComponent={() => {         return (             <View                 style={{                 height: "100%",                 width: 20,                 backgroundColor: "#CED0CE",                  }}             />         );     }}      keyExtractor={(item, index) => index.toString()} />