ScrollView does not show all content in react native - react-native

Question

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:
render() {
const screenHeight = Dimensions.get('window').height
const {currentItem,callsData}=this.state;
return (
<SafeAreaView style={CustomStyles.container}>
<View style={{flexDirection:'row-reverse',padding:10}}>
<View style={{flex:1,justifyContent:'center',flexDirection:'row'}}>
<CustomText style={[CustomStyles.titleWhite]}>Sponsers</CustomText></View>
<TouchableWithoutFeedback onPress={()=>this.props.navigation.goBack()} style={{marginLeft:20,padding:10,}}>
<Icon name='md-arrow-round-back' color={'white'} size={32} />
</TouchableWithoutFeedback>
</View>
<ScrollView contentContainerStyle={{flexGrow:1,height:screenHeight}}>
<View>
{(this.state.done===1)?
<View >
<CustomText style={[CustomStyles.titleWhite,{alignSelf: 'center',}]}> {currentItem.title} </CustomText>
<Image style={{width:'100%',height:'30%',resizeMode:'contain'}} source={{uri:Strings.imageUrl+ currentItem.image1}}/>
<CustomText style={[{color:'white',lineHeight:24}]}>{currentItem.body}</CustomText>
<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,}} />
<View style={{flexDirection:'row-reverse'}}>
<Icon />
</View>
<View style={{flexDirection:'row-reverse'}}>
<CustomText style={CustomStyles.whiteTxt}>website: </CustomText>
<CustomText style={{color:Colors.yellow,marginRight: 3}}>{currentItem.website}</CustomText>
</View>
<View style={{flexDirection:'row-reverse'}}>
<CustomText style={CustomStyles.whiteTxt}>Address: </CustomText>
<CustomText style={{color:Colors.yellow,marginRight: 3,}}>{currentItem.address}</CustomText>
</View>
<View style={{flexDirection:'row-reverse'}}>
<CustomText style={[CustomStyles.whiteTxt,]}>Calls: </CustomText>
<FlatList
data={callsData}
contentContainerStyle={{alignItems:'flex-end',marginRight:4}}
keyExtractor={(index)=>index}
renderItem={({item,index})=>
<TouchableOpacity onPress={()=>this.renderCall(index)}>
<CustomText style={{color:Colors.yellow}}>{item}</CustomText></TouchableOpacity>}
/>
<View style={{flex:1}}/>
</View>
</View>
:
<ActivityIndicator/>}</View>
</ScrollView>
</SafeAreaView>
);
}
EDIT: Here is CustomStyles.js, Colors file is just containing color codes:
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
},
})
I also tried to use View instead of SafeAreaView but the problem did not solved. the bottom component does not show.
help me please

Answer 1

I think the problem is in Image component height property. I change it from "percent" to number like this From:
height:'30%'
to
height:.3*screenHeight
And now the ScrollView work fine