createStyleSheet

All platforms

2.0.0

Utility for building your StyleSheets with superpowers. It can be imported from the react-native-unistyles:

import { createStyleSheet } from 'react-native-unistyles'

This tool is interchangeable with React Native’s StyleSheet.create.

crateStyleSheet accepts both object or function.

Basic usage (object)

If you pass an object to the createStyleSheet it will work the same like with StyleSheet.create. With this tool you can now use variants, breakpoints and media queries.

const stylesheet = createStyleSheet({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

Basic usage (function)

When you pass a function to createStyleSheet it automatically injects a theme as the first argument for you.

To register your themes please follow setup and theming guides.

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: theme.colors.background
    },
}))

In addition to the theme argument, you can also accept the runtime argument when passing a function. This can be useful for accessing UnistylesRuntime and its properties (such as screen orientation, dimensions, insets, and more) without having to import this class directly.

const stylesheet = createStyleSheet((theme, runtime) => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: runtime.insets.top,
        backgroundColor: runtime.orientation === 'portrait'
            ? theme.colors.accent
            : theme.colors.oak
    },
}))

Since version 2.8.0, the library will inject mini runtime which is a subset of the original UnistylesRuntime without methods like setTheme or setRootViewBackgroundColor, which are not useful when defining your stylesheets.

Importantly, you’ll receive the same TypeScript hints as with StyleSheet.create!