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-expoThis skill uses the workspace's default tool permissions.
You are creating a native module for React Native. This skill guides you through the entire process from TypeScript API design to native implementations.
Generates platform-native social content for X, LinkedIn, TikTok, YouTube, newsletters from source material like articles, demos, docs, or notes. Adapts voice and format per platform.
Interactively installs Everything Claude Code skills and rules to user-level (~/.claude) or project-level (.claude) directories, verifies paths, and optimizes files. Activate on 'configure ecc' or setup requests.
Reorganizes X and LinkedIn networks: review-first pruning of low-value follows, priority-based add/follow recommendations, and drafts warm outreach in user's voice.
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');