1

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.

Andrew
  • 26,706
  • 9
  • 85
  • 101
Akram Husseini
  • 23
  • 1
  • 7
  • Tried with: `width: '100%', height: '100%', flex: 1, resizeMode: 'cover'`? – MatPag Nov 03 '19 at 10:05
  • just tried that with 'contain' and it worked! not sure what would be best to use, contain or cover .. – Akram Husseini Nov 03 '19 at 10:10
  • Perfect :) I took my solution from here: https://stackoverflow.com/a/50233429/2910520, all credits go to him. Try with different devices and check what happens – MatPag Nov 03 '19 at 10:11

1 Answers1

0

the solution is to change the backgroundImage style as follows : 

imageStyle: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover'
}

all credit goes to matPag and https://stackoverflow.com/a/50233429/2910520

MatPag
  • 41,742
  • 14
  • 105
  • 114
Akram Husseini
  • 23
  • 1
  • 7