41

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


},}

Expected result: getting when using <Image> Result using <ImageBackground>

2
  • 1
    Per github.com/facebook/react-native/blob/…, 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. Oct 23, 2017 at 10:36
  • I have tried using only <ImageBackground> Without any parent or children but still not able to get expected result.
    – Waqas
    Oct 23, 2017 at 11:07

15 Answers 15

74

You can use "ImageBackground" component on React Native.

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>
2
  • 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, 2018 at 22:35
  • Not upvoting to preserve number but this works for me.
    – PhilCowan
    Mar 9, 2022 at 18:12
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 
},
1
  • 1
    import { ImageBackground ] from 'react-native'; should change ] to } right?
    – AD Tee
    Dec 19, 2019 at 8:47
4

Two options:

  1. Try setting width and height to width and height of the device screen
  2. 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

3

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>

2

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.

1
  • I Set Background image like you. But If i add <ScrollView> inside <ImageBackground>, i can't scroll down beyond the screen size. Please refer my image imgur.com/xP0LCFL
    – Johncy
    Oct 10, 2018 at 11:19
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

2
  • 1
    container: { flex: 1, //justifyContent: "center", //alignItems: "center", backgroundColor: "#F5FCFF" },
    – Ajith V M
    May 8, 2018 at 9: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. May 8, 2018 at 21:11
1
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

1

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>
1

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

0
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, 
 },

Screenshot

0

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>
        );
    }
}
0

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.)

0

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

0

<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"
 }
})

-7
.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

Not the answer you're looking for? Browse other questions tagged or ask your own question.