make height of views dynamic as per images-CodePudding

I want to make the height of views vary as per image height like in Twitter and LinkedIn i.e if there is a landscape picture then the height is different as compared to the portrait image , as of now I tried to do it but I get lots of white spaces above and below the image which does not look great and I don't want to compromise the resolution of an image by making resizeMode to stretch or cover

my code as of now is `

  <TouchableOpacity onPress={() => handleImagePress(0)} style={{width:device_width,height:device_height
        }}>
        <NativeImage source={{uri:SingleImage.uri}}   resizeMode="contain" style={{ width:"100%",overflow:"hidden" ,height :"100%" ,resizeMode:"contain"}}  />  
        </TouchableOpacity>

black arrow is blank space here I have set the height to device_height as device_height as it was pretty much less than image height and if I set image_height then the white space grows in size

CodePudding user response：

I've created a snack where you can fetch images with random height & width and adjust the height & width of that same image thats shown on screen based on the Image properties. Check it out here, it should do the job for you https://snack.expo.dev/c0uDwh1DD

CodePudding user response：

You can get image size using the below code and apply it to your view and image, if the size is very large compared to the screen then scale it down as per your requirement.

     Image.getSize(Imagepath,
        (width, height) => {
           console.log(width,height)
        }
      );

You need to save these values in a variable using useState.