CODEWITHSUNDEEP
cssreact-nativegridviewflexbox
Tempuslight
Tempuslight

Reputation: 1203

React Native: How to create "grid" layout using flexbox?

I would want a 3xN layout on my mobile React Native app, so something like this:

[    ] [    ] [    ]    
title1 title2 title3    
                        
[    ] [    ] [    ]
title4 title5 title6

[    ] [    ] [    ]
title7 title8 title9

...    ...    ...

This entire layout, vertical wise, will be in a ScrollView so that even if it loads more items than 1 screen can present, it can show properly in it's entirety.

Upvotes: 1

Views: 1406

Answers (1)

Kai
Kai

Reputation: 2599

Just set flexWrap: 'wrap' on the container and, if you want a constant number of items per row, give your items a flexBasis: '33%' rather than a static value to ensure that the width scales properly for the device

Upvotes: 4

Related Questions