Skip to content
Unistyles

Dimensions

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.

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. Status bar height is not dynamic and won’t cover hiding it.

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. Navigation bar height is not dynamic.

Insets

iOS
Android
2.4.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.

Insets on Android respect following setups:

Modifying dynamicaly StatusBar API:
<StatusBar />
<StatusBar hidden />
<StatusBar translucent />
Adding some window flags to styles.xml:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Modifying window flags (full screen mode):
val activity = currentActivity
activity?.runOnUiThread {
    activity.window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
}