react-native-brownfield-migration
Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial…
Skill by Callstack
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/bidah-react-native-brownfield-migration
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/react-native-brownfield-migration
What's inside
- Skill name
react-native-brownfield-migration- Description
- Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
- License
- MIT
- Metadata
- tags: react-native, brownfield, expo, bare, ios, android, xcframework, aar, native-integration · author: Callstack
- Instructions
- 106 lines in SKILL.md · view on GitHub
Files (12)
- SKILL.md
- openai.yaml · agents/
- bare-android-aar-generation.md · references/
- bare-android-native-integration.md · references/
- bare-ios-native-integration.md · references/
- bare-ios-xcframework-generation.md · references/
- bare-quick-start.md · references/
- expo-android-integration.md · references/
- expo-create-app.md · references/
- expo-ios-integration.md · references/
- expo-quick-start.md · references/
- quick-start.md · references/
SKILL.md (first lines)
# Migrating to React Native ## Overview Prescriptive workflow for incremental adoption of React Native in existing native apps using `@callstack/react-native-brownfield`, from initial setup through phased host integration. - Expo track - Bare React Native track Use one track per task unless the user explicitly asks for migration or comparison. ## Migration Strategy Use this strategy for brownfield migration planning and execution: 1. Assess app state and select Expo or bare path. 2. Perform initial setup with `@callstack/react-native-brownfield`. 3. Package RN artifacts (`XCFramework`/`AAR`) from the RN source app. 4. Integrate one RN surface into the host app and validate startup/runtime. 5. Repeat integration by feature/screen for incremental rollout. ## Agent Guardrails (Global) Apply these rules across all reference files: 1. Select one path first (Expo or bare) and do not mix steps. 2. Use placeholders from the docs (`<framework_target_name>`, `<android_module_name>`, `<registered_module_name>`) and resolve from project files. 3. Validate each packaging command before moving to host integration. 4. Prefer official docs for long platform snippets and CLI option details. 5. Keep host apps isolated from direct React Native APIs when possible (facade approach). ## Canonical Docs - [Quick Start](https://oss.callstack.com/react-native-brownfield/docs/getting-started/quick-start.md) - [Expo Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/expo.md) - [iOS Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/ios.md) - [Android Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/android.md) - [Brownfield CLI](https://oss.callstack.com/react-native-brownfield/docs/cli/brownfield.md) - [Guidelines](https://oss.callstack.com/react-native-brownfield/docs/guides/guidelines.md) - [Troubleshooting](https://oss.callstack.com/react-native-brownfield/docs/guides/troubleshooting.md) ## Path Selection Gate (Must Run First) Before selecting any reference file, classify the project: 1. If no React Native app exists yet, use Expo creation path: - [expo-create-app.md][expo-create-app] -> [expo-quick-start.md][expo-quick-start] 2. If React Native app exists, inspect `package.json` and `app.json`: - Expo if `expo` is present or Expo plugin workflow is requested. - Bare RN if native folders and direct RN CLI workflow are used without Expo path requirements. 3. If still unclear, ask one disambiguation question. 4. Continue with exactly one path. ## When to Apply Reference this package when: - Planning incremental migration from native-only apps to React Native or Expo - Creating brownfield integration flows for Expo or bare React Native projects - Performing initial setup with `@callstack/react-native-brownfield` - Generating iOS XCFramework artifacts from a React Native app - Generating and publishing Android AAR artifacts from a React Native app - Integrating generated artifacts into host iOS/Android apps ## Quick Reference | File | Description | |------|-------------| | [quick-start.md][quick-start] | Shared preflight and mandatory path-selection gate | | [expo-create-app.md][expo-create-app] | Scaffold a new Expo app before Expo brownfield setup | | [expo-quick-start.md][expo-quick-start] | Expo plugin setup and packaging readiness | | [expo-ios-integration.md][expo-ios-integration] | Expo iOS packaging and host startup integration | | [expo-android-integration.md][expo-android-integration] | Expo Android packaging, publish, and host integration | | [bare-quick-start.md][bare-quick-start] | Bare React Native baseline setup | | [bare-ios-xcframework-generation.md][bare-ios-xcframework-generation] | Bare iOS XCFramework generation | | [bare-android-aar-generation.md][bare-android-aar-generation] | Bare Android AAR generation and publish | | [bare-ios-native-integration.md][bare-ios-native-integration] | Bare iOS host integration | | [bare-android-native-integration.md][bare-android-native-integration] | Bare Android host integration | ## Problem -> Skill Mapping | Problem | Start With | |---------|------------| | Need path decision first | [quick-start.md][quick-start] | | Need to create a new Expo app for brownfield | [expo-create-app.md][expo-create-app] | | Need Expo brownfield setup and plugin wiring | [expo-quick-start.md][expo-quick-start] | | Need Expo iOS brownfield integration | [expo-ios-integration.md][expo-ios-integration] | | Need Expo Android brownfield integration | [expo-android-integration.md][expo-android-integration] | | Need bare RN baseline setup | [bare-quick-start.md][bare-quick-start] | | Need bare RN iOS XCFramework generation | [bare-ios-xcframework-generation.md][bare-ios-xcframework-generation] | | Need bare RN Android AAR generation/publish | [bare-android-aar-generation.md][bare-android-aar-generation] | | Need bare RN iOS host integration | [bare-ios-native-integration.md][bare-ios-native-integration] | | Need bare RN Android host integration | [bare-android-native-integration.md][bare-android-native-integration] | [quick-start]: references/quick-start.md [expo-create-app]: references/expo-create-app.md [expo-quick-start]: references/expo-quick-start.md [expo-ios-integration]: references/expo-ios-integration.md [expo-android-integration]: references/expo-android-integration.md [bare-quick-start]: references/bare-quick-start.md [bare-ios-xcframework-generation]: references/bare-ios-xcframework-generation.md [bare-android-aar-generation]: references/bare-android-aar-generation.md [bare-ios-native-integration]: references/bare-ios-native-integration.md [bare-android-native-integration]: references/bare-android-native-integration.md
From bidah/react-native-hifi, MIT.
More from bidah/react-native-hifi
- 0.501score
agent-device
bidah
Automates interactions for iOS simulators/devices and Android emulators/devices.
SkillDFreshness: D★ 30Claude Code +9 - 0.498score
callstack-best-practices
Callstack
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
use-dom
bidah
Use when embedding web-only libraries or DOM content in React Native apps, including charts with recharts, syntax highlighting, rich text editors, or any…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
expo-ui-swift-ui
bidah
Use when building iOS-specific UI components using SwiftUI views in Expo, embedding React Native views in SwiftUI with RNHostView, or implementing native iOS…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
expo-api-routes
bidah
Use when building server-side API endpoints in Expo apps, handling backend logic, protecting credentials, connecting to databases, or deploying API routes…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
expo-dev-client
bidah
Use when building custom development clients for Expo apps, integrating custom native modules, using Apple ecosystem features, third-party native SDKs, or…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
expo-ui-jetpack-compose
bidah
Use when building Android-specific UI components using Jetpack Compose views in Expo, implementing LazyColumn scrolling lists, or rendering XML vector…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
expo-tailwind-setup
bidah
Use when setting up or using Tailwind CSS v4 with NativeWind v5 in React Native or Expo projects, configuring universal styling across iOS Android and web, or…
SkillDFreshness: D★ 30Claude Code +9 - 0.496score
building-native-ui
bidah
Use when building user interfaces in React Native or Expo, implementing navigation, layouts, animations, native controls, modals, gesture handling, or styling…
SkillDFreshness: D★ 30Claude Code +9 - 0.492score
software-mansion-best-practices
Software Mansion
Software Mansion's best practices for production React Native apps on the New Architecture.
SkillDFreshness: D★ 30Claude Code +9 - 0.487score
native-data-fetching
bidah
Use when implementing network requests, API calls, data caching, or offline support in React Native or Expo apps, including authentication token management…
SkillDFreshness: D★ 30Claude Code +9 - 0.476score
using-react-native-hifi
bidah
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
SkillDFreshness: D★ 30Claude Code +9
Signals
- Stars
- 30
- Forks
- 2
- Open issues
- 0
- Last commit (this folder)
- Apr 8, 2026 (6 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/bidah/react-native-hifi
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from Callstack
- 0.721score
validate-skills
Callstack
Validates skills in this repo against agentskills.io spec and Claude Code best practices.
SkillCFreshness: C★ 1.7KClaude Code +9 - 0.498score
callstack-best-practices
Callstack
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
SkillDFreshness: D★ 30Claude Code +9
Cite this page
react-native-brownfield-migration skill. Agent Mart. https://agentmart.dev/skills/bidah-react-native-brownfield-migration (last updated 2026-10-24)