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

Waqas picture Waqas · Oct 23, 2017 · Viewed 148.8k times · Source

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>

Answer

Tiago Gouv&#234;a picture Tiago Gouvêa · Nov 15, 2017

You can use "ImageBackground" component on React Native.

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