Full screen background image in React Native app

Question

I'm trying to set a full background image on my login view.

I found that question here in Stackoverflow: What's the best way to add a full screen background image in React Native

So I did it like there, but it didn't work:

var login = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={require('../images/login_background.png')} style={styles.backgroundImage} />
        <View style={ styles.loginForm }>
          <Text>TEST</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  loginForm: {
  },
});

I don't know what I'm doing wrong. Any help would be appreciated.

Edit: Here is the app, in case you guys want to take it a look -> Full size background image example on rnplay.org. I don't know how to do it editable :/

Thanks :)

Wrap the `View` with the `styles.loginForm`style inside the `Image` component — Ivan Chernykh, Jan 25 '16 at 12:11
TEST Like this, right? It didn't work :/ -> http://puu.sh/mIZ9k/7df9341cd6.png — JV Lobo, Jan 25 '16 at 12:17

score 28 · Answer 1 · edited Jul 24 '22 at 05:24

28

You should use ImageBackground component. See React Native Docs

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

edited Jul 24 '22 at 05:24

Isuru

30,617
60
187
303

answered Aug 28 '18 at 05:53

Peretz30

1,264
1
11
15

@WasanthaWijayaratna I am glad to help! – Peretz30 Feb 28 '19 at 06:27
This should be the accepted answer, as this was built specially for the task in question, namely, to accept children – CatalinBerta Jan 06 '21 at 13:01

score 16 · Accepted Answer · edited Jan 24 '18 at 07:08

16

Try either of these two methods:

The first is similar to yours except you have position: 'absolute' on your login form:

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

The second method involves using the ImageView as a container:

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

edited Jan 24 '18 at 07:08

masud_moni

1,121
16
33

answered Jan 25 '16 at 12:54

kamikazeOvrld

914
8
9

Thanks for your answer. With the first method: http://puu.sh/mJ1xz/dc72257192.png With the second: http://puu.sh/mJ1CK/493f68bb1c.png Nothing worked :/ – JV Lobo Jan 25 '16 at 13:14
@JVLobo I see you finally got it to work, if the answer worked for you, please mark accepted. – kamikazeOvrld Jan 25 '16 at 22:33
How about performance? Is it ok to use `.png` or `.jpg`? Or is it better to use something else? – Green Jul 04 '18 at 15:55
I have added the width 100% to exact fit. Thank you.` backgroundImage: { flex: 1, resizeMode: 'cover', width: '100%', },` – Srithar Rajendran Oct 27 '21 at 17:44
Also, I modified based on current work: TEST – Srithar Rajendran Oct 27 '21 at 17:50

JV Lobo · Answer 3 · 2016-01-25T22:08:47.953

I was doing a silly mistake...

Text component has a white background, and I thought the problem was with the Image and stuff...

So, the solution is to wrap the info inside the Image tag, as @Cherniv and @kamikazeOvrld said, but also set transparent background to the component inside it.

Here is the fully working example:

Code:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBarIOS
} = React;

StatusBarIOS.setHidden(true);

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={{uri: 'http://puu.sh/mJ1ZP/6f167c37e5.png'}} style={styles.backgroundImage} >
          <View style={ styles.loginForm }>
            <Text style={ styles.text }>Some text</Text>
          </View>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch',
    justifyContent: 'center',
  },

  loginForm: {
    backgroundColor: 'transparent',
    alignItems: 'center',
  },

  text: {
    fontSize: 30,
    fontWeight: 'bold',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Also in rnplay.org

I hope it helps someone like me, when you are writing code all day, your brain doesn't work as well as you'd like!

Thanks.

How about performance? Is it ok to use `.png` or `.jpg`? Or is it better to use something else? — Green, Jul 04 '18 at 15:56
Hello I got bilowe error --> The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning. — Umesh AHIR, Aug 27 '18 at 11:32

score 2 · Answer 4 · answered Sep 03 '18 at 12:30

Umesh, the answer to your problem is already stated clearly.

The <Image /> component does not contain any children component. What you need to do is to use the <ImageBackground /> component as this will allow you embed other components inside it making them as children. So in your case you should do something like this

<ImageBackground> <Text>Write your text and some other stuffs here...</Text> </ImageBackground>

Note: Don't forget to add flex: 1 or width.

I hope my answer was clear enough. Thanks.

score 0 · Answer 5 · answered Dec 20 '19 at 06:43

 <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

Full screen background image in React Native app

5 Answers5

Linked