---
name: react-native-mobile
description: "Build React Native apps: navigation, Expo modules, native APIs, and OTA updates. Scaffolds React Native screens with React Navigation, integrates Expo modules, handles native permissions, configures Expo EAS for OTA updates, and writes Jest/Detox tests for mobile UI."
license: MIT
---

# React Native Mobile Pro

A focused assistant for building production React Native apps on the Expo toolchain. It scaffolds navigation, wires up native device APIs through Expo modules, sets up EAS for over-the-air updates, and generates tests with Jest and Detox. Aimed at mobile engineers who want idiomatic, TypeScript-first code rather than boilerplate they have to rewrite.

## When to use it

- Starting a new screen and you want it wired into a typed navigator instead of hand-rolling route params.
- Adding a native capability — camera, location, notifications, secure storage — and you need the permission flow plus runtime checks done correctly on both platforms.
- Moving from `expo publish` thinking to a real EAS Build + EAS Update pipeline with channels.
- Backfilling tests on an existing screen and you want a sensible Detox or React Native Testing Library starting point.

## What it does

- **Navigation**: generates stacks, tabs, and nested navigators using `@react-navigation/native` with `createNativeStackNavigator` / `createBottomTabNavigator`, and a typed `RootStackParamList` so `useNavigation` and `useRoute` are fully inferred.
- **Expo modules**: integrates `expo-camera`, `expo-location`, `expo-image-picker`, `expo-notifications`, `expo-secure-store`, and friends — including the matching `usePermissions()` hooks and `requestPermissionsAsync()` calls.
- **Permissions config**: edits `app.json` / `app.config.ts` `infoPlist` (iOS usage strings) and Android `permissions`, so prebuild produces correct native manifests.
- **OTA updates**: configures `eas.json` build profiles, `expo-updates`, and `runtimeVersion`, then sets up `eas update --branch` against named channels.
- **Tests**: scaffolds RNTL component tests (`render`, `screen`, `fireEvent`) under Jest with `jest-expo`, and end-to-end Detox specs with `device` / `element` / `by`.

## Example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/react-native-mobile/SKILL.md https://claudeskil.com/skills/react-native-mobile/SKILL.md

# then, in a chat:
"Add a Profile tab with a typed route param userId, and gate it
 behind expo-secure-store for the auth token."

# OTA release once a feature is merged:
eas update --branch production --message "fix profile crash"
```

## Tips & gotchas

- **`runtimeVersion` is the contract for OTA.** A JS-only change ships via `eas update`; anything touching native code (new Expo module, SDK bump) requires a new build because the runtime version no longer matches.
- **Permissions need both a string and a runtime request.** An iOS `NSCameraUsageDescription` without a `requestCameraPermissionsAsync()` call still gets you rejected at review or silently denied.
- **Detox runs on a release-style build**, not Expo Go — budget for `eas build` or a local prebuild before E2E passes.
- Prefer `app.config.ts` over `app.json` when you need env-driven channels.

## FAQ

**Does this work with bare React Native, or only Expo?** It targets the Expo-managed and prebuild workflows. EAS and `expo-updates` features assume Expo is in the project.

**Can it migrate me off the legacy classic updates?** Yes — it replaces classic publish with `expo-updates` + EAS Update channels and updates `eas.json` accordingly.

**Jest or Detox?** Both. RNTL/Jest for component logic, Detox for full-device flows.