In my react-native expo app, i have a background image that is taking full height and width in all screens and i want to put a lineargradient above the background image but it's not working, the image is always appearing above the gradient, here is the code:
import React, { Component } from 'react';
import { LinearGradeint } from 'expo';
import { Text, StyleSheet, ImageBackground } from 'react-native';
class App extends Component {
render() {
return(
<View style={styles.container}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}>
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<View style={{width: "100%"}}>
<Text>
HI
</Text>
</View>
</ImageBackground>
</LinearGradient>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
height: '100%',
width: '100%',
flex: 1,
},
export default App;
Try to put LinearGradient component inside ImageBackground.
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} />
<View style={{width: "100%"}}>
</View>
</ImageBackground>
Add absolute position on the LinearGradient :
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}
/>
This worked for me:
<ImageBackground
source={require('../../assets/img/background.png')}
resizeMode="cover"
style={{
height: '100%',
width: '100%',
flex: 1,
}}>
<LinearGradient
colors={[
'rgba(255,180,113,0.75)',
'rgba(255,107,11,0.75)',
'rgba(255,180,113,0.75)',
]}
style={{flex: 1, justifyContent: 'center'}}>
{** CODE **}
</LinearGradient>
</ImageBackground>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.