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?
Thanks
You have to check the headerMode of your navigator stack. It's have to be 'modal'