How to use vw and vh css with React Native

Question

I'm creating a basic login using React Native with a logo and 2 inputs:

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';

// create a component
class Login extends Component {
    render() {
        const imageURL = require('./images/CircleLogo.png');
        return (
            <View style={styles.container}>
                <View style={styles.loginContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={imageURL} />
                </View>
                <View style={styles.formContainer}>
                    <LoginForm /> 
                </View>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'aliceblue',
    },
    loginContainer:{
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'center'
    },
    logo: {
        position: 'absolute',
        width: '70vw',
        height: '70vw',
        maxWidth: 300
    }
});

//make this component available to the app
export default Login;

As you can see i am using vw and vh css measurements.

This works on the web, but not on iOS or Android.

Does anyone have a good suggestion for handling vw and vh measurements?

Side Note: It appears react accepts percentages as seen here, which I may revert to. But my question pertains to specifically the vw and vh measurements.

Answer 1

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

https://reactnative.dev/docs/dimensions

Here is an example:

import { Dimensions } from 'react-native'

const halfWindowsWidth = Dimensions.get('window').width / 2

Answer 2

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

Answer 3

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>