Unistyles Runtime

UnistylesRuntime

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.

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)

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

Why doesn’t `UnistylesRuntime` re-render my component?

You should think of UnistylesRuntime as a JavaScript object. It’s not a React component, 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 { UnistylesRuntime, createStyleSheet } from 'react-native-unistyles'

// your component

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