CODEWITHSUNDEEP
background-imagefullscreenreact-native
JV Lobo
JV Lobo

Reputation: 6316

Full screen background image in React Native app

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:

enter image description here

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

Upvotes: 14

Views: 85219

Answers (6)

Errong Leng
Errong Leng

Reputation: 1

01-23 18:08:10.066 21522 21543 E ReactNativeJS: Error: The component cannot contain children. If you want to ren der content on top of the image, consider using the component or absolute positioning.

My version is react-native-cli: 2.0.1 react-native: 0.52.0

render:

render() {
  return (
    <ImageBackground
       style={styles.bgimg}
       source={require('./res/img/wcs.png')}>
      <View style={styles.fgcontainer}>
        <Text style={styles.qa}>
           WCS WCS WCS
        </Text>
      </View>
    </ImageBackground>
  );
}

Style

const styles = StyleSheet.create({
  bgimg: {
    flex: 1
  },
  fgcontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  qa: {
    fontSize: 30,
    fontWeight: 'bold'
  }
});

check my example

Upvotes: 0

Peretz30
Peretz30

Reputation: 1314

You should use ImageBackground component. See React Native Docs

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

Upvotes: 29

Keshav Gera
Keshav Gera

Reputation: 11244

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

enter image description here

Upvotes: 0

SirPhemmiey
SirPhemmiey

Reputation: 641

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.

Upvotes: 2

kamikazeOvrld
kamikazeOvrld

Reputation: 944

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

Upvotes: 17

JV Lobo
JV Lobo

Reputation: 6316

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:

enter image description here

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.

Upvotes: 3

Related Questions