Skip to content

Unistyles Runtime

All platforms

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.


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.


-colorSchemestringGet your device’s color scheme. Available options dark, light or unspecified
-hasAdaptiveThemesbooleanIndicates if you have enabled adaptive themes
-themeNamestringName of the selected theme or an empty string if you don’t use themes
-breakpointstring / undefinedCurrent breakpoint or always undefined if you don’t use breakpoints
-breakpointsObjectYour breakpoints registered with UnistylesRegistry
-enabledPluginsstring[]Names of currently enabled plugins
-screen{width: number, height: number}Screen dimensions
-orientationScreenOrientationYour device’s orientation
-contentSizeCategoryIOSContentSizeCategory or AndroidContentSizeCategoryYour device’s content size category
insets{ top: number, bottom: number, left: number, right: number }Device insets which are safe to put content into
statusBar{width: number, height: number}Status bar dimensions
navigationBar{width: number, height: number}Navigation bar dimensions (Android)


-setTheme(themeName: string) => voidChange the current theme
-setAdaptiveThemes(enabled: boolean) => voidToggle adaptive themes
-addPlugin(plugin: UnistylesPlugin) => voidEnable a plugin
-removePlugin(plugin: UnistylesPlugin) => voidDisable a plugin
updateTheme(themeName: string, updater: (currentTheme: Theme) => Theme) => voidUpdate the theme at runtime
statusBar.setColor(color?: string) => voidUpdate statusBar color at runtime
navigationBar.setColor(color?: string) => voidUpdate navigationBar color 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