How do I check the horizontal or vertical image status in React-Native?

Question

I want to use the 'contain' feature when the vertical image comes and the 'stretch' feature when the horizontal image comes in the react-native. How do I check the horizontal or vertical status? For example:

<Image resizeMode={status==horizantal?'contain':'stretch'} />

Answer 1

I would handle this in a conditional rendering function and would figure out the size using the static getSize method from the Image class like this:

buildImage = (imageUri) => {
   let imageArray = [];
   Image.getSize(imageUri, (width, height) => {
      if (width > height) {
         //image is horizontal
         imageArray.push(
            <Image resizeMode={'contain'}/>
         );
         return imageArray;
      } else {
         //image is vertical
         imageArray.push(
            <Image resizeMode={'stretch'}/>
         );
         return imageArray;
      }
   });
}

render() {
   return(
      {this.buildImage(this.state.image)}
   )
}

getSize Docs for reference.