Skip to content

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

VersionNameTypeDescription
-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
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
pixelRationumberPixel density of the device
2.8.0
fontScalenumberFont scale of the device
2.9.0
hairlineWidthnumberThe thinnest width of the platform
2.9.0
rtlbooleanIndicates if the device is in RTL mode
2.10.0
getTheme(themeName?: string) => ThemeGet theme by name or current theme if not specified

Setters

VersionNameTypeDescription
-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
2.2.0
updateTheme(themeName: string, updater: (currentTheme: Theme) => Theme) => voidUpdate the theme at runtime
2.6.0
statusBar.setColor(color?: string, alpha?: number) => voidUpdate statusBar color at runtime
2.6.0
navigationBar.setColor(color?: string, alpha?: number) => voidUpdate navigationBar color at runtime
2.8.0
statusBar.setHidden(hidden: boolean) => voidShow/hide status bar at runtime
2.8.0
navigationBar.setHidden(hidden: boolean) => voidShow/hide navigation bar at runtime
2.8.0
setImmersiveMode(enabled: boolean) => voidEnable/disable immersive mode (hiding both status and navigation bars)
2.8.0
setRootViewBackgroundColor(color?: string, alpha?: number) => voidset 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
}
}))