relative width and height image react native

Embarrassed Elephant answered on July 28, 2020 Popularity 10/10 Helpfulness 6/10

answer relative width and height image react native

related react native image auto height

relative width and height image react native

Comment

const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: height image javascript react-native width

Link to this answer
Share Copy Link

Contributed on Jul 28 2020

Embarrassed Elephant

0 Answers Avg Quality 2/10

Closely Related Answers

react native image auto height

Comment

import {
  Image,
  Dimensions,
} from "react-native";


const screen = Dimensions.get("window");
Image.getSize(this.state.image_url, (width, height) => {
  //full image to screen width (Change screen.width to pixel you want)
  let imageWidthRatio = width / screen.width; 
  let imageHeight = height / imageWidthRatio;
  this.setState({ width: screen.width, height: imageHeight });
});

<Image
	style={{
       width: this.state.width,
       height: this.state.height,
       alignSelf: "center",
    }}
    source={{ uri: this.state.image_url }}
/>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: auto

Link to this answer
Share Copy Link

Contributed on Apr 05 2022

adens

0 Answers Avg Quality 2/10

relative width and height image react native

Contents

More Related Answers

relative width and height image react native

Closely Related Answers

react native image auto height

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.