How to use ImageBackground to set background image for screen in react-native

Question

When I use in react-native it gives warning that using with children is deprecated and will be error in future. User instead.

So, If I use it doesn't give expected result which I was getting using

Here is the code I wrote for using

<ImageBackground source={require('../../img/splash/splash_bg.png')} style={styles.backgroundImage} >
        </ImageBackground>

And style code is

const styles = StyleSheet.create({
backgroundImage: {
    flex: 1,
    // width: undefined,
    // height: undefined,
    // flexDirection: 'column',
    // backgroundColor:'transparent',
    // justifyContent: 'flex-start',


},}

Per https://github.com/facebook/react-native/blob/dc97e3fb4e1a297d18b9361710290468060626fc/Libraries/Image/ImageBackground.js, ImageBackground accepts two style props – style and imageStyle – which are (obviously) applied to the internal View and Image respectively. It's also worth noting that height and weight values from the container style are applied to the image style automatically. — Ishita Sinha, Oct 23 '17 at 10:36
I have tried using only Without any parent or children but still not able to get expected result. — Waqas, Oct 23 '17 at 11:07

Tiago Gouvêa · Answer 1 · 2019-08-19T12:15:51.867

75

You can use "ImageBackground" component on React Native.

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>

edited Aug 19 '19 at 12:15

answered Nov 15 '17 at 20:27

Tiago Gouvêa

15,036
4
75
81

13

I don't know if it is weird or not, but it would only give me an error if I did not specify 'width' and 'height' attributes, and I did not see this documented anywhere. Your answer made me find out what was wrong :D – deb0ch May 27 '18 at 22:35
Not upvoting to preserve number but this works for me. – PhilCowan Mar 09 '22 at 18:12

BLDD · Answer 2 · 2019-12-20T10:35:19.053

22

i achieved this by:

import { ImageBackground } from 'react-native';

<ImageBackground style={ styles.imgBackground } 
                 resizeMode='cover' 
                 source={require('./Your/Path.png')}>

   //place your now nested component JSX code here

</ImageBackground>

And then the Styles:

imgBackground: {
        width: '100%',
        height: '100%',
        flex: 1 
},

edited Dec 20 '19 at 10:35

answered May 08 '18 at 12:16

BLDD

483
2
8
14

2

import { ImageBackground ] from 'react-native'; should change ] to } right? – AD Tee Dec 19 '19 at 08:47

Alexander Vitanov · Answer 3 · 2017-10-23T13:16:38.603

Two options:

Try setting width and height to width and height of the device screen
Good old position absolute

Code for #2:

 render(){
    return(
        <View style={{ flex: 1 }}>
           <Image style={{ width: screenWidth, height: screenHeight, position: 'absolute', top: 0, left: 0 }}/>
           <Text>Hey look, image background</Text>
        </View>
    )
}

Edit: For option #2 you can experiment with resizeMode="stretch|cover"

Edit 2: Keep in mind that option #2 renders the image and then everything after that in this order, which means that some pixels are rendered twice, this might have a very small performance impact (usually unnoticeable) but just for your information

score 3 · Answer 4 · answered Jul 12 '18 at 05:36

ImageBackground is a very simple and useful component.Put your component inside ImageBackground as a nested component and tweak a position of your component by using position.

Here's an example.

<ImageBackground
  source={{ uri: hoge }}
  style={{
    height: 100,
    width: 100,
    position: 'relative', 
    top: 0,
    left: 0
  }}
>
  <Text
    style={{
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', 
      bottom: 0, 
      left: 0
    }}
  >
    Hello World
  </Text>
</ImageBackground>

score 2 · Answer 5 · answered Jul 20 '18 at 05:28

Here is a link to the RN docs: https://facebook.github.io/react-native/docs/images

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

You might not want to use <ImageBackground> in some cases, since the implementation is very simple. Refer to <ImageBackground>'s source code for more insight, and create your own custom component when needed.

