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

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):

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.