react-nativeimagebackground

React native imageBackground not full screen


I created a Wallpaper.js where is my background image. However, it is not displaying in full screen on my emulator.

My Wallpaper.js

import React, { Component } from 'react';
import { StyleSheet, ImageBackground } from 'react-native';

import bgSrc from '../../images/wallpaper.png';

export default class Wallpaper extends Component {
  render() {
    return (
      <ImageBackground style={styles.picture} source={bgSrc}>
        {this.props.children}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
});

I call this wallpaper in my login page:

export default class LoginScreen extends Component {
  render() {
    return (
      <Wallpaper>

      </Wallpaper>
    );
  }
}

The result is a empty white space in the top. Why it is not full screen?

enter image description here

Thanks


Solution

  • You have to check the headerMode of your navigator stack. It's have to be 'modal'