Help us improve
Share bugs, ideas, or general feedback.
From erne-universal
Guides creation of React Native native modules using Expo Modules API, Turbo Modules, or Fabric Components with TypeScript APIs, Swift iOS, and Kotlin Android implementations.
npx claudepluginhub jubakitiashvili/everything-react-native-expoHow this skill is triggered — by the user, by Claude, or both
Slash command
/erne-universal:native-module-scaffoldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are creating a native module for React Native. This skill guides you through the entire process from TypeScript API design to native implementations.
Creates and modifies Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system.
Guides building and integrating native modules in React Native, covering Turbo Modules, Swift/iOS and Kotlin/Android bridging, and platform APIs.
Guides bridging native platform APIs (Bluetooth, NFC, HealthKit) into React Native using Expo Modules API for iOS (Swift) and Android (Kotlin), plus Turbo Modules. For custom native SDKs or performance code.
Share bugs, ideas, or general feedback.
You are creating a native module for React Native. This skill guides you through the entire process from TypeScript API design to native implementations.
Invoke when:
Simplest approach. Uses expo-modules-core for bridging:
npx create-expo-module my-module
Generated structure:
modules/my-module/
expo-module.config.json
src/MyModuleModule.ts # TypeScript API
ios/MyModuleModule.swift # Swift implementation
android/src/.../MyModuleModule.kt # Kotlin implementation
src/__tests__/MyModule.test.ts
Lower level, more control. Uses codegen from TypeScript spec:
Step 1: Define TypeScript spec
// NativeMyModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
multiply(a: number, b: number): Promise<number>;
getDeviceInfo(): { model: string; os: string; version: string };
}
export default TurboModuleRegistry.getEnforcing<Spec>('MyModule');
Step 2: Implement iOS (Swift)
@objc(MyModule)
class MyModule: NSObject {
@objc func multiply(_ a: Double, b: Double, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
resolve(a * b)
}
@objc func getDeviceInfo() -> [String: String] {
return [
"model": UIDevice.current.model,
"os": UIDevice.current.systemName,
"version": UIDevice.current.systemVersion
]
}
}
Step 3: Implement Android (Kotlin)
class MyModuleModule(reactContext: ReactApplicationContext) :
NativeMyModuleSpec(reactContext) {
override fun multiply(a: Double, b: Double): Promise {
return Promise.resolve(a * b)
}
override fun getDeviceInfo(): WritableMap {
return Arguments.createMap().apply {
putString("model", Build.MODEL)
putString("os", "Android")
putString("version", Build.VERSION.RELEASE)
}
}
}
For custom UI components rendered natively:
// NativeMyView.ts
import type { ViewProps } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps extends ViewProps {
color?: string;
radius?: number;
}
export default codegenNativeComponent<NativeProps>('MyView');