React Native: vertical centering when using ScrollView

I solved this issue with flexGrow instead of flex

<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>

This makes the content container stretch to fill the ScrollView but does not restrict the maximum height, so you can still scroll correctly when the content extends the bounds of the ScrollView

There's a new solution (unfortunately iOS only at the moment) - we can use centerContent prop on Scrollview.

Here is my approach:

Use an outer container with flex : 1, then the scroll view needs to have {flexGrow : 1, justifyContent : 'center'} using contentContainerStyle, not style.

<View style={styles.mainContainer}>
  <ScrollView
    contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
      <View style={styles.scrollViewContainer}>
        //Put your stuff here, and it will be centered vertical
      </View>
  </ScrollView>
</View> 

Styles:

const styles = StyleSheet.create({scrollView : {
height : Dimensions.get('window').height, }, mainContainer : {
flex : 1 }, scrollViewContainer : { }, })