Adjustment with Reactnative layout

Asked

Viewed 161 times

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?

react-native

1 answer

1


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>

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.