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:

Key	Description	Default value	More info
adaptiveThemes	Enable Unistyles to automatically switch between `dark` and `light` themes based on the device settings.	false	link
initialTheme	If you have registered more than one theme and know the initial theme upfront, you can pass the theme name here.	undefined	link
plugins	A list of plugins that Unistyles will call after resolving the StyleSheet.	[]	link
experimentalCSSMediaQueries	Web only: Inject CSS media queries instead of inline styles.	false	link
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	-
Android 2.9.2 disableAnimatedInsets	Disable animating value of bottom inset while toggling keyboard	false	-

Full example

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