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>