White Screen on top part of iOS react native - ios

Question

I get white screen at the top part of my iOS react native app. I have SafeAreaView as a container housing my code. On some screens the white space is just at the top, some others, just bottom; while some top and bottom. Below is an image:
Below is what my code looks like:
<SafeAreaView style={styles.container}>
<ImageBackground source={backgroundImg} style={styles.image}>
{/* arrow section */}
<TouchableOpacity
style={styles.firstLevelContainer}
onPress={() => navigation.goBack()}>
<Image source={backIcons} style={styles.backIconsStyle}></Image>
</TouchableOpacity>
{/* text Section */}
<View style={styles.secondLevelContainer}>
<CustomText
color={colors.white}
size={30}
capitalize={'none'}
fontType={fonts.nunitoBold}>
{CapitalizeFirstLetter('Create\nan account')}
</CustomText>
</View>
<View style={styles.thirdLevelContainer}>
<ScrollView
style={styles.scrollviewContainer}>
{Formikform()}
</ScrollView>
</View>
<View style={styles.fourthLevelContainer}>
<CustomText
color={colors.white}
size={12}
style={{marginLeft: 10}}
capitalize={'none'}
fontType={fonts.nunitoLight}>
or sign in with
</CustomText>
<View style={styles.displayRow}>
<Image
source={facebookLogo}
style={styles.socialLoginIconSize}></Image>
<Image
source={googleLogo}
style={styles.socialLoginIconSize}></Image>
</View>
</View>
</ImageBackground>
</SafeAreaView>
StyleSheet
container: {
flex: 1,
flexDirection: 'column',
top: 0,
},
formContainer: {
display: 'flex',
marginBottom:hp(20),
marginLeft:hp(5)
},
image: {
flex: 1,
resizeMode: 'cover',
},

Answer 1

That's exactly how SafeAreaView works. If you want your image to cover all of the screen I'd suggest the following UI Hierarchy:
<ImageBackground>
<SafeAreaView>
// your content goes here
</SafeAreaView>
</ImageBackground>
Checkout this snack for more details