Reputation: 143
I'm trying to develop a card in my react native project where the top '70%' of the card is an image that covers the whole upper 70% of the card, but the bottom 30% remains for text. I keep trying to use resize mode (contain or cover) or set the width to '100%' and adjust the aspect ratio accordingly, but nothing is working! Help!
CODE:
<TouchableOpacity style={{width: '100%',marginBottom: 25, height: 200,borderRadius: 15 }}>
<View style={{ height: '70%', width: '100%' }}>
<Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>
<View style={{ height: '30%', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.habitTypeText}>Productivity</Text>
</View>
</TouchableOpacity>
WHAT KEEPS HAPPENING:
Desired Result:
Upvotes: 0
Views: 6014
Reputation: 7985
try using flex
<View style={{ flex:7, width: '100%' }}>
<Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>
<View style={{ flex:3, width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.habitTypeText}>Productivity</Text>
</View>
Upvotes: 0
Reputation: 4751
I think your problem was wrapping the Image
in an extra view, here's a working solution.
export default class Card extends React.Component {
render() {
const { text, image } = this.props;
return (
<TouchableOpacity>
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{text}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container : {
width : '100%',
height : 200,
marginBottom : 25,
borderRadius : 15,
backgroundColor : '#FFFFFF',
overflow : 'hidden'
},
image : {
width : '100%',
height : '70%'
},
textContainer : {
flex : 1,
alignItems : 'center',
justifyContent : 'center'
},
text : {
fontWeight : 'bold',
fontSize : 20
}
});
I also made a Snack if needed.
Upvotes: 3