skilld
All skills
callstackincubator avatar

/react-native-brownfield-migration

@fa0bad0 official
by Callstack Incubatorcallstackincubator/agent-skills1.7k stars
118

Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using @callstack/react-native-brownfield. Use after the brownfield path has been selected, when setting up the integration, packaging XCFramework or AAR artifacts, or adding React Native surfaces to native hosts.

Ask your Agent

Use this Skill: https://skilld.dev/gh/callstackincubator/agent-skills/react-native-brownfield-migration

This session only. Nothing lands on disk.

referencesexpo-ios-integration.md

≈814 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Skill: Expo iOS Integration

Package Expo app as XCFramework artifacts, link them into host iOS app, and initialize Expo-compatible RN runtime.

Quick Command

npx brownfield package:ios --scheme <framework_target_name> --configuration Release

When to Use

  • User requests Expo iOS brownfield integration
  • Host app must render Expo-backed React Native UI

Prerequisites

  • expo-quick-start.md completed
  • iOS host app builds successfully
  • Framework scheme name resolved (BrownfieldLib by default unless overridden in Expo plugin options)

Agent-Assisted Verification

Use agent-device after the host build succeeds. Read the agent-device skill or CLI help when available before exact commands. 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. Then open the host app, navigate to the Expo-backed RN surface, capture snapshots/screenshots, and collect logs for Debug and Release behavior.

Step-by-Step Instructions

Progress checklist:
- [ ] Package XCFrameworks
- [ ] Link frameworks in host app
- [ ] Configure startup
- [ ] Render RN module
  1. Package iOS artifacts:
    • npx brownfield package:ios --scheme <framework_target_name> --configuration Release
  2. Link artifacts from package output directory (ios/.brownfield/package or .brownfield/ios/package) into host app project:
    • <framework_target_name>.xcframework
    • ReactBrownfield.xcframework
    • hermesvm.xcframework (or hermes.xcframework for older RN)
  3. Initialize runtime in app entrypoint:
ReactNativeBrownfield.shared.bundle = ReactNativeBundle
ReactNativeBrownfield.shared.startReactNative {
    print("React Native has been loaded")
}
ReactNativeBrownfield.shared.ensureExpoModulesProvider()
  1. Forward didFinishLaunchingWithOptions to brownfield handler.
  2. Render RN UI using the module registered in JS (AppRegistry.registerComponent):
    • ReactNativeView(moduleName: "<registered_module_name>")
    • or ReactNativeBrownfield.shared.view(moduleName: "<registered_module_name>", initialProps: nil)

Stop Conditions

Mark complete only if:

  • package command exits with code 0
  • host app builds in Debug and Release
  • selected module renders successfully
  • device evidence is captured with agent-device when possible

Canonical Docs

Common Pitfalls

  • Missing ensureExpoModulesProvider() in Expo startup flow
  • Not forwarding didFinishLaunchingWithOptions
  • Using wrong module name instead of JS-registered component name

Related Skills

Source: SKILL.md on GitHub

Third-party checks

No alerts17d5 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    The skill provides a workflow for migrating native mobile applications to React Native using the @callstack/react-native-brownfield library. It uses standard development tools, package managers, and vendor-provided CLI tools. No malicious patterns, obfuscation, or unauthorized data exfiltration were detected.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer7mo

    8/12 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at fa0bad0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated 2 months ago

Topics

  • react-native
  • brownfield
  • expo
  • ios
  • android
  • xcframework
  • aar
  • native-integration
  • migration

README badge

README badge for callstackincubator/agent-skills/react-native-brownfield-migration

What it does

Guides incremental adoption of React Native or Expo in existing native iOS and Android apps using @callstack/react-native-brownfield, covering initial setup, artifact packaging (XCFramework and AAR), and phased host app integration. Targets brownfield migration workflows where React Native surfaces are introduced into established native codebases.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with both Expo and bare React Native?
Yes. The skill provides separate tracks for Expo and bare React Native migration. You select one path based on your project state and do not mix steps between them.
What platforms does this skill target?
iOS and Android. For iOS it handles XCFramework generation and integration; for Android it handles AAR generation, publishing, and integration.
Can I use this skill to migrate an existing native app incrementally?
Yes. The skill prescribes a phased approach: assess your app, set up React Native via @callstack/react-native-brownfield, package artifacts, integrate one RN surface into the host app, then repeat by feature for incremental rollout.
Do I need to create a new React Native app first?
Only if you don't have one yet. If you're adding React Native to an existing native app, the skill assumes your host app is already present. If starting from scratch, the skill includes a path to scaffold a new Expo app before brownfield setup.
What happens if I'm unsure whether to use Expo or bare React Native?
The skill includes a path-selection gate that runs first. If your project state is ambiguous, the skill asks one disambiguating question before proceeding with exactly one track.

Generated from the current SKILL.md. These answers refresh after source changes.