/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 vote129 views1 answer
Empty div react
Javascript React
1 vote126 views3 answers
React redux how to change object value in reducer
Javascript React
0 vote139 views1 answer
React first click not working
Javascript React
0 vote128 views1 answer
Limit data with axios in react js
Javascript React
5 votes141 views2 answers
Gradlew clean in react native
Javascript React
14 votes126 views2 answers
React router link with params
Javascript React
18 votes140 views4 answers
React for loop in render
Javascript React
0 vote130 views1 answer
React Native Text style example
Javascript React
9 votes148 views3 answers
Disable yellow box react native
Javascript React
1 vote126 views1 answer
Sort function in react js
Javascript React