Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize image into view - react native

I'm wondering if it's possible to resize an image to fit it inside a view.

This is what I have now

 <View style={styles.container}>
    <View style={styles.header}>
      <Image
        source={headerImage}    
      />

    </View>
    <Text style={styles.basicText}>text</Text>
  </View>

 const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff"
      },
      header: {
        height: 200, 
        backgroundColor: 'red'
      },
      background: {
        width: null,
        height: null
      },
      image: {

      }

I want to make the image fit into the header view.

like image 469
smuvv Avatar asked Nov 07 '25 21:11

smuvv


1 Answers

Adding to Moti Azu's answer, you need to also set the resizeMode.

image: {
  flex:1,
  height: null,
  resizeMode: 'contain',
  width: null,
}

If it does not seem to work, make sure that your View with style container has a width.

like image 177
Antoine Grandchamp Avatar answered Nov 10 '25 15:11

Antoine Grandchamp



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!