I've been working on setting a full background image for my login view specifically on iPhone 11 devices.
const Background = styled.ImageBackground`
padding:20px;
justify-content:center;
width:100%;
height:100%;
`
const styles = StyleSheet.create({
imageContainer: {
flex: 1,
alignItems: 'stretch'
},
image: {
flex: 1
}
});
return <SafeAreaView style={styles.imageContainer}><Background style={styles.image} source={require('../../assets/images/background-cover.jpg')}>
<CoverLogo width={100} height={100} color={Colors.White} />
<Introduction loop={false}>
<TextHeading text={`TestHeader`} />
</Background>
</SafeAreaView>
The current output looks like this:
https://i.sstatic.net/atWFN.png
I'm aiming to get the background to fill up all the white space, but it seems like this issue is only happening on iPhone 11s.