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 :)
You should use ImageBackground component. See React Native Docs
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With