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.

Learn more

Interested in incrementally migrating from StyleSheet? Read this guide

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
    },
}))

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