[<img alt="react-native-unistyles" src="assets/banner3.png">](https://unistyl.es/)

[![npm version](https://img.shields.io/npm/v/react-native-unistyles?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
[![npm downloads](https://img.shields.io/npm/dm/react-native-unistyles?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
[![npm downloads](https://img.shields.io/npm/dt/react-native-unistyles?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
[![License: MIT](https://img.shields.io/badge/License-MIT-44CD11.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
<br />
[![platform - expo](https://img.shields.io/badge/Expo-fff?style=for-the-badge&logo=expo&logoColor=black)](https://docs.expo.dev/)
[![platform - web](https://img.shields.io/badge/Web-white?logo=react&logoColor=57BDDA&style=for-the-badge)](https://www.w3.org/)
[![platform - ios](https://img.shields.io/badge/iOS-000?logo=apple&style=for-the-badge)](https://developer.apple.com/ios/)
[![platform - android](https://img.shields.io/badge/Android-44CD11?style=for-the-badge&logo=android&logoColor=white)](https://developer.android.com/)
[![platform - ssr](https://img.shields.io/badge/SSR-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)


## Installation

```shell
yarn add react-native-unistyles
```

Install dependencies:

```shell
yarn add react-native-nitro-modules
```

| react-native-unistyles | Minimum react-native-nitro-modules     |
|------------------------|----------------------------------------|
| >= 3.0.0               | >= 0.33.9                              |
| >= 3.1.0               | >= 0.35.0                              |
| >= 3.2.0               | >= 0.35.2                              |

> **Note:** Since v3.1.0, `react-native-edge-to-edge` is an **optional** dependency. We strongly recommend setting `edgeToEdgeEnabled=true` in your `android/gradle.properties` — it enforces translucent system bars on modals, disables legacy StatusBar hacks, and enables additional React Native core fixes. **Expo SDK 54+** enables this automatically. You can still install `react-native-edge-to-edge` for ecosystem compatibility with libraries like `react-native-bootsplash` or `react-native-permissions`.

Then follow [installation guides](https://unistyl.es/v3/start/getting-started) for your platform.

## [Documentation](https://unistyl.es/)
- [Start here](https://unistyl.es/v3/start/introduction)
- [Migration from Unistyles 2.0](https://unistyl.es/v3/start/migration-guide)
- [Learn how Unistyles 3.0 works](https://unistyl.es/v3/start/how-unistyles-works)
- [API](https://unistyl.es/v3/references/stylesheet)
- [Examples](https://unistyl.es/v3/examples/examples)

## Features
- 🚀 Shared core with C++ and JSI bindings
- 🏎️ Powered by Nitro Modules
- 🦸🏼‍♂️ No re-renders
- 🦄 Custom web parser, classes and pseudo classes
- ⚛️ Tightly integrated with Fabric and Shadow Tree
- 🔥 Crazy performance, adds under 0.1 ms to your StyleSheet
- 🎳 Share up to 100% of your styles across platforms in monorepo
- 🎯 Doesn't introduce new components, your view hierarchy is always clean
- 🎨 Register multiple themes and change them with single function call
- and [much much more](https://unistyl.es/v3/start/new-features)!

## Sponsors

<a href="https://codemask.com">
    <img src="https://avatars.githubusercontent.com/u/51229884?s=200&v=4" height="70px" width="70px" alt="codemask" />
</a>
<a href="https://galaxies.dev">
     <img src="https://avatars.githubusercontent.com/u/118431096?s=200&v=4" height="70px" width="70px" alt="galaxies-dev" />
</a>
<a href="https://github.com/ryanlanciaux">
     <img src="https://avatars.githubusercontent.com/u/85041?v=4" height="70px" width="70px" alt="ryanlanciaux" />
</a>
<a href="https://github.com/jordmccord">
     <img src="https://avatars.githubusercontent.com/u/7591840?v=4" height="70px" width="70px" alt="jordmccord" />
</a>
<a href="https://github.com/kerwanp">
     <img src="https://avatars.githubusercontent.com/u/36955373?v=4" height="70px" width="70px" alt="kerwanp" />
</a>
<a href="https://github.com/andkindness">
     <img src="https://avatars.githubusercontent.com/u/143941782?v=4" height="70px" width="70px" alt="andkindness" />
</a>
<a href="https://github.com/AdiRishi">
     <img src="https://avatars.githubusercontent.com/u/8351234?v=4" height="70px" width="70px" alt="AdiRishi" />
</a>


## Past sponsors

<a href="https://github.com/kmartinezmedia">
     <img src="https://avatars.githubusercontent.com/u/6308123?s=200&v=4" height="60px" width="60px" alt="kmartinezmedia" />
</a>
<a href="https://github.com/levibuzolic">
     <img src="https://avatars.githubusercontent.com/u/721323?v=4" height="60px" width="60px" alt="levibuzolic" />
</a>
<a href="https://github.com/claudesortwell">
     <img src="https://avatars.githubusercontent.com/u/41422239?v=4" height="60px" width="60px" alt="claudesortwell" />
</a>
<a href="https://github.com/luoxuhai">
     <img src="https://avatars.githubusercontent.com/u/37284154?v=4" height="60px" width="60px" alt="luoxuhai" />
</a>
<a href="https://github.com">
     <img src="https://avatars.githubusercontent.com/u/113348625?v=4" height="60px" width="60px" alt="anonymous" />
</a>
<a href="https://github.com/abanobboles">
     <img src="https://avatars.githubusercontent.com/u/9078953?v=4" height="60px" width="60px" alt="abanobboles" />
</a>
<a href="https://github.com/hyoban">
     <img src="https://avatars.githubusercontent.com/u/38493346?v=4" height="60px" width="60px" alt="hyoban" />
</a>
<a href="https://github.com/giovannilondero">
     <img src="https://avatars.githubusercontent.com/u/10998991?v=4" height="60px" width="60px" alt="giovannilondero" />
</a>
<a href="https://github.com/4cc3ssX">
     <img src="https://avatars.githubusercontent.com/u/57473799?v=4" height="60px" width="60px" alt="4cc3ssX" />
</a>
<a href="https://github.com/FilipiRafael">
     <img src="https://avatars.githubusercontent.com/u/61629642?v=4" height="60px" width="60px" alt="FilipiRafael" />
</a>
<a href="https://github.com/dacoto97">
     <img src="https://avatars.githubusercontent.com/u/16915053?v=4" height="60px" width="60px" alt="dacoto97" />
</a>
<a href="https://github.com/chinamcafee">
     <img src="https://avatars.githubusercontent.com/u/3439961?v=4" height="60px" width="60px" alt="chinamcafee" />
</a>
<a href="https://github.com/guillaumehcht">
     <img src="https://avatars.githubusercontent.com/u/80776475?v=4" height="60px" width="60px" alt="guillaumehcht" />
</a>
<a href="https://github.com/FTCHD">
     <img src="https://avatars.githubusercontent.com/u/144691102?v=4" height="60px" width="60px" alt="FTCHD" />
</a>
<a href="https://github.com/avega99">
     <img src="https://avatars.githubusercontent.com/u/177598670?v=4" height="60px" width="60px" alt="avega99" />
</a>
<a href="https://github.com/oscklm">
     <img src="https://avatars.githubusercontent.com/u/22825865?v=4" height="60px" width="60px" alt="oscklm" />
</a>
<a href="https://github.com/loopsware">
     <img src="https://avatars.githubusercontent.com/u/161434039?s=200&v=4" height="60px" width="60px" alt="loopsware" />
</a>
<a href="https://github.com/mobily">
     <img src="https://avatars.githubusercontent.com/u/1467712?v=4" height="60px" width="60px" alt="mobily" />
</a>
<a href="https://github.com/mwarger">
     <img src="https://avatars.githubusercontent.com/u/686823?v=4" height="60px" width="60px" alt="mwarger" />
</a>
<a href="https://github.com/happyfloat">
     <img src="https://avatars.githubusercontent.com/u/186333704?s=200&v=4" height="60px" width="60px" alt="happyfloat" />
</a>
<a href="https://github.com/cargurus-oss-fund">
     <img src="https://avatars.githubusercontent.com/u/108300759?v=4" height="60px" width="60px" alt="cargurus-oss-fund" />
</a>
<a href="https://github.com/rauchg">
     <img src="https://avatars.githubusercontent.com/u/13041?v=4" height="60px" width="60px" alt="rauchg" />
</a>
<a href="https://github.com/oliverloops">
     <img src="https://avatars.githubusercontent.com/u/33361399?v=4" height="60px" width="60px" alt="oliverloops" />
</a>
<a href="https://github.com/biw">
     <img src="https://avatars.githubusercontent.com/u/6139501?v=4" height="60px" width="60px" alt="biw" />
</a>
<a href="https://github.com/cybercarrot">
     <img src="https://avatars.githubusercontent.com/u/6837094?v=4" height="60px" width="60px" alt="cybercarrot" />
</a>

## Sponsor my work

[How to become a sponsor?](https://unistyl.es/v3/other/for-sponsors)

If you found the `react-native-unistyles` time-saving and valuable, please consider sponsoring my work. Your support enables me to continue creating libraries with a fresh approach.

Github: https://github.com/sponsors/jpudysz

Ko-fi: https://ko-fi.com/jpudysz

Your support is greatly appreciated and helps me dedicate more time and resources to creating quality libraries. Thank you for all the support!


## Discord
Looking for help or you want to chat with me?

[Join Discord](https://discord.gg/akGHf27P4C)


## License

MIT