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' />
Approach: In this article, we will see that how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Step 2: Create a components folder inside your project. Inside the components, folder create a file BackgroundImage.
To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want. to set the height of the Image to 300 and the width to null to fit the Image to make the width flexible and maintain aspect ratio.
We're going to do a couple of things: Manually set a blank, single-color splash screen background on the native side. On iOS, set the background color of the React Native root view to that same color. As soon as React Native loads, add a View with the same color in React Native and fade in the app logo on it.
react-native-navigation-bar-color
has solved my issue with the bottom navigation bar, and <StatusBar translucent backgroundColor='transparent' />
- with the status bar.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With