title: ScrollView does not show all content in react native
body: <p>I have a page with some Components. I am using scrollview to scroll through the page but some content does not show. Here is my code:</p>
  
  <pre><code>render() {
  const screenHeight = Dimensions.get('window').height
  const {currentItem,callsData}=this.state;
  return (
    &lt;SafeAreaView style={CustomStyles.container}&gt;
      &lt;View style={{flexDirection:'row-reverse',padding:10}}&gt;
        &lt;View style={{flex:1,justifyContent:'center',flexDirection:'row'}}&gt;
          &lt;CustomText style={[CustomStyles.titleWhite]}&gt;Sponsers&lt;/CustomText&gt;&lt;/View&gt;
        &lt;TouchableWithoutFeedback onPress={()=&gt;this.props.navigation.goBack()} style={{marginLeft:20,padding:10,}}&gt;
          &lt;Icon name='md-arrow-round-back' color={'white'} size={32} /&gt;
        &lt;/TouchableWithoutFeedback&gt;
      &lt;/View&gt;
    &lt;ScrollView contentContainerStyle={{flexGrow:1,height:screenHeight}}&gt;
      &lt;View&gt;
      {(this.state.done===1)?
      &lt;View &gt;
      &lt;CustomText style={[CustomStyles.titleWhite,{alignSelf: 'center',}]}&gt; {currentItem.title} &lt;/CustomText&gt;
      &lt;Image style={{width:'100%',height:'30%',resizeMode:'contain'}} source={{uri:Strings.imageUrl+ currentItem.image1}}/&gt;
      &lt;CustomText style={[{color:'white',lineHeight:24}]}&gt;{currentItem.body}&lt;/CustomText&gt;
      &lt;Video source={{uri:currentItem.videoLink}}   // Can be a URL or a local file.
      controls={true}                              // Store reference
      onBuffer={this.onBuffer}                // Callback when remote video is buffering
      onError={this.videoError}               // Callback when video cannot be loaded
      paused={true}
      style={{width:'100%',height:screenHeight/4,}} /&gt;
      &lt;View style={{flexDirection:'row-reverse'}}&gt;
        &lt;Icon /&gt;
      &lt;/View&gt;
      &lt;View style={{flexDirection:'row-reverse'}}&gt;
        &lt;CustomText style={CustomStyles.whiteTxt}&gt;website: &lt;/CustomText&gt;
        &lt;CustomText style={{color:Colors.yellow,marginRight: 3}}&gt;{currentItem.website}&lt;/CustomText&gt;
      &lt;/View&gt;
      &lt;View style={{flexDirection:'row-reverse'}}&gt;
      &lt;CustomText style={CustomStyles.whiteTxt}&gt;Address: &lt;/CustomText&gt;
        &lt;CustomText style={{color:Colors.yellow,marginRight: 3,}}&gt;{currentItem.address}&lt;/CustomText&gt;
      &lt;/View&gt;
      &lt;View style={{flexDirection:'row-reverse'}}&gt;
      &lt;CustomText style={[CustomStyles.whiteTxt,]}&gt;Calls: &lt;/CustomText&gt;
      &lt;FlatList
      data={callsData}
      contentContainerStyle={{alignItems:'flex-end',marginRight:4}}
      keyExtractor={(index)=&gt;index}
      renderItem={({item,index})=&gt;
        &lt;TouchableOpacity onPress={()=&gt;this.renderCall(index)}&gt;
        &lt;CustomText style={{color:Colors.yellow}}&gt;{item}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;}
      /&gt;
      &lt;View style={{flex:1}}/&gt;
      &lt;/View&gt;
      &lt;/View&gt;
  
      :
      &lt;ActivityIndicator/&gt;}&lt;/View&gt;
    &lt;/ScrollView&gt;
    &lt;/SafeAreaView&gt;
  );
   }
  </code></pre>
  
  <p>EDIT: Here is CustomStyles.js, Colors file is just containing color codes:</p>
  
  <pre><code>import { StyleSheet } from 'react-native';
  import Colors from '../Values/Colors'
  export default StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: 'black',
      },
      titleWhite:{
        color:'white',
        fontSize:18,margin:5
      },
    })
  </code></pre>
  
  <p>I also tried to use View instead of SafeAreaView but the problem did not solved. the bottom component does not show.
   help me please</p>