StyleSheet

StyleSheet replaces the old createStyleSheet function and aims for 1:1 parity with the React Native API. When we say that Unistyles is a superset of StyleSheet, we mean it! That’s why we are taking it one step further!

create

The create function supports all styles that React Native’s StyleSheet does, and it also enables some superpowers 🦸🏼‍♂️. It can parse your variants, compoundVariants or dynamic functions (even if you haven’t configured Unistyles yet!).

Once you register your themes and breakpoints, it unlocks even more features, like injecting the current theme or miniRuntime into your stylesheet. It also assists you with TypeScript autocompletion for your styles.

Example usage:

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

const styles = StyleSheet.create((theme, rt) => ({
    container: {
        backgroundColor: theme.colors.background,
        variants: {
            size: {
                small: {
                    width: 100,
                    height: 100
                },
                medium: {
                    width: 200,
                    height: 200
                },
                large: {
                    width: 300,
                    height: 300
                }
            },
            isPrimary: {
                true: {
                    color: theme.colors.primary
                },
                default: {
                    color: theme.colors.secondary
                },
                special: {
                    color: theme.colors.special
                }
            }
        }
    },
    text: {
        fontSize: rt.fontScale * 20,
        color: {
            sm: theme.colors.text,
            md: theme.colors.textSecondary
        }
    }
}))

Will be eg. parsed to:

{
    container: {
        backgroundColor: '#000',
        width: 200,
        height: 200,
        color: '#ff33aa'
    },
    text: {
        fontSize: 32,
        color: 'gold'
    }
}

Unistyles StyleSheet will automatically react and recalculate your styles if any of your dependencies change. Learn more about it here.

StyleSheet.create supports 3 ways of defining your stylesheets:

Static StyleSheet

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

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'red'
    }
})

Themable StyleSheet

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

const styles = StyleSheet.create(theme => ({
    container: {
        backgroundColor: theme.colors.background
    }
}))

Themable StyleSheet with `miniRuntime`

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

const styles = StyleSheet.create((theme, rt) => ({
    container: {
        backgroundColor: theme.colors.background,
        paddingTop: rt.insets.top
    }
}))

Learn more about miniRuntime here.

Shadows and filters as strings

boxShadow accepts a CSS-like string, and dropShadow entries in the filter array accept a CSS-like string as well. Unistyles parses these strings for you on iOS and Android:

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

const styles = StyleSheet.create(theme => ({
    card: {
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
        filter: [
            {
                dropShadow: '2px 4px 1px red'
            }
        ]
    }
}))

configure

StyleSheet.configure is used to configure Unistyles. It accepts an object with the following properties:

themes your apps themes
breakpoints your apps breakpoints
settings additional settings

Your themes are scoped across the whole app, unless your limit it with a scoped themes.

The configure function must be called before you import any component that uses Unistyles StyleSheet.

You can learn more about how to configure Unistyles here.

addChangeListener Since v3.1.0

StyleSheet.addChangeListener is an advanced API for integrations, custom hooks, and animation helpers that need to react to runtime dependency updates.

For regular styles, you do not need to use it manually. Unistyles already recalculates StyleSheet.create output whenever the relevant dependencies change.

Signature:

addChangeListener(
    onChanged: (dependencies: Array<UnistyleDependency>) => void
): () => void

The callback receives one or more UnistyleDependency values describing what changed. The function returns an unsubscribe callback.

Available UnistyleDependency values:

Name	Emitted when
`Theme`	the current theme changes or is updated with `updateTheme`
`ThemeName`	the theme name changes
`AdaptiveThemes`	adaptive themes are toggled
`Breakpoints`	screen width changes, which may change the current breakpoint
`Variants`	selected variants change
`ColorScheme`	the device color scheme changes
`Dimensions`	screen dimensions change
`Orientation`	device orientation changes
`ContentSizeCategory`	content size category changes
`Insets`	insets change
`PixelRatio`	pixel ratio changes
`FontScale`	font scale changes
`StatusBar`	status bar dimensions change
`NavigationBar`	navigation bar dimensions change
`Ime`	the IME (keyboard) inset changes
`Rtl`	the layout direction changes

import { useEffect } from 'react'
import { StyleSheet, UnistyleDependency } from 'react-native-unistyles'

useEffect(() => {
    const dispose = StyleSheet.addChangeListener((dependencies) => {
        if (
            dependencies.includes(UnistyleDependency.Theme) ||
            dependencies.includes(UnistyleDependency.Breakpoints)
        ) {
            // react to theme or breakpoint updates
        }
    })

    return dispose
}, [])

hairlineWidth

StyleSheet.hairlineWidth is a static value representing the smallest value that can be drawn on your device. It’s helpful for borders or dividers.

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

const styles = StyleSheet.create(theme => ({
    container: {
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderColor: theme.colors.accent
    }
}))

On the web, hairlineWidth is always 1.

compose

Maps to React Native’s compose function.

flatten

Maps to React Native’s flatten function.

absoluteFillObject

A static object with the following value:

{
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
}

absoluteFill