Dimensions

Unistyles provides rich metadata about your device dimensions. This is useful for creating responsive designs as well as avoiding additional hooks that require passing values to stylesheets. Every prop 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'

UnistylesRuntime can be used in your component as well as directly in the stylesheet.

UnistylesRuntime

Using UnistylesRuntime in your stylesheet has additional benefit, it will update (re-render) your stylesheets when the dimensions change.

Screen dimensions

All platforms

2.0.0

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

iOS

Android

2.4.0

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.

Navigation bar

Android

2.4.0

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

iOS

Android

2.4.0

updated 2.8.0

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

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

Tip

Unistyles uses WindowsInsetsCompat API to handle insets on Android. This API requires your app to have edge to edge layout enabled. Read more about it here.

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.

Danger

Unistyles enables edgeToEdge by default, but sometimes other libraries might interfere with it. Please check FAQ for more details.

Pixel ratio

iOS

Android

macOS

Windows

2.8.0

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

iOS

Android

Windows

2.8.0

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