horizontal-scrollingreact-nativereact-native-listviewreact-native-ios

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


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

like the image below:

enter image description here

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,


Solution

  • 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