Cómo usar vw y vh css con React Native

Solución:

No sé si react-native admite unidades de ventana gráfica. Pero, hay un módulo:

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

Instalar en pc

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

Uso

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

Observe el operador / sintaxis requerido: 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,
  }
});

Unidades de visualización: vw, vh, vmin, vmax – React Native.

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

Instalar en pc

npm install react-native-expo-viewport-units

o

yarn add react-native-expo-viewport-units

Uso

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

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

En lugar de veiwport, puede usar Dimensions en react-native. PFB el vínculo de React-native Dimensions.

https://reactnative.dev/docs/dimensions

---

---

Utiliza Nuestro Buscador