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>