How to use vw and vh css with React Native

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,
  }
});

Instead of veiwport you can use Dimensions in react-native. PFB the link of react-native Dimensions.

https://reactnative.dev/docs/dimensions

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.

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>