CODEWITHSUNDEEP
javascriptcssreactjsreact-nativeflexbox
fun joker
fun joker

Reputation: 1727

How to stretch property not working on images react native?

I have created a card and the parent component i.e card is a flex. So after using alginSelf: 'stretch'

Code:

<View style={styles.card}>
    <Image source={require('./Images/facility/facility.png')} style={styles.imgFacility}></Image>
    <TouchableHighlight>
        <Text style={styles.title}>Barasti /</Text>
    </TouchableHighlight>
</View>

CSS:

card: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16
},
imgFacility: {
    height: 200,
    alignSelf: 'stretch'
},
title: {
    color: '#ff3385'
}

Above code alginSelf: 'stretch' is not working why so ? What could be the reason ?

See screenshot:

enter image description here

Upvotes: 2

Views: 829

Answers (2)

Mojtaba Moshfeghi far
Mojtaba Moshfeghi far

Reputation: 571

If you want your image to be full width,change your imgFacility style like this:

imgFacility:{
width: Dimensions.get('window').width,
height: 200,
alignSelf: 'center'
}

Upvotes: 1

fun joker
fun joker

Reputation: 1727

alignSelf:'stretch doesn't work in above case because there should be a block element to stretch.

So below code works perfectly:

imgFacility: {
    height: 200,
    width: '100%'
}

Upvotes: 1

Related Questions