Right now i am setting background image with below code where creating one extra image view to set image over view and its working fine.
<View>
<Image
style={{
height:67 ,
width: width}
source={Images.header_bachkground}/>
</View>
Now my question is: Is there any way to set background image directly on view like :
<View
style={{
height:67 ,
width: width}
source={Images.header_bachkground}>
</View>
The above code is not working for me.
Using <Image /> as a parent component to nest children is deprecated and soon will throw an error (at the time of writing this). Use <ImageBackground /> instead. You can nest anything inside ImageBackground. All the props you can pass to <Image /> can be passed to this.
Refer this.
There are two approaches for this. One is to put everything in between the opening and closing <Image> tags. The other is using layout properties. Refer to this link: https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45
The first way is to use <Image> as a container. Place your content between <Image> and </Image>. Be sure to set the content's backgroundColor: 'transparent'. I think Android gives it by default but iPhone doesn't. So, for consistency, we need to explicitly state it. React Native warns you for doing it this way. It will soon become an error. So, I recommend the latter way.
const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';
export default class BackgroundImage extends Component {
render() {
const resizeMode = 'center';
const text = 'This is some text inlaid in an <Image />';
return (
<Image
style={{
backgroundColor: '#ccc',
flex: 1,
resizeMode,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
}}
source={{ uri: remote }}
>
<Text
style={{
backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 30,
padding: 40,
}}
>
{text}
</Text>
</Image>
);
}
}
The second way is to use layout properties. Take a <View> in a container and set {position:'absolute', width: '100%', height: '100%'}. In this <View> insert the <Image> and set flex: 1. You may want to add resizeMode too. Now write a sibling <View> in the same container and set {flex: 1, backgroundColor: 'transparent'}. In this sibling <View> place your content. You may want to set opacity for either the <Image> or the sibling <View>.
Here's the example:
const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';
export default class BackgroundImage extends Component {
render() {
const resizeMode = 'center';
const text = 'I am some centered text';
return (
<View
style={{
flex: 1,
backgroundColor: '#eee',
}}
>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={{ uri: remote }}
/>
</View>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
}}
>
<Text
style={{
textAlign: 'center',
fontSize: 40,
}}
>
{text}
</Text>
</View>
</View>
);
}
}
Structure your code like below :
...
<Image
source={require('./images/index.jpeg')}
style={styles.container}>
<View>
<Text>
Welcome to React Native Maulik !
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</Image>
...
and your style should be like below :
const styles = StyleSheet.create({
container: {
flex: 1,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
});
This is the easiest and most preferred method!
<ImageBackground
source={require("../Assets/splash.png")}
style={{width: '100%',opacity:0.95, height: '100%',justifyContent:"center",alignContent:"center",alignItems: "center"}}
>
<View style={styles.InfoText}>
<Text style={{ textAlign: "center",color:'white', letterSpacing: 1.0,
lineHeight: 15 }}> Hello {user.email},</Text>
</View>
</ImageBackground>
This must do the trick.. Dont forget to import image background from react native at the top of your app!
This is a new addition to react native!
i think in ReactNative for managing images and other media use component <Image />. I read in documentation component <View> is designed to be building a UI. But, maybe if you will use component <Image /> as a props in component <View>, i think that is possible.
Or if you want to learn about background image in ReactNative, i recommendation you read this article :
I hope my answer can give you an idea. Happy Coding!
