/Javascript/React/React native asign width to image

React native asign width to image

import { Dimensions } from "react-native";
const win = Dimensions.get('window');

<Image
  style={{
    width: win.width/2,
    height: win.width/2,
    resizeMode: "contain",
    alignSelf: "center",
    borderWidth: 1,
    borderRadius: 20,
  }}
  source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
  resizeMode="stretch"
/>

React native asign width to image

First import Dimensions from react-native

import { Dimensions } from 'react-native';
then you have to get the dimensions of the window

const win = Dimensions.get('window');
Now calculate ratio as

const ratio = win.width/541; //541 is actual image width
now the add style to your image as

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}

Similar codes

0 vote107 views1 answer
Header logo react native doesn't show
Javascript React
15 votes118 views3 answers
React native expo navigation
Javascript React
48 votes111 views1 answer
Emmet not working in react nextjs
Javascript React
5 votes126 views2 answers
Add object in array state react
Javascript React
0 vote108 views1 answer
React native on expo finger print is working bt not in apk
Javascript React
0 vote118 views2 answers
Assigning ID to view react native
Javascript React
17 votes130 views3 answers
React router url params
Javascript React
0 vote176 views3 answers
Create react app theme_color
Javascript React
0 vote131 views1 answer
Comment creer des switch en react js
Javascript React
0 vote120 views1 answer
Search nested array in react javascript
Javascript React