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,

Didn't you try React native ScrollView (https://facebook.github.io/react-native/docs/scrollview.html) with horizontal={true} prop? it works for me. — Dinith Minura, Feb 15 '17 at 10:47

G Clovs · Accepted Answer · 2022-02-24T08:16:57.220

61

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

edited Feb 24 '22 at 08:16

answered Feb 15 '17 at 11:11

G Clovs

2,442
3
19
24

1

A good answer, but in fact `ListView` uses `ScrollView` under the hood. – ismnoiet Sep 02 '17 at 07:34

score 11 · Answer 2 · edited Nov 07 '18 at 07:56

11

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

edited Nov 07 '18 at 07:56

duan

8,515
3
48
70

answered Aug 22 '18 at 07:16

Shlomi Fresko

909
11
15

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). – Karl Djotchuang Tamo Sep 09 '22 at 20:42

score 0 · Answer 3 · answered Jan 25 '23 at 00:55

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',
  },

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

3 Answers3