I just have started developing a new app and immediately ran into a problem.
Here, ios on the right, the background successfully covers the entire screen, including the top bar and the bottom navigation. However, on android, this does not happen.
Here is my code:
import React from 'react';
import { ImageBackground, Text, View, SafeAreaView, StyleSheet } from 'react-native';
import Button from "./src/components/Button";
const Explore = ({}) => {
return (
<ImageBackground
style={s.background}
source={require('./src/assets/images/explore.png')}
>
<SafeAreaView style={s.safeArea}>
<View style={s.wrapper}>
<View style={s.header}>
<Text style={s.title}>Explore</Text>
<Text style={s.subTitle}>new amazing countries</Text>
</View>
<View style={s.spacer} />
<View style={s.controls}>
<Button
style={s.button}
label="Log in"
/>
</View>
</View>
</SafeAreaView>
</ImageBackground>
);
};
const s = StyleSheet.create({
background: {
width: '100%',
height: '100%',
},
safeArea: {
flex: 1,
},
wrapper: {
flex: 1,
padding: 25,
},
header: {
paddingTop: 20,
},
title: {
fontSize: 24,
fontFamily: 'RobotoSlab-Bold',
color: '#323B45',
},
subTitle: {
fontSize: 20,
fontFamily: 'RobotoSlab-Light',
color: '#323B45',
},
spacer: {
flex: 1,
},
controls: {
flexDirection: 'row'
},
button: {
flex: 1
},
gap: {
width: 25
}
});
export default Explore;
Does anyone know how I can make the background on android cover the entire screen, jus like on ios?
UPDATE:
We have managed to cover the status bar with the following code:
<StatusBar translucent backgroundColor='transparent' />