createStyleSheet

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

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