Skip to content
Unistyles

Introduction

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

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?