CODEWITHSUNDEEP
javascriptreactjsimagereact-nativestyling
Tyler.G
Tyler.G

Reputation: 143

React Native Card Image Cover

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:

What keeps happening:

Desired Result:

enter image description here

Upvotes: 0

Views: 6014

Answers (2)

Yoel
Yoel

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

emeraldsanto
emeraldsanto

Reputation: 4741

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

Related Questions