Unistyles Runtime

All platforms

2.0.0

Unistyles Runtime is the most powerful part of Unistyles 2.0. It replaces much of the functionality previously handled by the React Native API. It also keeps track of your device dimensions, orientation, theme, preferred scheme, etc.

You can interact with Unistyles via UnistylesRuntime in your code.

Tip

Unistyles Runtime is a Host Object (created in C++). It’s always up to date and allows you to interact with the native side of Unistyles.

Usage

You can import UnistylesRuntime from react-native-unistyles:

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

and use it anywhere in your code, even outside a component.

Getters

Version	Name	Type	Description
-	colorScheme	string	Get your device’s color scheme. Available options dark, light or unspecified
-	hasAdaptiveThemes	boolean	Indicates if you have enabled adaptive themes
-	themeName	string	Name of the selected theme or an empty string if you don’t use themes
-	breakpoint	string / undefined	Current breakpoint or always undefined if you don’t use breakpoints
-	breakpoints	Object	Your breakpoints registered with UnistylesRegistry
-	enabledPlugins	string[]	Names of currently enabled plugins
-	screen	{width: number, height: number}	Screen dimensions
-	orientation	ScreenOrientation	Your device’s orientation
-	contentSizeCategory	IOSContentSizeCategory or AndroidContentSizeCategory	Your device’s content size category
2.4.0	insets	{ top: number, bottom: number, left: number, right: number }	Device insets which are safe to put content into
2.4.0	statusBar	{width: number, height: number}	Status bar dimensions
2.4.0	navigationBar	{width: number, height: number}	Navigation bar dimensions (Android)
2.8.0	pixelRatio	number	Pixel density of the device
2.8.0	fontScale	number	Font scale of the device
2.9.0	hairlineWidth	number	The thinnest width of the platform
2.9.0	rtl	boolean	Indicates if the device is in RTL mode

Setters

Version	Name	Type	Description
-	setTheme	(themeName: string) => void	Change the current theme
-	setAdaptiveThemes	(enabled: boolean) => void	Toggle adaptive themes
-	addPlugin	(plugin: UnistylesPlugin) => void	Enable a plugin
-	removePlugin	(plugin: UnistylesPlugin) => void	Disable a plugin
2.2.0	updateTheme	(themeName: string, updater: (currentTheme: Theme) => Theme) => void	Update the theme at runtime
2.6.0	statusBar.setColor	(color?: string, alpha?: number) => void	Update statusBar color at runtime
2.6.0	navigationBar.setColor	(color?: string, alpha?: number) => void	Update navigationBar color at runtime
2.8.0	statusBar.setHidden	(hidden: boolean) => void	Show/hide status bar at runtime
2.8.0	navigationBar.setHidden	(hidden: boolean) => void	Show/hide navigation bar at runtime
2.8.0	setImmersiveMode	(enabled: boolean) => void	Enable/disable immersive mode (hiding both status and navigation bars)
2.8.0	setRootViewBackgroundColor	(color?: string, alpha?: number) => void	set root view background color

Why doesn’t UnistylesRuntime re-render my component?

You should think of UnistylesRuntime as a JavaScript object. It’s not a React hook, so it doesn’t re-render your component when, for example, screen size or breakpoint changes.

How to re-render my stylesheets based on UnistylesRuntime?

If you use UnistylesRuntime in your createStyleSheet it will automatically re-render your styles to get the correct values in real-time.

One example could be reading device width and height.

Using Dimensions from React Native won’t work as intended, as it will always return the same value.

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

// your component

const stylesheet = createStyleSheet((theme, runtime) => ({
    container: {
        backgroundColor: theme.colors.background,
        width: runtime.screen.width,
        height: runtime.screen.height
    }
}))