/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 vote391 views1 answer
How to submit form in reactjs and send data in json
Javascript React
5 votes371 views1 answer
React native text wrap
Javascript React
0 vote397 views1 answer
Enzyme-adapter-react-17
Javascript React
3 votes430 views2 answers
How to know the current route in react class component
Javascript React
16 votes423 views3 answers
Start react native
Javascript React
14 votes382 views2 answers
Adding border in react native
Javascript React
0 vote384 views1 answer
Onclick react history map
Javascript React
0 vote372 views1 answer
React-native resource android:attr/lStar not found in Android
Javascript React
0 vote376 views1 answer
Divide string in lines react native max width
Javascript React
0 vote380 views1 answer
Module not found: Can't resolve 'jquery' in react
Javascript React