Full screen background image on loginscreen in React Native app

I'm currently trying to set a full background image on my login view.

I've used the following code to do so but noticed that Iphone 11 have like a white bar at the bottom and top of the phone. Is this something that can't be overlapped since it's like the navigation?

const Background = styled.ImageBackground`

padding:20px;
justify-content:center;

width:100%;
height:100%;
`

const styles = StyleSheet.create({
        container: {
          flex: 1,
        },
      });

enter image description here

   return <SafeAreaView style={styles.container}><Background source={require('../../assets/images/background-cover.jpg')}>
        <CoverLogo width={100} height={100} color={Colors.White} />

        <Introduction loop={false}>
            <TextHeading text={`#test`} />
            <TextPage text={`Btest2`} />
            <TextPage text={`Ttest3`} />
            <TextPage text={`test4 Sign up !`} />
    </Background>
  </SafeAreaView>

Solution 1:

I'm not sure if this will help with the bottom of the screen, but for the top you can try and set your header style in navigationOptions like so if using react navigation

 headerStyle: {
  backgroundColor: 'transparent',
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  borderBottomWidth: 0 // removes the border on the bottom
}

If you follow the SafeArea advice also given in the other answer, then this may be of help too https://reactnavigation.org/docs/handling-safe-area/