Dimensions

Unistyles provides rich metadata about your device dimensions. This is useful for creating responsive designs as well as avoiding installing third-part libraries. Every property listed below can be accessed with UnistylesRuntime. Dimensions are always up to date and are updated based on Unistyles’ core logic, e.g., when the device orientation changes.

Accessing dimensions

In order to start using the dimensions metadata, you need to import UnistylesRuntime:

import { UnistylesRuntime } from 'react-native-unistyles'

Screen dimensions

The most basic dimensions are the screen dimensions. These are the dimensions of the screen that your app is running on. You can access them with screen prop:

import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.screen.width // eg. 400
UnistylesRuntime.screen.height // eg. 760

Status bar

You can access status bar dimensions with statusBar prop:

import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.statusBar.width // eg. 400
UnistylesRuntime.statusBar.height // eg. 24

This prop may be useful for creating custom headers. In most of the cases status bar height is equal to the top inset, but on some devices it may be different.

You can access navigation bar dimensions with navigationBar prop:

import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.navigationBar.width // eg. 400
UnistylesRuntime.navigationBar.height // eg. 24

This prop may be useful for creating custom bottom bars. In most of the cases navigation bar height is equal to the bottom inset, but on some devices it may be different.

Insets

Insets are the safe areas of the screen. They are used to avoid overlapping with system UI elements such as the status bar, navigation bar, and home indicator. You can access them with insets prop:

import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.insets.top // eg. 42
UnistylesRuntime.insets.bottom // eg. 24
UnistylesRuntime.insets.left // eg. 0, or in vertical orientation can be top inset
UnistylesRuntime.insets.right // eg. 0
UnistylesRuntime.insets.ime // eg. 0

Insets can be used directly in your stylesheets to avoid passing values from useSafeAreaInsets hook from react-native-safe-area-context library.

Insets on Android respect following setups:

<StatusBar />
<StatusBar hidden />
<StatusBar translucent /> // enabled by default

Unistyles automatically reacts when you hide or show status and navigation bars. Yo can do that with UnistylesRuntime as well.

Pixel ratio

Device Pixel Ratio (DPR) is the ratio between physical pixels and device-independent pixels (DIPs) on a screen. It determines how many physical pixels are used to represent a single CSS pixel.

Most likely your phone pixel ratio ranges between 1.0 to 3.0 (retina).

UnistylesRuntime.pixelRatio // eg. 2.0

Font scale

Font scale is a ratio between the font size of the device and the default font size. It is used to adjust the size of text on the screen in companion with content size category.

UnistylesRuntime.fontScale // eg. 1.0