CODEWITHSUNDEEP
react-nativereact-native-flatlist
Lukas Vis
Lukas Vis

Reputation: 475

Unable to render flatlist items in a row

I am using flat list to render some data from faker js, everything works when I am using default flexDirection: "column" rendering type, however I want to render the items in row and this code does not work.

    <FlatList
      style={{
        flexDirection: "row",
        flexWrap: "wrap"
      }}
      data={fakePeople}
      renderItem={renderItem}
      keyExtractor={(item) => item.fullName}
    />

Nothing is being rendered, but as soon as I take the flexDirection: "row", everything works fine.

Here is a link for the demo

https://codesandbox.io/s/nifty-galois-5zpnp1?file=/src/App.js:718-916

Is this a bug or does React native flatlist does not support row layout?

Upvotes: 0

Views: 825

Answers (2)

enzou
enzou

Reputation: 316

You must use horizontal FlatList prop as documentation says , and if you want to make some like grid layout you can use numColumns prop https://reactnative.dev/docs/flatlist#numcolumns

I edited a few your codesandbox

Upvotes: 0

J.dev
J.dev

Reputation: 1055

Use the horizontal prop like this,

<FlatList
  horizontal
  data={fakePeople}
  renderItem={renderItem}
  keyExtractor={(item) => item.fullName}
/>

Or if you want several items per column

<FlatList
  numColumns={3}
  data={fakePeople}
  renderItem={renderItem}
  keyExtractor={(item) => item.fullName}
/>

Upvotes: 1

Related Questions