HeroUI Native
Initialize a HeroUI Native project
This article is manually written (md) and AI-optimized (mdx).
Clone heroui-native-example to your local machine, then install dependencies and start.
Clone the Project
git clone https://github.com/heroui-inc/heroui-native-exampleMake sure p cli is installed:
bun install -g ru-yaka/pThen clone the project. It will be automatically placed under ~/.p/projects/ and opened with your IDE (default is cursor, configurable via p config):
p clone heroui-inc/heroui-native-example
Install Dependencies
npm installpnpm installbun installyarn installAllow Build Scripts
After installation, run start. pnpm may block the build script for unrs-resolver:
Run pnpm approve-builds and interactively approve it (press space to select, then Enter). Alternatively, you can directly edit pnpm-workspace.yaml and set it to true.
unrs-resolver is a high-performance module resolver written in Rust. It requires a postinstall script to compile the binary for the corresponding platform.
Start the Project
npm run startpnpm run startbun run startyarn start
You'll notice two dependencies are incompatible with the current expo version (55 at the time of testing).
Fix Dependencies
Stop start, then automatically install the compatible versions for the current expo:
npx -y expo install react-native react-native-workletspnpm dlx expo install react-native react-native-workletsbunx expo install react-native react-native-workletsyarn dlx expo install react-native react-native-worklets
Verify It Runs
Restart, then scan the QR code with Expo Go 55 to test.
The Expo Go version must match the current expo SDK version, otherwise it won't run.
Everything works as expected:
Add as a Template
Add the current project as a template so you can quickly create new projects from it locally (with dependencies already fixed):
p tp add . heroui-nativep template add . heroui-nativep templates add . heroui-native
Create a New Project from the Template
p new my-heroui-native-app -t heroui-nativep n my-heroui-native-app -t heroui-nativep create my-heroui-native-app -t heroui-native
p new <name> quickly creates a project (managed under ~/.p/projects/) and opens it with your configured IDE (default is cursor, configurable via p config). If you forget the template name, leave -t empty for an interactive selection, or use -t <fuzzy_name> for fuzzy search.
How is this guide?
Last updated on