Brownfield integration & micro-frontends
draftedconfidence: lowearly: 1/12 of this tier graded so far (0 overturned) — the public scorecard →
recommendation
A scale-stage concern: embed RN into a native app with react-native-brownfield (+ ReactNativeFactory on iOS). For independently-deployable screens / super-apps, look at Granite or Rock.
- add RN screens to an existing native app → react-native-brownfield
- many teams shipping independent bundles → Granite (Toss) / Rock
Low confidence — fast-moving or lightly-vetted domain: treat the pick as a vetted lead and prototype before committing.
Options & tradeoffs
| option | tradeoff |
|---|---|
| react-native-brownfield (Callstack) | embed RN in an existing native app; self-contained iOS init via ReactNativeBrownfield.shared.startReactNative() (wraps RN core's RCTReactNativeFactory) |
| Brownie (@callstack/brownie) | share native↔JS state for brownfield; generates Swift + Kotlin types from .brownie.ts; iOS + Android; stable (v3.13.x, 2026-06) |
| Granite (Toss) | micro-frontend: each screen an independently deployable ~200KB bundle on CDN (ESBuild) |
| Rock (Callstack) | super-apps via micro-frontends + native build caching |
| Expo brownfield (first-party) | SDK 55+: official Expo path for adding Expo/RN to an existing native app (docs.expo.dev/brownfield; `npx brownfield package:ios` XCFramework flow) — the first-party alternative to the Callstack tooling |
Verified notes
For embedding RN into native apps or splitting a super-app — a scale-stage concern; mostly Callstack/Toss tooling (several alpha) plus, since SDK 55, a first-party Expo path. CAPABILITY FLIP (2026-07-10, verified vs the Callstack article body): Expo Updates now works in an ISOLATED brownfield architecture with SDK 55 — OTA for embedded RN screens was previously a known limitation ("that limitation is a thing of the past"); see RB-E-OTA. The same prebuilt-XCFramework flow also cuts hybrid iOS compile times ~39% (Callstack, 2026-07).
Canonical reading
Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.
Production case study migrating a 115M-hits/month homepage from WebView to native RN with a BFF-driven section architecture (~50% TTI improvement, measurable conversion gains). Durable brownfield-integration lessons.
The capability-flip walkthrough behind this entry's note: running EAS/Expo Updates inside an isolated brownfield embed (XCFramework packaging via `npx brownfield package:ios`), which had been a hard limitation of embedded-RN architectures. Read when you need OTA on brownfield screens.
Four hard-won production patterns — brownfield-handoff metrics (Meaningful Render), video-feed jank sequencing, native API bridging, on-device LLM hardware variance. Real-world scale-stage RN guidance.
Sources
- github.com/callstack/react-native-brownfield
- registry.npmjs.org/@callstack/brownie
- docs.expo.dev/brownfield/overview
- callstack.com/blog/how-we-made-hybrid-ios-apps-c…
Depth (in-domain rules) is owned by the engineering-principles skill — this entry is selection breadth.
Related in platform-native: native · media · storage · native-ui · keyboard · payments · games · alt-frameworks