React Native ScrollView snapping back to top after release
I figured out how to get it to scroll. Instead of having the View
wrapping the ScrollView
and the ScrollView
having any flex styling or alignItems:'flex-start'
with contentContainerStyle={styles.container}
, put that on the View
which is a child of the ScrollView
and just use style=
instead of contentContainerStyle=
.
render:
<ScrollView style={styles.container}>
<Text style={styles.goalName}>{goal}</Text>
<View style={styles.viewContainer}>
{iconsToShow}
</View>
</ScrollView>
Styling:
var styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
paddingLeft:20,
paddingRight:20
},
viewContainer:{
flexDirection:'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
flex: 1
},
iconText:{
paddingLeft:15,
paddingRight:15,
paddingTop:15,
paddingBottom:15
},
goalName:{
textAlign:'center',
marginTop:40,
marginBottom:10,
fontSize:20
}
});
If someone still couldn't fix the problem, try put {flex: 1} into "all" parents of the ScrollView