The background image is not filling the whole screen on iOS devices, despite trying different options in styles. while on Android devices it looks fine and fills all the background space.
I got the same issue on iPhone6 device, also on the iPhone 11 emulator. There appears to be white edges on the left and the right which the background image does not cover, but this does not happen on android devices.
Here is a picture of both emulators of iOS and android side by side, iOS is on the right.
![picture of emulators]()
I tried using the styles property resizeMode , with values such as 'cover', 'stretch', 'contain' etc , but none of them seemed to make a difference.. here is the code :
import React from 'react';
import { Text, View, Platform, ImageBackground } from 'react-native';
import { Button } from 'native-base'
var myBackground = require('./assets/icons/landing.jpg')
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={myBackground}
style={styles.imageStyle}
>
<View style={styles.viewStyle}>
<Text
style={styles.titleStyle}
>Welcome to pokeSearch</Text>
<Button
block={true}
style={styles.buttonStyle}
onPress={() => { }}
>
<Text style={styles.buttonText}>Start Searching</Text>
</Button>
</View>
</ImageBackground>
</View>
);
}
const styles = {
container: {
flex: 1,
// marginTop: Platform.OS === "android" ? 20 : 0,
justifyContent: 'center',
alignItems: 'center'
},
buttonOuterLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
buttonLayout: {
// marginTop: 10,
// paddingRight: 10,
// paddingLeft: 10
},
viewStyle: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
titleStyle: {
fontSize: 30,
color: 'blue',
alignItems: 'center'
},
imageStyle: {
// flex: 1,
width: null,
height: null,
resizeMode: 'contain'
// justifyContent: 'flex-end',
// alignItems: 'center'
},
buttonStyle: {
margin: 10
},
buttonText: {
color: 'white'
}
}
I want the background image to cover the background on iOS like it does on android.
