Skip to content

Unistyles Registry

UnistylesRegistry
All platforms
2.0.0

UnistylesRegistry is a singleton that allows you to register themes, breakpoints and pass additional config.

There is no required timing for when you should call it. It can be done, for example, in your App.tsx file or somewhere deeper.

Register themes

import { UnistylesRegistry } from 'react-native-unistyles'
import { lightTheme, darkTheme } from './themes'
UnistylesRegistry
.addThemes({
light: lightTheme,
dark: darkTheme,
})

Register breakpoints

import { UnistylesRegistry } from 'react-native-unistyles'
import { breakpoints } from './breakpoints'
UnistylesRegistry
.addBreakpoints(breakpoints)

Add config

import { UnistylesRegistry } from 'react-native-unistyles'
UnistylesRegistry
.addConfig({
adaptiveThemes: true
})

Available config options:

KeyDescriptionDefault valueMore info
adaptiveThemesEnable Unistyles to automatically switch between dark and light themes based on the device settings.falselink
initialThemeIf you have registered more than one theme and know the initial theme upfront, you can pass the theme name here.undefinedlink
pluginsA list of plugins that Unistyles will call after resolving the StyleSheet.[]link
experimentalCSSMediaQueriesWeb only: Inject CSS media queries instead of inline styles.falselink
Web
2.8.1
windowResizeDebounceTimeMs
Time in ms Unistyles will report a window resize event, e.g., when the user drags the browser window.100-

Full example

UnistylesRegistry
.addBreakpoints(breakpoints)
.addThemes({
light: lightTheme,
dark: darkTheme,
})
.addConfig({
adaptiveThemes: true,
experimentalCSSMediaQueries: true
})