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,

Carryingon

Didn't you try React native ScrollView (facebook.github.io/react-native/docs/scrollview.html) with horizontal={true} prop? it works for me. – Arela

Thanks Dinith ;-) You just resolve my problem – Carryingon

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

Carryingon

A good answer, but in fact ListView uses ScrollView under the hood. – Transilluminate

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()}
/>

Continuous

Thanks for this. I think this answer is more accurate based on Today's date. Things to note: - Convert the index to string else you'll receive a warning. - The item separator, which separates the elements of the list (very handy). – Fissionable

Answer 3

FlatList answers are above, but it is not the only way to make horizontal list in RN.

If you want to make display elements in React Native displayed in horizontal list the simplest way possible, you only need the Flex Direction as Row:

  myElement: {
    display: 'flex',
    flexDirection: 'row',
  },

Penoyer