Getting started

We’ve made Unistyles incredibly easy to use. You no longer need the useStyle hook or wrap your app in React Provider. Unistyles integrates seamlessly with your existing code, so you can start using it immediately.

Prerequisites

Unistyles 3.0 is tightly integrated with Fabric and the latest versions of React Native. Therefore, you must use the New Architecture and at least React Native 0.78.0. Additionally, Unistyles relies on react-native-nitro-modules and react-native-edge-to-edge.

Note

Learn more about how Unistyles leverages Nitro Modules and React Native Edge to Edge here.

Table of requirements:

	Required	Note
React Native	0.78.0+
New Architecture	enabled	no option to opt-out
Expo SDK	53+	(if you use Expo)
Xcode	16+ (recommended 16.3+)	Required by Nitro Modules
Platform	iOS / Android / Web / SSR	Follow instructions below

Since Unistyles relies on Fabric, it cannot run on the Old Architecture or older versions of React Native. If you can’t meet these requirements, you can use Unistyles 2.0+, which is compatible with those versions.

Installation

Install Unistyles and its dependencies

yarn add react-native-unistyles react-native-nitro-modules react-native-edge-to-edge

Caution

To avoid unexpected behaviors always use a fixed version of react-native-nitro-modules. Check compatibility table here.

Add babel plugin:

babel.config.js

module.exports = function (api) {
  api.cache(true)

  return {
    // for bare React Native
    // presets: ['module:@react-native/babel-preset'],

    // or for Expo
    // presets: ['babel-preset-expo'],

    // other config
    plugins: [
        // other plugins
        ['react-native-unistyles/plugin', {
            // pass root folder of your application
            // all files under this folder will be processed by the Babel plugin
            // if you need to include more folders, or customize discovery process
            // check available babel options
            root: 'src'
        }]
    ]
  }
}

Note

See additional Babel plugin configuration options here.

Learn why you need Babel plugin here.

Finish installation based on your platform:

Expo

yarn expo prebuild --clean

Do you use Expo Router?

Finish installation for Expo Router here.

Dev client only

Unistyles includes custom native code, which means it does not support Expo Go.

React Native

cd ios && pod install

React Native Web

Unistyles offers first-class support for React Native Web. To run the project, we recommend following the guidelines provided by Expo.

Custom Web

You can use Unistyles without React Native Web as a dependency. Check this guide for more details.

SSR

Unistyles offers first-class support for Next.js Server Side Rendering. To run the project, we recommend following the guidelines provided by Next.JS.

Then follow SSR guide.

Babel only

You need to disable SWC and rely on Babel for transpiling your code.

As easy as React Native StyleSheet

Getting started with Unistyles couldn’t be easier. Simply replace React Native’s StyleSheet with the StyleSheet exported from Unistyles. From that moment, you’ll be using a StyleSheet with superpowers 🦸🏼‍♂️.

Example.tsx

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

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello world from Unistyles</Text>
    </View>
  )
}

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

By replacing StyleSheet, you immediately gain several benefits that aren’t available in React Native’s StyleSheet:

• Variants
• Compound variants
• Dynamic functions
• Media queries
• Horizontal and vertical breakpoints for Native
• Custom web styles
• Web only features

When you’re ready to customize your styles and unlock additional features you can configure Unistyles.