Viewport Units (vw, vh, vmin, vmax) support 📐

[gomes042]

Introduction

I am writing to request support for viewport units in React Native. These units allow developers to define sizes and dimensions in relation to the viewport, providing a different level of flexibility and responsiveness compared to using absolute units such as pixels or percentages. They are widely used in web development to create responsive designs that adapt to different screen sizes and aspect ratios.

I understand that React Native has different constraints than web development, but I believe that adding support for viewport units would greatly improve the flexibility and maintainability of React Native projects (The same for React Native Web projects). I kindly ask the React Native community to consider this request and to discuss the feasibility of adding support for viewport units.

I would also appreciate if someone could explain why viewport units are not yet supported, and if there is any other way to achieve similar results without custom hooks (example)

Details

• vw (viewport width) - represents a percentage of the viewport's width. 1vw is equal to 1% of the viewport's width.

• vh (viewport height) - represents a percentage of the viewport's height. 1vh is equal to 1% of the viewport's height.

• vmin (viewport minimum) - represents the smaller value of viewport's width and height. 1vmin is equal to 1% of the viewport's smaller dimension (width or height).

• vmax (viewport maximum) - represents the larger value of viewport's width and height. 1vmax is equal to 1% of the viewport's larger dimension (width or height).

Code example

<View style={{width: '100vw', minHeight: '1vmin', height: '50vw', backgroundColor: 'cyan'}} />

[rehan-webdev]

Thank you for this guide