Skip to content
react-native-unistyles

Getting started

We put a lot of effort into making Unistyles as easy to use as possible. That’s why you no longer need to use useStyle hook or wrap your app in any provider. Unistyles works inline with your existing code, so you can use it right away.

Prerequisites

Unistyles 3.0 is tightly integrated with Fabric and most recent version of React Native. That’s why you need to use New Architecture and at least React Native 0.76.0. Additionally Unistyles depends on react-native-nitro-modules and react-native-edge-to-edge.

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

Due to the fact that Unistyles is using Fabric, it’s not possible to run it on Old Architecture nor older versions of React Native. If you’re not able to meet this requirements, you can use Unistyles 2.0+ which is compatible with those versions.

Installation

shell
yarn add react-native-unistyles@next
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 been easier. All you need to do is to replace React Native StyleSheet with StyleSheet exported from Unistyles. From now on you’re using 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 StyleSheets you already have some benefits that are not avaiable in React Native StyleSheet:

When you’re ready to customize your styles and enable more features you can configure Unistyles.