CODEWITHSUNDEEP
reactjslayoutreact-nativereact-native-flexbox
haxpanel
haxpanel

Reputation: 4678

In react-native - how to float elements in new line when they can't fit into one?

From the example here I'm wondering if it's possible to float items into new line when they can't fit into one?

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>

The blue coloured item should be in new line. Is it possible with flexbox?

Upvotes: 1

Views: 1108

Answers (1)

Hariks
Hariks

Reputation: 1889

Apply flexWrap to root container style.

<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>

Upvotes: 3

Related Questions