Skip to content
react-native-unistyles

Getting started

Getting started

We put a lot of effort into making Unistyles as easy to use as possible. You no longer need the useStyle hook or wrap your app in 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 version of React Native. Therefore, you must use the New Architecture and at least React Native 0.76.0. Additionally, Unistyles relies on react-native-nitro-modules and react-native-edge-to-edge.

Table of requirements:

RequiredNote
React Native0.76+
New Architectureenabledno option to opt-out
Expo SDK52+(if you use Expo)
Xcode16+Required by Nitro Modules

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@beta
yarn add react-native-nitro-modules react-native-edge-to-edge

Add babel plugin:

babel.config.js
module.exports = function (api) {
  api.cache(true)


  return {
    // other config
    plugins: [
        // other plugins
        ['react-native-unistyles/plugin']
    ]
  }
}

Finish installation based on your platform:

Terminal window
yarn expo prebuild --clean

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:

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