react-native-css-vh-vw

react-native-css-vh-vw

A ditto of CSS vw and vh units - returns, in pixels, a percentage of the device's viewport width or height.

Install

npm install react-native-css-vh-vw

Dependencies

react-native-css-vh-vw itself has no dependencies, but it must be used within a React Native project. The only React Native API that it relies on is Dimensions, which has support all the way back to React Native's first release.

Usage

Simply pass a value between 1 and 1000 to vh() or vw() to style React Native components.

50% of your device's viewport height: vh(50).

33.3% of your device's viewport width: vw(33.3).

Examples

• Using vh() and vw() to set dimensions of <View>: Component:

const VhVwDemo = (props) => {

  return (
    <View style={{
      height: vh(60),
      width: vw(50),
      backgroundColor: 'blue',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Text style={{ color: 'white' }}>height: vh(60)</Text>
      <Text style={{ color: 'white' }}>width: vh(50)</Text>
    </View>
  );
}

export default VhVwDemo;

Output:

• Using vh() and vw() to set dimensions of <Text>:

const VhVwDemo = (props) => {

  return (
    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: vw(10) }}>fontSize: vw(10)</Text>
      <Text style={{ fontSize: vh(5) }}>fontSize: vh(5)</Text>
    </View>
  );
}

export default VhVwDemo;

Output: