React Native Background Image sizing

Question

I am new with react native and I wanted to use ImageBackground.

However, when I try to make it display in full screen using the following code:

import React from 'react';
import { StyleSheet, ImageBackground,Text, View } from 'react-native';

const Signin = () => {
    return (
        <ImageBackground source={require('./images/background.jpg')} style={styles.image}> 
            <Text>Hello</Text>
        </ImageBackground>
            
    )
}


const styles = StyleSheet.create({
    image: {
        flex: 1,
        width: '100%',
        height: '100%',
        resizeMode:'cover'
    }
  });

export default Signin;

it returns only half of my screen the picture. Any ideas on why it is doing so?

My initial image properties are the follwing:

My initial image can be found here: https://unsplash.com/photos/0AwoTNSdwV

Does this answer your question? https://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native/37705794 — Shubham Verma, Aug 26 '20 at 09:59
Unfortunately no... I had a look at this answer before posting my question — colla, Aug 26 '20 at 10:03

Proff Mushiana Mulweli · Answer 1 · 2020-08-26T13:07:36.247

0

I tried your code on my computer and the problem is with the image that you are using. Copy the following code and try it but this time download this picture and use it instead of the one you provided.

Picture link: https://drive.google.com/file/d/1brXApmH6b_t6pscY9jzt_TsJI9NglWGL/view?usp=sharing

Code:

import React from "react";
import { StyleSheet, ImageBackground, Text, View } from "react-native";

const Signin = () => {
  return (
    <ImageBackground
      source={require("./images/backgroundImage.jpg")}
      style={styles.image}
    >
      <Text>Hello</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    flex: 1,
    width: "100%",
    height: "100%",
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default Signin;

This is what I get:

You can also try different pictures as background but this should solve your problem

edited Aug 26 '20 at 13:07

answered Aug 26 '20 at 10:01

Proff Mushiana Mulweli

324
1
11

Please send me the image you're trying to set as the background then I will try the code on my machine and give you the solution – Proff Mushiana Mulweli Aug 26 '20 at 10:42
Here is the initial image :https://unsplash.com/photos/0AwoTNSdwVM – colla Aug 26 '20 at 10:48
Yes, check the revised answer that I just edited and post. Let me know how it goes – Proff Mushiana Mulweli Aug 26 '20 at 13:10

score 0 · Answer 2 · answered Aug 26 '20 at 10:05

Try something like this.

Styles

var styles = StyleSheet.create({
container: {
    flex: 1,
},
backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
},
loginForm: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
},
});

View

    <View style={ styles.container }>
        <Image source={require('../images/login_background.png')} style=. {styles.backgroundImage}>
            <View style={ styles.loginForm }>
                <Text>TEST</Text>
            </View>
        </Image>
    </View>

React Native Background Image sizing

2 Answers2