CODEWITHSUNDEEP
reactjsflexboxnative
Mark
Mark

Reputation: 103

How to wrap items horizontally in React Native flexbox?

I'm trying to get my items to wrap so there are multiple items per line. But it's just refusing to do it.

If there is enough room the next item should be on the same line.

e.g am i grey?, delete me - should be on the same line because there is more than enough space etc.

Hi, that will make the items go off the screen to the right, and then scrolling will occur. It should fit as many items on the line as it can till it reaches the right-hand side of the screen, and then drop to the next line etc..

Please help.

Thank you

Upvotes: 2

Views: 2558

Answers (2)

MPN7
MPN7

Reputation: 1313

I am so sorry for the miss information. I was wrong, what you want is achievable by doing the styles in this prop contentContainerStyle. FlatList uses ScrollView props which has that prop that styles the FlatList content
See this for more information about the prop.

By adding flexDirection: 'row' to contentContainerStyle it makes the content horizontal and adding flexWrap: 'wrap' completes the desired design by changing lines when it doesn't have space

See this example

Upvotes: 3

MPN7
MPN7

Reputation: 1313

You should put flexDirection:row in the TouchableOpacity, you don't want the FlatListto be in a row you want whats in inside to be

EDIT

On FlatList you have a prop called horizontal set that to true. It will probably have the desired design

<FlatList horizontal={true} />

Upvotes: 2

Related Questions