Fit with ReactNative Layout

0

I want to make a layout as follows:

<ScrollView style={{flexDirection:'row'}]>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
</ScrollView>

So that every 3 View, the others come down. However, the system prints 7 columns.

How to do it?

    
asked by anonymous 15.03.2018 / 21:42

1 answer

0

I solved using flexWrap:'wrap' and percentages:

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
</View>
    
15.03.2018 / 23:03