React-native, use fullscreen image on android

Question

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' />

Answer 1

react-native-navigation-bar-color has solved my issue with the bottom navigation bar, and <StatusBar translucent backgroundColor='transparent' /> - with the status bar.

Answer 2

Another solution to this problem

const style = StyleSheet.create({
  background: {
    width: '100%',
    height: '100%',
    flex: 1  
}
...

Or you can specify the flex in the component itself

<ImageBackground style={{flex : 1}}>
...
</ImageBackground>

Look at this video , here is exactly what you needed

Answer 3

import{View,Text,ImageBackground,Dimensions} from 'react-native'

//This is Image full screen on your android or ios

<ImageBackground source={require('../image/TempleSlider.png')} style={{height:Dimensions.get("window").height,alignItems:'center',justifyContent:'space-between'}} > //Do somthing...