---
name: react-native-new-architecture-migration
description: "Migrate React Native apps and native modules to Fabric, TurboModules, and bridgeless JSI on RN 0.82+. Migrates React Native apps to the New Architecture: converts legacy NativeModules to TurboModules with TypeScript/Flow spec files and Codegen, ports ViewManagers to Fabric components via codegenNativeComponent, and wires up bridgeless interop layers. Covers newArchEnabled in gradle.properties and RCTNew­ArchEnabled, Codegen spec naming (Native*/*NativeComponent), supportsLegacyInterop flags, and validating Fabric host components on RN 0.82/0.85 where the legacy bridge is removed."
license: MIT
---

# RN New Architecture Migrator

Migrates React Native apps and native modules off the legacy bridge onto the New Architecture: TurboModules, Fabric, and bridgeless JSI. It works through your project module by module — generating spec files, wiring up Codegen, and porting native code on both iOS and Android — so you can ship on RN 0.82+ where the old architecture is no longer the default. Built for app teams and native-module maintainers who need a methodical migration rather than a rewrite.

## When to use it

- You're upgrading to RN 0.81/0.82+ and a third-party or in-house native module breaks under `newArchEnabled=true`.
- You have a custom `NativeModule` (Java/Kotlin/Obj-C) you want to expose as a TurboModule with a typed JS interface.
- You maintain a custom view backed by a `ViewManager` / `RCTViewManager` and need a Fabric component.
- You enabled the New Architecture and hit interop-layer warnings or runtime crashes from unmigrated modules.

## How it works

The skill follows the Codegen contract. For modules, it authors a spec named `Native<Name>.ts` that imports `TurboModule` and registers via `TurboModuleRegistry.getEnforcing<Spec>('Name')`. For views, it writes `<Name>NativeComponent.ts` using `codegenNativeComponent<NativeProps>` with `ViewProps`, `Int32`, `Float`, `DirectEventHandler`, and `BubblingEventHandler` types.

It then sets `codegenConfig` in `package.json` (`name`, `type: modules | components | all`, `jsSrcsDir`, plus the Android `android.javaPackageName`), flips `newArchEnabled=true` in `android/gradle.properties`, and on iOS aligns the Podfile / `RCT_NEW_ARCH_ENABLED` so `pod install` runs Codegen. Native code is regenerated against the emitted `Native<Name>Spec` (Android) and `<Name>SpecJSI` / `RCTComponentViewProtocol` (iOS), with the bridgeless interop layer left in place for modules not yet ported.

## Example

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

# then, in your RN project:
claude "migrate src/native/Calendar to a TurboModule"
```

Generated spec (`NativeCalendar.ts`):

```ts
import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  getEvents(day: string): Promise<string[]>;
  addEvent(title: string, date: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('Calendar');
```

## Tips & gotchas

- Codegen only discovers specs matching the `Native*` / `*NativeComponent` naming convention inside `jsSrcsDir` — misnamed files are silently skipped.
- TurboModule specs reject `any`, plain `object`, and most union types; stick to `number`, `string`, `boolean`, arrays, and `Object` typedefs.
- After changing `codegenConfig`, clean generated artifacts (`build/generated/source/codegen` on Android, the Pods Codegen output on iOS) before rebuilding, or you'll link stale interfaces.
- The interop layer keeps legacy modules working under bridgeless, but constants-as-properties and synchronous calls behave differently — verify those paths.

## FAQ

**Do I have to migrate everything at once?**
No. The bridgeless interop layer runs unmigrated `NativeModules` and `ViewManagers` alongside Fabric/TurboModules, so you can migrate incrementally.

**JS-only app with no native code?**
Just enabling `newArchEnabled` is usually enough; this skill mainly earns its keep when you own native modules or views, or depend on ones that haven't migrated.

**Flow or TypeScript for specs?**
Both are supported by Codegen. The skill defaults to TypeScript but will emit Flow specs if your codebase uses Flow.