What happened?
HeroUI Native components that use Animated.createAnimatedComponent(Pressable) (Button, Switch, Checkbox) render completely unstyled with Uniwind Pro 1.1.0. The className prop is not being translated into React Native styles on animated Pressable components.
Regular Pressable and View components with the exact same Tailwind classes render correctly. Theme colors resolve properly via useThemeColor(). Non-animated HeroUI components (Surface, Card, Alert, Separator, Chip) render with full styling.
Proof:
- Manual
<Pressable className="bg-accent h-[48px] px-4 rounded-3xl"> → ✅ renders styled
- HeroUI
<Button variant="primary"> (uses AnimatedPressable internally) → ❌ renders as plain text
- Both use identical classes:
bg-accent h-[48px] px-4 gap-2 rounded-3xl flex-row items-center justify-center
This was tested on a fresh Expo 54 project (not a monorepo) with heroui-native@1.0.2.
Steps to Reproduce
- Create fresh Expo app:
npx create-expo-app@latest test --template blank-typescript
- Install heroui-native and peer deps per Quick Start docs
- Install Uniwind Pro:
"uniwind": "npm:uniwind-pro@^1.1.0" + react-native-nitro-modules
- Configure metro.config.js with withUniwindConfig (outermost wrapper)
- Configure global.css with
@import 'heroui-native/styles' and @source './node_modules/heroui-native/lib'
- Add babel.config.js with
react-native-worklets/plugin
- Wrap app with GestureHandlerRootView + HeroUINativeProvider
- Add both a manual Pressable with
className="bg-accent h-[48px] px-4 rounded-3xl" and a HeroUI <Button variant="primary"><Button.Label>Test</Button.Label></Button>
- Run
npx expo prebuild --clean && npx expo run:ios
- Manual Pressable is styled, HeroUI Button is plain text
Snack or Repository Link (Optional)
No response
Uniwind version
1.1.0
React Native Version
0.81.5
Platforms
iOS
Expo
Yes
Additional information
What happened?
HeroUI Native components that use
Animated.createAnimatedComponent(Pressable)(Button, Switch, Checkbox) render completely unstyled with Uniwind Pro 1.1.0. The className prop is not being translated into React Native styles on animated Pressable components.Regular
PressableandViewcomponents with the exact same Tailwind classes render correctly. Theme colors resolve properly viauseThemeColor(). Non-animated HeroUI components (Surface, Card, Alert, Separator, Chip) render with full styling.Proof:
<Pressable className="bg-accent h-[48px] px-4 rounded-3xl">→ ✅ renders styled<Button variant="primary">(uses AnimatedPressable internally) → ❌ renders as plain textbg-accent h-[48px] px-4 gap-2 rounded-3xl flex-row items-center justify-centerThis was tested on a fresh Expo 54 project (not a monorepo) with heroui-native@1.0.2.
Steps to Reproduce
npx create-expo-app@latest test --template blank-typescript"uniwind": "npm:uniwind-pro@^1.1.0"+ react-native-nitro-modules@import 'heroui-native/styles'and@source './node_modules/heroui-native/lib'react-native-worklets/pluginclassName="bg-accent h-[48px] px-4 rounded-3xl"and a HeroUI<Button variant="primary"><Button.Label>Test</Button.Label></Button>npx expo prebuild --clean && npx expo run:iosSnack or Repository Link (Optional)
No response
Uniwind version
1.1.0
React Native Version
0.81.5
Platforms
iOS
Expo
Yes
Additional information