return (
  <ImageBackground source={require('./image.png')} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Note that you must specify some width and height style attributes.

Note also that the file path is relative to the directory the component is in.

I Set Background image like you. But If i add inside , i can't scroll down beyond the screen size. Please refer my image https://imgur.com/xP0LCFL — Johncy, Oct 10 '18 at 11:19

score 1 · Answer 6 · answered May 08 '18 at 09:38

1

     <ImageBackground
            source={require("../assests/background_image.jpg")}
            style={styles.container}

        >
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Button
                    onPress={() => this.props.showImagePickerComponent(this.props.navigation)}
                    title="START"
                    color="#841584"
                    accessibilityLabel="Increase Count"
                />
            </View>
        </ImageBackground>

Please use this code for set background image in react native

answered May 08 '18 at 09:38

Ajith V M

11
2

1

container: { flex: 1, //justifyContent: "center", //alignItems: "center", backgroundColor: "#F5FCFF" }, – Ajith V M May 08 '18 at 09:39
While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. – Erty Seidohl May 08 '18 at 21:11

score 1 · Answer 7 · answered Dec 06 '18 at 13:17

const img = '../../img/splash/splash_bg.png';
<ImageBackground  source={{ uri: img }} style={styles.backgroundImage} >
    </ImageBackground>

This worked for me. Reference to RN docs can be found here.I wrote mine by reading this- https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

score 1 · Answer 8 · answered Dec 22 '18 at 13:51

To add background Image, React Native is based on component, the ImageBackground Component requires two props style={{}} and source={require('')}

 <ImageBackground source={require('./wallpaper.jpg')} style={{width: '100%', height: '100%'}}> 
<....yourContent Goes here...>
    </ImageBackground>

score 1 · Answer 9 · answered Apr 02 '21 at 20:05

I was searching Google on how to achieve this in 2021, so I will go ahead and add how I achieved this. NOTE: I am using styled-components in my project. Another thing to mention is that you might not need the additional View component, but I am using the SafeAreaView component inside of the Background component to add the additional spacing below the status bar for iOS.

import styled from 'styled-components';

const Background = styled.ImageBackground`
  flex: 1;
  resize-mode: cover; // Not sure if this helps, but it was used in the docs, listed below
  justify-content: center;
`;

const Container = styled.SafeAreaView`
  flex: 1;
`;

...
return (
  <Background source={require('../assets/image.png')}>
    <Container>
      // rest of your components
    </Container>
  </Background>
)
...

docs

score 0 · Answer 10 · answered Apr 22 '18 at 18:39

const { width, height } = Dimensions.get('window')


<View style={{marginBottom: 20}}>
   <Image 
        style={{ height: 200, width: width, position: 'absolute', resizeMode: 'cover' }}
        source={{ uri: 'https://picsum.photos/'+width+'/200/?random' }}
                />
   <View style={styles.productBar}>
       <View style={styles.productElement}>
            <Image
                  style={{ height: 160, width: width - 250, position: 'relative', resizeMode: 'cover' }}
                  source={{ uri: 'https://picsum.photos/'+ 250 +'/160/?random' }}
                        />
       </View>
       <View style={styles.productElement}>
             <Text style={{ fontSize: 16, paddingLeft: 20 }}>Başlık</Text>
             <Text style={{ fontSize: 12, paddingLeft: 20, color: "blue"}}>Alt Başlık</Text>
       </View>
   </View>
</View>



 productBar: {
    margin: 20,
    marginBottom: 0,
    justifyContent: "flex-start" , 
    flexDirection: "row"
  },
  productElement: {
    marginBottom: 0, 
 },

score 0 · Answer 11 · answered May 29 '18 at 13:09

I think this will help u..

import React, { Component } from 'react';
import { homePageStyles } from '../styles/Style';
import { Text, ImageBackground } from 'react-native';
import HomePageWallpaper from '../images/homePageWallpaper.jpg';

export default class Home extends Component {
    render() {
        return (
            <ImageBackground source={HomePageWallpaper} style={{ flex: 1, justifyContent: 'center', width: null, height: null }}>
                <Container>                    
                    <Content>
                        <Text style={homePageStyles.description_text}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
                    </Content>
                </Container >
            </ImageBackground>
        );
    }
}

score 0 · Answer 12 · edited Jun 20 '20 at 09:12

I faced same problem with background image and its child components including logo images. After wasting few hours, I found the correct way to solve this problem. This is surely helped to you.

var {View, Text, Image, ImageBackground} = require('react-native');
import Images from '@assets';

export default class Welcome extends Component {
    render() {
        return (
            <ImageBackground source={Images.main_bg} style={styles.container}>
                <View style={styles.markWrap}>
                    <Image source={Images.main_logo} 
                    style={styles.mark} resizeMode="contain" />
                </View>
                <View style={[styles.wrapper]}>
                    {//Here put your other components}
                </View>              
                
            </ImageBackground>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        flex: 1,
    },
    markWrap: {
        flex: 1,
        marginTop: 83,
        borderWidth:1, borderColor: "green"
      },
    mark: {
        width: null,
        height: null,
        flex: 1,
    },
    wrapper:{
        borderWidth:1, borderColor: "green",///for debug
        flex: 1,
        position:"relative",
    },
}

Logo on background Image

(PS: I put on the dummy image on this screen instead of real company logo.)

score 0 · Answer 13 · answered Jul 31 '20 at 19:40

0

You have to import background component first to use backgroundimage on your code

answered Jul 31 '20 at 19:40

Shahrukh Sanjrani

87
6

score 0 · Answer 14 · answered Aug 17 '22 at 07:03

<ImageBackground source=require('../../img/splash/splash_bg.png')} style={styles.backgroundImage} />

Use resizeMode: "contain" Resize the background image to make sure the image is fully visible and resizeMode: "cover" Resize the background image to cover the entire container, even if it has to stretch the image.

const styles = StyleSheet.create({

 carImage: {
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 }
})

score -7 · Answer 15 · answered Jan 31 '19 at 14:51

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

look result

How to use ImageBackground to set background image for screen in react-native

15 Answers15

Linked