React-Native flexDirection: ‘row’ with multiple lines

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