Search code examples
reactjslayoutreact-nativereact-native-flexbox

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?

Solution

  • Apply flexWrap to root container style.

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