React-Native flexDirection: 'row' with multiple lines

Question

I would like to know if there is a way to have flexDirection: 'row' with multiple lines. Because now if I have 10 objects in row non will go on a second line. This is the example from documentation where I've added another two <View> elements

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native';  export default class FlexDirectionBasics extends Component {   render() {     return (       // Try setting `flexDirection` to `column`.       <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: 'skyblue'}} />         <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />       </View>     );   } };  // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics); 

Answer 1

You can use flex-wrap: wrap so the content will break to a new line when it reaches the max width allowed for this component.

      <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>         <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: 'skyblue'}} />         <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />       </View> 

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Hope it helps