Full screen background image in React Native app iphone 11

Question

I'm currently trying to set a full background image on my login view. I want to be able to fill my Background image on the whole screen for the iPhone 11. I've read a bit about safeAreaView and SafeAreaViewInset but not sure how I can implement that in my current case.

I've used the following code to do so but noticed that iPhone 11 has 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?

How app currently looks

   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>