CODEWITHSUNDEEP
javascriptreactjsreact-native
Kanwarjeet Singh
Kanwarjeet Singh

Reputation: 745

React Native, Flatlist customize with 2 item per row

How can I make my flatlist look like this? Is there any prop for this or which style I need to use to do that?

enter image description here

Upvotes: 5

Views: 13471

Answers (3)

Emmanuel Oreoluwa
Emmanuel Oreoluwa

Reputation: 81

<FlatList
      numColumns={2}
     ....................
    />

Render your data and make numColumns={2}

Upvotes: 4

Ketan Ramteke
Ketan Ramteke

Reputation: 10655

You can provide extra property numColumns={2} in your Flatlist component to get two items each row.

here is a wonderful tutorial by Spencer: https://www.reactnativeschool.com/react-native-flatlist-grid

Upvotes: 11

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You have to use the numColumns prop of the flat list which would display the items in columns

https://reactnative.dev/docs/flatlist#numcolumns

Upvotes: 3

Related Questions