score:9

Accepted answer

i don't know if react-native supports viewport units. but, there's a module:

https://www.npmjs.com/package/react-native-viewport-units

install

npm install react-native-viewport-units --save

usage

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

notice the required operator/syntax: x * vw

<view style={{height:50*vh, width:50*vw}}/>
var styles = stylesheet.create({
  lookinggood: {
    width: 15*vmin,
    height: 10*vmax,
    padding: 2*vw,
    margin: 4*vh,
  }
});

score:1

i've browsed through other answers, all that works and simple for new projects. if you desire to make an existing project responsive, i'd recommend using the below package.

https://www.npmjs.com/package/react-native-responsive-view-port

assume you've already built an app for 1280 x 800 and you wish to make it responsive for all resolutions, then you can achieve it as shown below.

before

    <view style={{ width:500 }} ></view>

after

const { vw, vh } = createviewportconfig({ width : 1280, height : 800 });

<view style={{ width: 500*vw }} ></view>

i find this method easier than recalculating all sizes.

score:7

viewport units: vw, vh, vmin, vmax - react native.

https://github.com/joetakara/react-native-expo-viewport-units

install

npm install react-native-expo-viewport-units

or

yarn add react-native-expo-viewport-units

usage

import { vw, vh, vmin, vmax } from 'react-native-expo-viewport-units';

<view style={{ width: vw(100), height: vh(100) }}>
  ...
<view>

score:14

instead of veiwport you can use dimensions in react-native. pfb the link of react-native dimensions.

https://reactnative.dev/docs/dimensions


Related Query

More Query from same tag