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

Answer 1

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 (
      
        
          
            Some text
          
        
      
    );
  }
});

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.