React-Native Image Height (Full Width)

Solution 1:

My use was very similar in that I needed to display an image with full screen width but maintaining its aspect ratio.

Based on @JasonGaare's answer to use Image.getSize(), I came up with the following implementation:

class PostItem extends React.Component {

  state = {
    imgWidth: 0,
    imgHeight: 0,
  }

  componentDidMount() {

    Image.getSize(this.props.imageUrl, (width, height) => {
      // calculate image width and height 
      const screenWidth = Dimensions.get('window').width
      const scaleFactor = width / screenWidth
      const imageHeight = height / scaleFactor
      this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
    })
  }

  render() {

    const {imgWidth, imgHeight} = this.state

    return (
      <View>
        <Image
          style={{width: imgWidth, height: imgHeight}}
          source={{uri: this.props.imageUrl}}
        />
        <Text style={styles.title}>
          {this.props.description}
        </Text>
      </View>
    )
  }
}

Solution 2:

I am new on react-native but I came across this solution using a simple style:

imageStyle: {
  height: 300,
  flex: 1,
  width: null}

Image full width from my 1º App:

It worked for me.

Solution 3:

React Native has a function built in that will return the width and height of an image: Image.getSize(). Check out the documentation here