Full screen background image in React Native app

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

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.

You should use ImageBackground component. See React Native Docs

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