React Native: Scrollview won't scroll with row direction and flexWrap-CodePudding

in my react-native app I have a scrollview where my list items are row wrapped (flexDirection:'row',flexWrap:'wrap'), however because of this my scrollview won't scroll for some reason...

My scrollview:

 <View style={{flex:1}}>
                <ScrollView vertical={true} contentContainerStyle={{ borderWidth:1,flex:1,flexDirection:'row',flexWrap:'wrap',alignItems: 'flex-start'}}>
                {root.userStore.passionOptions.map((item,index) => {return (
                        <Text key={item} onPress={ ()=>{ Alert.alert('kaka') } } style={{ fontSize:18,padding:5,paddingLeft:10,paddingRight:10,color:'rgb(125,125,125)',borderRadius:35,borderWidth:1,borderColor:'rgba(0,0,0,0.1)',margin:5 }}>{item}</Text>
                        )
                    })}
                </ScrollView>
                </View>

EDIT:I tried removing flexWrap and flexDirection property and it won't scroll neither

CodePudding user response：

It works for me like this i made the scrollView the outter component

<ScrollView>
  <View
    lightColor="#eee"
    style={{ paddingHorizontal: 7, paddingVertical: 5 }}
  >
    {children}
  </View>
</ScrollView>

CodePudding user response：

Reason not to work:

Your flexDirection is conflicting with ScrollDirection.

Solution:

So to avoid conflict you can have another View inside ScrollView and do the flexWrap logic

<ScrollView>
  <View
    style={{ 
      borderWidth:1,
      flex:1,
      flexDirection:'row',
      flexWrap:'wrap',
      alignItems: 'flex-start' 
    }}
  >
    ...Your Views over here...
  </View>
</ScrollView>