1

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?

haxpanel
  • 4,402
  • 4
  • 43
  • 71

1 Answers1

3

Apply flexWrap to root container style.

<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
Hariks
  • 1,852
  • 1
  • 19
  • 34