Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native, use fullscreen image on android

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.

comparison

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' />
like image 440
sheriff_paul Avatar asked Nov 02 '19 18:11

sheriff_paul


People also ask

How do I set a full background in React Native?

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.

How do I make an Image full width React Native?

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.

How do I add a background Image in splash screen in React Native?

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.


1 Answers

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

like image 177
sheriff_paul Avatar answered Oct 26 '22 00:10

sheriff_paul