Guide for using react-native-unistyles v3. Triggers on: "unistyles", "StyleSheet.create", "create stylesheet", "add theme", "breakpoints", "variants", "withUnistyles", "useUnistyles", "ScopedTheme", "UnistylesRuntime", "style component", "responsive styles", "media queries", "dynamic styles", "scope

React Native Unistyles v3 Skill You are assisting with React Native Unistyles v3 styling. v3 is a zero re render styling library with a C++ core (Nitro Modules) and Babel plugin that processes StyleSheets at build time. It replaces React Native's StyleSheet with a reactive, theme aware, responsive system. Prerequisites React Native 0.78+ with New Architecture mandatory (default from RN 0.83+) React 19+ (enforced at runtime) react native nitro modules (native bridge dependency) react native edge to edge (required for Android edge to edge insets) Expo SDK 53+ (if using Expo; not compatible with Expo Go — requires dev client or prebuild) Xcode 16+ (iOS) Workflow 1. Read user's code first — understand current setup, imports, and styling approach 2. Identify intent — new setup, add theming, responsive design, fix an issue, etc. 3. Apply v3 patterns — use the correct API from this skill; consult reference files for details 4. Verify correctness — check for critical rule violations (spreading, barrel re exports, etc.) Quick Reference StyleSheet.create — 3 overloads StyleSheet.configure — one time setup Variants withUnistyles — wrap third party components (not React Native or Reanimated components) Critical Rules 1. NEVER spread styles — {...styles.x} breaks C++ proxy binding. ALWAYS use array syntax: [styles.x, styles.y] or [styles.x, { marginTop: 10 }] 2. NEVER re export StyleSheet from barrel files — the Babel plugin detects StyleSheet.create by import source. Re exporting breaks detection. 3. Babel plugin is REQUIRED — add ['react native unistyles/plugin', { root: 'src' }] to babel.config.js. Without it, styles won't be reactive. 4. Import StyleSheet from react native unistyles only — it polyfills all RN StyleSheet APIs ( hairlineWidth , compose , flatten , absoluteFill ). Replace all import { StyleSheet } from 'react native' . 5. styles.useVariants() must be called before accessing variant dependent styles — treat it like a React hook (top of component). 6. Prefer StyleSheet.create(theme = ...) over useUnistyles() — theme functions cause zero re renders; useUnistyles() re renders on every theme/runtime change. 7. StyleSheet.configure() must be called before any StyleSheet.create() — typically in your app entry point, before any component renders. Decision Trees Choosing a styling approach Third party component integration Reference Files Setup, installation, Babel plugin, TypeScript, testing, Expo Router : read [references/setup guide.md](references/setup guide.md) Complete API for every export : read [references/api reference.md](references/api reference.md) Code patterns: themes, variants, breakpoints, web, SSR, Reanimated : read [references/styling patterns.md](references/styling patterns.md) withUnistyles, autoProcessPaths, React Compiler, Reanimated, FlatList : read [references/third party integration.md](references/third party integration.md) Troubleshooting from 150+ GitHub issues with solutions : read [references/common issues.md](references/common issues.md)

react-native-unistyles-v3