Introduction

Unistyles is a cross-platform library that enables you to share up to 100% of your styles across all platforms. It combines the simplicity of StyleSheet with the performance of C++.

Unistyles is a superset of StyleSheet similar to how TypeScript is a superset of JavaScript. If you’re familiar with styling in React Native, then you already know how to use Unistyles.

Quick demo

1. Import Unistyles

2. Define your StyleSheet with createStyleSheet

3. Use useStyles hook to access styles

4. That’s it! No providers, no context!

Demo.tsx

import React from 'react'
import { View } from 'react-native'
import { createStyleSheet, useStyles } from 'react-native-unistyles'

export const Demo: React.FunctionComponent = () => {
    const { styles } = useStyles(stylesheet)

    return (
        <View style={styles.container}>
            <View style={styles.box} />
            <View style={styles.rectangle} />
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    // regular RN styles
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    // or with some superpowers 🦄
    // ◦ with theme
    box: {
        width: 100,
        height: 100,
        backgroundColor: theme.colors.primary
    },
    // ◦ with breakpoints
    rectangle: {
        width: {
            xs: 100,
            md: 200,
            xl: 400
        },
        height: {
            xs: 50,
            md: 100,
            xl: 200
        },
        backgroundColor: theme.colors.secondary
    },
    // ◦ and much much more!
    // dynamic functions, media queries, variants, runtime values
}))

The library offers first-class support for TypeScript, providing guidance with Intellisense as you create your extended StyleSheets.

Are you ready to give it a try?