Development
Plugin
react-native-unistyles
Level up your React Native StyleSheet
Plugin Signal67/100Solid
maintained84
capable23
documented100
adopted74
Install
$ npx -y skills add jpudysz/react-native-unistyles --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
2,933
Stars
118
Forks
Active
Maintenance
TypeScript
Language
1mo ago
Last commit
2y ago
Created
Repo: jpudysz/react-native-unistyles
What's inside
Skills
2/react-native-unistyles-v3Guide 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",/unistyles-v2-to-v3-migrationMigrate react-native-unistyles from v2 to v3. Triggers on: "migrate unistyles", "upgrade unistyles", "v2 to v3", "unistyles migration", "update unistyles", "convert unistyles v2". Covers all API changes including StyleSheet.create, useStyles removal, theme configuration,
README
1
Installation
yarn add react-native-unistyles
Install dependencies:
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-edgeis an optional dependency. We strongly recommend settingedgeToEdgeEnabled=truein yourandroid/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 installreact-native-edge-to-edgefor ecosystem compatibility with libraries likereact-native-bootsplashorreact-native-permissions.
Then follow installation guides for your platform.
Documentation
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!
Sponsors
Past sponsors
Sponsor my work
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?
License
MIT
File tree
521jpudysz/react-native-unistylesView on GitHub
.editorconfig
.github/
FUNDING.yml
ISSUE_TEMPLATE/
bug-report.yml
config.yml
PULL_REQUEST_TEMPLATE.md
workflows/
ci.yml
release.yml
.gitignore
.husky/
.gitignore
commit-msg
pre-commit
.nvmrc
.oxfmtrc.json
.oxlintrc.json
apps/
docs/
astro.config.mjs
package.json
postcss.config.mjs
public/
clouds.svg
favicon.png
opengraph-image3.png
unicorn.svg
src/
animate.ts
assets/
how-1.png
how-2.png
how-3.png
how-4.png
how-5.png
how-6.png
how-7.png
tutorial-10.jpg
tutorial-11.jpg
tutorial-12.png
tutorial-13.jpg
tutorial-14.png
tutorial-2.jpg
tutorial-3.jpeg
tutorial-4.jpeg
tutorial-5.jpeg
tutorial-6.jpg
tutorial-7.jpeg
tutorial-8.jpg
tutorial-9.jpg
tutorial-preview.jpg
uni2.png
components/
Beam.astro
Button.astro
CompareChanges.astro
index.ts
Seo.astro
TutorialNavigation.astro
content/
config.ts
docs/
v3/
guides/
avoiding-keyboard.mdx
custom-web.mdx
expo-router.mdx
merging-styles.mdx
react-compiler.mdx
reanimated.mdx
server-side-rendering.mdx
theming.mdx
why-my-view-doesnt-update.mdx
llms/
info.mdx
other/
babel-plugin.mdx
dependencies.mdx
for-library-authors.mdx
for-sponsors.mdx
frequently-asked-questions.mdx
references/
3rd-party-views.mdx
breakpoints.mdx
compound-variants.mdx
content-size-category.mdx
dimensions.mdx
display-hide.mdx
dynamic-functions.mdx
edge-to-edge.mdx
media-queries.mdx
mini-runtime.mdx
scoped-theme.mdx
stylesheet.mdx
unistyles-runtime.mdx
use-unistyles.mdx
variants.mdx
web-only.mdx
web-styles.mdx
with-unistyles.mdx
start/
configuration.mdx
getting-started.mdx
how-unistyles-works.mdx
introduction.mdx
migration-guide.mdx
new-features.mdx
testing.mdx
when-to-use-unistyles.mdx
tutorial/
cleanup-components.mdx
cleanup-screens.mdx
cross-platform.mdx
intro.mdx
modals.mdx
new-screens.mdx
player-screens.mdx
settings-screen.mdx
env.d.ts
pages/
index.astro
styles/
docs.css
home.css
theme.json
tsconfig.json
example/
.bundle/
config
.gitignore
.watchmanconfig
android/
app/
build.gradle
debug.keystore
proguard-rules.pro
src/
main/
AndroidManifest.xml
java/
com/
example/
MainActivity.kt
MainApplication.kt
res/
drawable/
rn_edit_text_material.xml
mipmap-hdpi/
ic_launcher_round.png
ic_launcher.png
mipmap-mdpi/
ic_launcher_round.png
ic_launcher.png
mipmap-xhdpi/
ic_launcher_round.png
ic_launcher.png
mipmap-xxhdpi/
ic_launcher_round.png
ic_launcher.png
mipmap-xxxhdpi/
ic_launcher_round.png
ic_launcher.png
values/
strings.xml
styles.xml
build.gradle
gradle/
gradle.properties
wrapper/
gradle-wrapper.jar
gradle-wrapper.properties
gradlew
gradlew.bat
settings.gradle
app.json
App.tsx
babel.config.js
Button.tsx
Gemfile
Gemfile.lock
index.js
ios/
.xcode.env
AppDelegate.swift
example/
example.xcodeproj/
project.pbxproj
xcshareddata/
xcschemes/
example.xcscheme
example.xcworkspace/
contents.xcworkspacedata
Images.xcassets/
AppIcon.appiconset/
Contents.json
Contents.json
Info.plist
LaunchScreen.storyboard
PrivacyInfo.xcprivacy
exampleTests/
exampleTests.m
Info.plist
Podfile
Podfile.lock
metro.config.js
package.json
react-native.config.js
README.md
st.ts
tsconfig.json
Typography.tsx
unistyles.ts
expo-example/
__tests__/
__snapshots__/
example.spec.tsx.snap
example.spec.tsx
.gitignore
app/
app.json
_layout.tsx
(tabs)/
_layout.tsx
explore.tsx
index.tsx
+html.tsx
+not-found.tsx
assets/
images/
adaptive-icon.png
favicon.png
icon.png
partial-react-logo.png
react-logo.png
react-logo@2x.png
react-logo@3x.png
splash.png
babel.config.js
index.js
metro.config.js
package.json
react-native.config.js
tsconfig.json
unistyles.ts
assets/
banner3.png
bun.lock
bunfig.toml
package.json
packages/
unistyles/
android/
build.gradle
CMakeLists.txt
src/
main/
cxx/
cpp-adapter.cpp
NativeUnistylesModule.cpp
NativeUnistylesModule.h
java/
com/
unistyles/
Equatable.kt
NativePlatform+android.kt
NativePlatform+insets.kt
NativePlatform+listener.kt
UnistylesModule.kt
UnistylesPackage.kt
babel.config.js
build-components.js
components/
native/
ActivityIndicator/
package.json
Animated/
package.json
FlatList/
package.json
Image/
package.json
ImageBackground/
package.json
KeyboardAvoidingView/
package.json
NativeText/
package.json
NativeView/
package.json
Pressable/
package.json
RefreshControl/
package.json
SafeAreaView/
package.json
ScrollView/
package.json
SectionList/
package.json
Switch/
package.json
Text/
package.json
TextInput/
package.json
TouchableHighlight/
package.json
TouchableOpacity/
package.json
View/
package.json
VirtualizedList/
package.json
cxx/
common/
Breakpoints.h
Helpers.h
UnistylesConstants.h
converters/
BackgroundImageConverter.cpp
BackgroundImageConverter.h
TransformOriginConverter.cpp
TransformOriginConverter.h
core/
HashGenerator.cpp
HashGenerator.h
HostUnistyle.cpp
HostUnistyle.h
MediaQueries.cpp
MediaQueries.h
RNStyle.h
StyleSheet.h
StyleSheetRegistry.cpp
StyleSheetRegistry.h
Unistyle.h
UnistyleData.h
UnistylesCommitShadowNode.h
UnistylesRegistry.cpp
UnistylesRegistry.h
UnistylesState.cpp
UnistylesState.h
UnistyleWrapper.cpp
UnistyleWrapper.h
hybridObjects/
HybridNavigationBar.cpp
HybridNavigationBar.h
HybridShadowRegistry.cpp
HybridShadowRegistry.h
HybridStatusBar.cpp
HybridStatusBar.h
HybridStyleSheet.cpp
HybridStyleSheet.h
HybridUnistylesRuntime.cpp
HybridUnistylesRuntime.h
NativePlatform.h
parser/
Parser.cpp
Parser.h
shadowTree/
ShadowLeafUpdate.h
ShadowTrafficController.h
ShadowTreeManager.cpp
ShadowTreeManager.h
ios/
Equatable.swift
Extensions.swift
NativePlatform.swift
NativePlatform+ios.swift
NativePlatform+keyboard.swift
NativePlatformListener+ios.swift
Unistyles.h
UnistylesModuleOnLoad.h
UnistylesModuleOnLoad.mm
nitro.json
nitrogen/
generated/
.gitattributes
android/
c++/
JColorScheme.hpp
JDimensions.hpp
JFunc_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime.hpp
JFunc_void_UnistylesNativeMiniRuntime.hpp
JHybridNativePlatformSpec.cpp
JHybridNativePlatformSpec.hpp
JInsets.hpp
JOrientation.hpp
JUnistyleDependency.hpp
JUnistylesNativeMiniRuntime.hpp
kotlin/
com/
margelo/
nitro/
unistyles/
ColorScheme.kt
Dimensions.kt
Func_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime.kt
Func_void_UnistylesNativeMiniRuntime.kt
HybridNativePlatformSpec.kt
... 271 moreFAQ
react-native-unistyles is a Claude Code plugin with 2 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes react-native-unistyles-v3, unistyles-v2-to-v3-migration. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is react-native-unistyles?
- Level up your React Native StyleSheet
- How do I install react-native-unistyles?
- Run these in Claude Code: npx -y skills add jpudysz/react-native-unistyles --agent claude-code. Then prompt normally.
- Does react-native-unistyles auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is react-native-unistyles free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.