New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Hz React Native Expo

by meta-quest in meta-quest/agentic-tools

Build and iterate on React Native apps for Meta VR / Horizon OS with Expo.

Apache-2.0Auto-check passedMobile

Install Hz React Native Expo

skills CLI
$ npx skills add meta-quest/agentic-tools --skill hz-react-native-expo -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install meta-quest/agentic-tools hz-react-native-expo --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/meta-quest/agentic-tools.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hz-react-native-expo .claude/skills/hz-react-native-expo && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hz-react-native-expo
GitHub stars
215
Token cost
~2.8k tokens
SKILL.md length
1,159 words
Files
4 (incl. references)
Skills in repo
34
Repo updated
First seen
Licence
Apache-2.0

At a glance

Build and iterate on React Native apps for Meta VR / Horizon OS with Expo.

  • Works in 8 steps: Install Expo Go on the headset → Start the Metro dev server (bundle URL) → Open the bundle URL in Expo Go → …
  • The user wants to build
  • SKILL.md covers Two ways to run on the headset, Prerequisites, Path A — Fast loop with Expo… and Path B — Full setup with…, plus 4 more sections
  • Calls npx, expo and npm

What it does

Hz React Native Expo is an agent skill from meta-quest/agentic-tools. Build and iterate on React Native apps for Meta VR / Horizon OS with Expo. Covers the fast dev loop — install Expo Go from the Meta Horizon Store, run a Metro dev server, load its bundle URL on the headset, and get live Fast Refresh — plus the full development-build path with the expo-horizon-core config plugin, prebuild, Quest product flavors, and the Horizon-forked libraries (location, notifications, IAP). Use when the user wants to build or run a Meta VR app in React Native/Expo, load a JS bundle URL on a…

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/dev-loop.md`, `references/expo-horizon-core-setup.md` and `references/horizon-libraries.md`).

It sits in Mobile, covering Cross-platform mobile apps. It works with Expo, React Native and Android. The repository describes itself as: Agent Skills for Meta Quest/Horizon OS VR Development. The licence is Apache-2.0.

When your agent uses it

  • The user wants to build
  • Run a Meta VR app in React Native/Expo
  • Load a JS bundle URL on a headset
  • Set up expo-horizon-core

Example prompts

  • “/hz-react-native-expo”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): Read, Bash(npx:*), Bash(npm:*), Bash(yarn:*), Bash(expo:*), Bash(metavr:*), Bash(hzdb:*)

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Install Expo Go on the headset
  2. Start the Metro dev server (bundle URL)
  3. Open the bundle URL in Expo Go
  4. Edit and watch it live
  5. Add and configure expo-horizon-core
  6. Prebuild and wire up product flavors
  7. Build, install, and run the dev client
  8. Horizon-forked libraries

What it can do on your machine

Read from SKILL.md and the folder at commit 3a8553d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Bash(npx:*)
    • Bash(npm:*)
    • Bash(yarn:*)
    • Bash(expo:*)
    • Bash(metavr:*)
    • Bash(hzdb:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • expo
    • npm
    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • developers.meta.com
    • meta.com
    • oss.callstack.com
    • npmjs.com
    • docs.expo.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Hz React Native Expo loads about 2.8k tokens when it runs, and up to ~6.2k if it reads all its reference files. Until then it costs about 174 tokens; SKILL.md has 1,159 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~174
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from meta-quest/agentic-tools at commit 3a8553d, republished under its Apache-2.0 licence (© meta-quest). 1,159 words, ~2,788 tokens.

Download SKILL.mdSave it as .claude/skills/hz-react-native-expo/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
hz-react-native-expo
description
Build and iterate on React Native apps for Meta VR / Horizon OS with Expo. Covers the fast dev loop — install Expo Go from the Meta Horizon Store, run a Metro dev server, load its bundle URL on the headset, and get live Fast Refresh — plus the full development-build path with the expo-horizon-core config plugin, prebuild, Quest product flavors, and the Horizon-forked libraries (location, notifications, IAP). Use when the user wants to build or run a Meta VR app in React Native/Expo, load a JS bundle URL on a headset, set up expo-horizon-core, or get live reload on device. Build path: Standard Android with React Native; use hz-quest-verify-first if the path is unclear.
allowed-tools
Read, Bash(npx:*), Bash(npm:*), Bash(yarn:*), Bash(expo:*), Bash(metavr:*), Bash(hzdb:*)
license
Apache-2.0

React Native on Meta VR with Expo

Build React Native apps for Meta VR / Horizon OS using Expo — the tooling Meta recommends for React Native on Meta VR. This skill focuses on the development loop: get your JS running on the headset and iterating with live reload, then graduate to a full Meta VR development build when you need native Horizon features.

A Meta VR RN app renders as a 2D panel in Horizon OS. This is Android app development, so the headset-setup, ADB, and device basics live in other skills — this skill references them instead of repeating them (see hz-new-project-creation for developer-mode and dashboard setup, metavr-cli for device/ADB commands, and portal for the Android build toolchain).

Two ways to run on the headset

There are two runtimes, and picking the right one is the most important decision. Both load a JS bundle URL from a Metro dev server and Fast-Refresh on save; they differ in what native code is available.

Expo Go (fastest loop)Development build (full control)
What it isPrebuilt app from the Horizon StoreA dev client you build, with your native config
InstallOne tap from the Store (link below)expo run:android --variant questDebug
Loads a bundle URLYesYes
Live Fast RefreshYesYes
expo-horizon-core config (App ID, panel size)❌ not applied (prebuild-time)✅ applied
Horizon-forked native libs / custom native modules❌✅
Best forPure-JS + standard Expo module iterationReal Meta VR apps: App ID, panel size, notifications, location, IAP

Rule of thumb: start in Expo Go for the tightest UI/logic loop, then move to a development build the moment you add expo-horizon-core, a Horizon-forked library, or any custom native module. The dev build is also a dev client, so the bundle-URL + Fast-Refresh loop is identical — you just rebuild native occasionally.

Prerequisites

  • Headset in developer mode, USB (or Wi-Fi) debugging on, and visible to metavr device list. Full walkthrough: hz-new-project-creation and metavr-cli.
  • Node.js 20+, and the Expo CLI via npx expo (no global install needed).
  • metavr for device/ADB/screenshots/logs: metavr --version (standalone binary on PATH; or npx -y metavr --version with no install).

Verify the device first:

bash
metavr device list          # or: npx -y metavr device list

Path A — Fast loop with Expo Go + a bundle URL

The quickest way to see your app on the headset. Nothing to build.

1. Install Expo Go on the headset

Open the Meta Horizon Store on the headset (or the web store) and install Expo Go:

https://www.meta.com/experiences/expo-go/25322546364000780/

You can also open that link in the Meta Horizon phone app or on the web and click Install to push it to your headset.

2. Start the Metro dev server (bundle URL)

In your Expo project on your dev machine:

bash
npx expo start                 # Metro on :8081; prints a QR + an exp:// bundle URL
# If the headset is on a different network / LAN is blocked:
npx expo start --tunnel        # bundle URL over the internet (exp://...exp.direct)

Metro prints a bundle URL like exp://<LAN-IP>:8081 (LAN) or an exp://<id>.exp.direct URL (tunnel). That URL is what Expo Go loads.

3. Open the bundle URL in Expo Go

Three ways, easiest first:

  • Deep-link it (no typing) — routes straight to Expo Go:
    bash
    metavr adb shell am start -a android.intent.action.VIEW -d "exp://<LAN-IP>:8081"
  • Type it in Expo Go — launch Expo Go on the headset, choose Enter URL manually, and type the exp://… URL with the controller keyboard.
  • Scan the QR — if you have Expo Go / the camera handy.
4. Edit and watch it live

Save a file → Fast Refresh repaints the headset with no reload. Press r in the Metro terminal (or use the in-app dev menu) for a full reload. This is the "automatic updates / live display of changes" loop — the headset is just another preview surface, like a browser tab for the web.

Expo Go caveats (details in references/dev-loop.md):

  • SDK must match. Expo Go runs only projects whose Expo SDK matches the installed Expo Go. npx expo install --fix realigns deps to the project's current SDK (it doesn't switch SDKs); to fix a mismatch, upgrade the project's Expo SDK or install the matching Expo Go build.
  • Config-plugin settings don't apply. horizonAppId, panel size, product flavors, etc. are prebuild-time and are ignored in Expo Go.
  • No Horizon-forked/custom native modules. Use a development build (Path B).

Path B — Full setup with expo-horizon-core (development build)

Use this for real Meta VR apps: it sets your Horizon App ID, panel size, and gives you the Horizon-forked native libraries. The result is a development build — a dev client you install once that then loads bundle URLs and Fast-Refreshes exactly like Expo Go, but with your native config baked in.

Show full SKILL.md (447 more words)Show less
1. Add and configure expo-horizon-core
bash
npm install expo-horizon-core     # or: yarn add expo-horizon-core
npx expo install expo-dev-client  # dev-client runtime + launcher (Enter URL screen)

Add the config plugin to app.json (or app.config.js/.ts):

json
{
  "expo": {
    "plugins": [
      ["expo-horizon-core", {
        "horizonAppId": "DEMO_APP_ID",
        "defaultHeight": "640dp",
        "defaultWidth": "1024dp",
        "supportedDevices": "quest2|questpro|quest3|quest3s",
        "disableVrHeadtracking": false,
        "orientation": "default"
      }]
    ]
  }
}

Get a real horizonAppId from the developer dashboard (https://developers.meta.com). Full option reference and gotchas: references/expo-horizon-core-setup.md.

2. Prebuild and wire up product flavors

expo-horizon-core uses Android product flavors so one project builds for both Meta VR and mobile:

bash
npx expo prebuild --clean

Add build scripts to package.json:

json
{
  "scripts": {
    "quest": "expo run:android --variant questDebug",
    "quest:release": "expo run:android --variant questRelease",
    "android": "expo run:android --variant mobileDebug",
    "android:release": "expo run:android --variant mobileRelease"
  }
}
3. Build, install, and run the dev client

With the headset connected:

bash
yarn quest        # builds the questDebug dev client, installs it, starts Metro,
                  # and the app auto-connects to the bundle URL + Fast Refreshes

After the first build, JS edits Fast-Refresh with no rebuild. The dev client's launcher screen also lets you enter or scan a bundle URL manually — the same loop as Expo Go, for your custom client. Rebuild native only when native deps or config change (see references/dev-loop.md).

4. Horizon-forked libraries

A few libraries need Horizon-specific forks; guard platform-specific code with isHorizonDevice() from expo-horizon-core. Covered in references/horizon-libraries.md:

  • expo-horizon-location — location (Quest has no GPS; limited)
  • expo-horizon-notifications — user notifications
  • expo-iap — in-app purchases via the Meta Horizon Billing SDK

Driving the loop with an agent

For an autonomous edit loop, use metavr as the feedback oracle (see metavr-cli and hz-vr-debug):

bash
metavr adb logcat --follow --tag ReactNative   # Metro/JS logs + red-box errors
metavr capture screenshot -o screen.png

Compile errors surface in the Metro terminal and as an on-device red box; a missing dependency shows up as a bundling 500.

Publishing

A questRelease build is a normal signed Android app (APK/AAB). Package it, then submit to the Meta Horizon Store — see hz-store-submit for the end-to-end submission flow and ovr-platform-util upload. For production over-the-air JS updates to installed builds, use EAS Update (out of scope for the dev loop).

Gotchas

  • Expo Go SDK mismatch is the #1 failure — a confusing device-side error. npx expo install --fix realigns deps to the project's current SDK; to actually match Expo Go, upgrade the project's Expo SDK or install a matching Expo Go build.
  • Expected too much from Expo Go — config-plugin settings and Horizon-forked native libs need a development build (Path B). If the panel size or App ID "doesn't take", you're in Expo Go.
  • LAN can't reach the headset — use npx expo start --tunnel.
  • Fast Refresh loads but doesn't update — the bundle can load while the HMR socket fails; confirm the URL scheme/host and see references/dev-loop.md.
  • Wrong flavor — mobileDebug installs a phone build that won't behave as a Quest panel; use questDebug/questRelease for the headset.
  • Package name is permanent — set com.company.app before the first install; changing it later causes reinstalls/data loss.

References

External docs

© meta-quest, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/hz-react-native-expo of meta-quest/agentic-tools.

  • SKILL.md
  • references/dev-loop.md
  • references/expo-horizon-core-setup.md
  • references/horizon-libraries.md

Open the folder on GitHubat commit 3a8553d

Compare with similar skills

Hz React Native Expo next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Hz React Native Expo compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Hz React Native Expo this skillmeta-quest/agentic-tools215—~2.8kAutomated safety check: PassApache-2.0
Expo Tailwind SetupCherryHQ/cherry-studio-app4k8 repos~3kAutomated safety check: PassMIT
Screenmapaleqsio/screenmap243—~7.2kAutomated safety check: PassMIT
Expo Brownfield Integrationmweinbach/agent-coworker1562 repos~900Automated safety check: NotesCustom licence
Expo UIarcboxlabs/linkcode156—~1.2kAutomated safety check: PassMIT
Simfleetentropyconquers/simfleet118—~1.5kAutomated safety check: PassMIT

Similar skills

  • Expo Tailwind Setup

    CherryHQ/cherry-studio-app

    Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

    4k GitHub starsUsed in 8 repos~3k tokens
    MobileAuto-check passed

  • Screenmap

    aleqsio/screenmap

    Generate a visual navigation map of an Expo / React Native or NativeScript app.

    243 GitHub stars~7.2k tokensUpdated 5 days ago
    MobileAuto-check passed

  • Expo Brownfield Integration

    mweinbach/agent-coworker

    Helps add Expo and React Native to an existing native iOS or Android app, and choose between a prebuilt AAR or XCFramework and a fully integrated build.

    156 GitHub starsUsed in 2 repos~900 tokens
    MobileAuto-check: notes

  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    156 GitHub stars~1.2k tokensUpdated 11 days ago
    MobileAuto-check passed

  • Simfleet

    entropyconquers/simfleet

    Operate a simfleet device fleet: slimmed iOS simulators and Android emulators, parallel React Native worktree lanes with leased Metro ports, the native build cache, and per-agent device claims.

    118 GitHub stars~1.5k tokensUpdated 10 days ago
    MobileAuto-check passed

  • Code Review React Native

    talsec/Free-RASP-ReactNative

    Performs strict code reviews on React Native plugin projects covering TypeScript, the Kotlin (Android) and Swift (iOS) native bridges, and the Expo config plugin.

    175 GitHub stars~3.7k tokensUpdated 4 days ago
    MobileAuto-check passed

More from meta-quest/agentic-tools

All 34 skills in this repo

  • Hz Android 2D Porting

    meta-quest/agentic-tools

    Guides porting existing Android 2D apps to Meta VR and Horizon OS — input adaptation, panel layout, and design requirements.

    215 GitHub stars~2.1k tokensUpdated 15 days ago
    Auto-check passed

  • Hz API Upgrade

    meta-quest/agentic-tools

    Upgrades Meta VR apps to newer Horizon OS SDK versions — migration guides, deprecated API replacements, changelog.

    215 GitHub stars~1.8k tokensUpdated 15 days ago
    Auto-check passed

  • Hz Iwsdk Webxr

    meta-quest/agentic-tools

    Builds WebXR experiences for Meta VR and Horizon OS using the Immersive Web SDK (IWSDK) — ECS architecture, Three.js integration, spatial UI.

    215 GitHub stars~3k tokensUpdated 15 days ago
    Auto-check passed

  • Hz Metavrx Layout SDK

    meta-quest/agentic-tools

    Build multi-window Meta Horizon OS experiences with the MetaVrx Layout SDK in Jetpack Compose or React Native.

    215 GitHub stars~855 tokensUpdated 15 days ago
    Auto-check passed

  • Hz New Project Creation

    meta-quest/agentic-tools

    Scaffolds new Meta VR and Horizon OS projects after the build path is selected — Standard Android, Meta Spatial SDK, Unity, Unreal, or WebXR.

    215 GitHub stars~2.3k tokensUpdated 15 days ago
    Auto-check passed

  • Hz Perfetto Debug

    meta-quest/agentic-tools

    Analyzes Meta VR and Horizon OS VR performance using Perfetto traces — frame timing, CPU/GPU bottlenecks, render pass analysis.

    215 GitHub stars~2.8k tokensUpdated 15 days ago
    Auto-check passed

Works with

Categories

Questions about Hz React Native Expo

What does Hz React Native Expo do?

Build and iterate on React Native apps for Meta VR / Horizon OS with Expo. Hz React Native Expo is an agent skill from meta-quest/agentic-tools. Build and iterate on React Native apps for Meta VR / Horizon OS with Expo.

When should I use Hz React Native Expo?

Hz React Native Expo fits situations like: the user wants to build; run a Meta VR app in React Native/Expo; load a JS bundle URL on a headset; set up expo-horizon-core.

How do I install Hz React Native Expo in Claude Code?

Run `npx skills add meta-quest/agentic-tools --skill hz-react-native-expo -a claude-code`. Or copy the skill folder (skills/hz-react-native-expo in meta-quest/agentic-tools) into .claude/skills/hz-react-native-expo in your project. Claude Code loads it when a task matches its description.

How do I install Hz React Native Expo in Codex?

Run `npx skills add meta-quest/agentic-tools --skill hz-react-native-expo -a codex`. Or copy the skill folder (skills/hz-react-native-expo in meta-quest/agentic-tools) into .agents/skills/hz-react-native-expo in your project. Codex loads it when a task matches its description.

Can I use Hz React Native Expo in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add meta-quest/agentic-tools --skill hz-react-native-expo -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hz-react-native-expo, .gemini/skills/hz-react-native-expo, .github/skills/hz-react-native-expo and .opencode/skills/hz-react-native-expo in your project.

What does Hz React Native Expo need to run?

Going by SKILL.md and its folder, Hz React Native Expo needs the command-line tools its instructions call (npx, expo, npm and yarn). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Bash(npx:*), Bash(npm:*), Bash(yarn:*), Bash(expo:*), Bash(metavr:*), Bash(hzdb:*).

Does Hz React Native Expo access the network?

SKILL.md names 5 domains. As links in the text: developers.meta.com, meta.com, oss.callstack.com, npmjs.com and docs.expo.dev. This is read from the text; nothing was executed.

Is Hz React Native Expo safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Hz React Native Expo use?

Hz React Native Expo is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Hz React Native Expo use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.4k tokens, read only when the agent opens those files.

What are the alternatives to Hz React Native Expo?

Skills that share tags, products or a category with Hz React Native Expo: Expo Tailwind Setup (CherryHQ/cherry-studio-app, 4k stars), Screenmap (aleqsio/screenmap, 243 stars), Expo Brownfield Integration (mweinbach/agent-coworker, 156 stars) and Expo UI (arcboxlabs/linkcode, 156 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hz React Native Expo?

meta-quest (a GitHub organization) maintains it in meta-quest/agentic-tools, which has 215 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 24, 2026.

Source: meta-quest/agentic-tools on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.