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
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>
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>