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 setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
MCP get_skill({ skillId: "react-native-brownfield-migration-9ae5f1e2" })Use this skill with your agent
Create a free account and connect via MCP
# 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). 6. For startup/runtime verification, use `agent-device` to open the host app, navigate to the RN surface, capture snapshots/screenshots, and collect device evidence. If it is missing and verification needs it, install it through the environment's approved/trusted path or ask the user to install or enable it. ## 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
Related Skills
More skills in Mobile App Development
Android Design Guidelines
Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.
Android Java Skill
Android Java development with MVVM, ViewBinding, and Espresso testing
Android Kotlin
Android Kotlin development with Coroutines, Jetpack Compose, Hilt, and MockK testing
Appium Skill
Generates production-grade Appium mobile automation scripts for Android and iOS in Java, Python, or JavaScript. Supports real device and emulator testing locally and on TestMu AI cloud with 100+ real devices. Use when the user asks to automate mobile apps, test on Android/iOS, write Appium tests, or mentions "Appium", "mobile testing", "real device", "app automation". Triggers on: "Appium", "mobile test", "Android test", "iOS test", "real device", "app automation", "UiAutomator", "XCUITest driver", "TestMu", "LambdaTest".
Apple Appstore Reviewer
Serves as a reviewer of the codebase with instructions on looking for Apple App Store optimizations or rejection reasons.
App Rejection Recovery
When the user's app or update was rejected by Apple App Review or Google Play Review and they need to diagnose why, fix it, and resubmit fast. Use when the user mentions "app rejected", "App Review rejection", "guideline violation", "Apple rejected my app", "Google Play rejected", "Play policy violation", "Resolution Center", "metadata rejection", "binary rejection", "guideline 2.1", "guideline 4.3", "guideline 5.1.1", "Sign in with Apple required", "Apple ID rejection", "Play Store suspension", "appeal", "I need to respond to App Review", or "expedited review". For pre-submission listing health, see aso-audit. For metadata-only fixes, see metadata-optimization.
Explore Other Categories
Skills from other categories with shared topics
GitHub
GitHub patterns using gh CLI for pull requests, stacked PRs, code review, branching strategies, and repository automation. Use when working with GitHub PRs, merging strategies, or repository management tasks.
GitHub Actions
GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts. Use when setting up CI build pipelines or downloading GitHub Actions artifacts via gh CLI and GitHub API.
.NET/C# Best Practices
Ensure .NET/C# code meets best practices for the solution/project.