react-Native: background image on iOS has cannot cover all the screen

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.

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.