React Native: vertical centering when using ScrollView

Question

I\'m using React Native and I\'m having trouble retaining vertical centering of elements as soon as I introduce a ScrollView. To demonstrate, I created 3 apps with React Native

Answer 1

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.

  
      
        //Put your stuff here, and it will be centered vertical
      
  
 

Styles:

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