Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
pluginagentmarketplace avatar

React Native Native Modules

  • 32 installs
  • 9 repo stars
  • Updated January 5, 2026
  • pluginagentmarketplace/custom-plugin-react-native

react-native-native-modules is a Claude Code skill for frontend development.

About

react-native-native-modules is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted development.

  • react-native-native-modules
  • Frontend Development
  • AI-coding skill

React Native Native Modules by the numbers

  • 32 all-time installs (skills.sh)
  • Ranked #1,449 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react-native --skill react-native-native-modules

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs32
repo stars9
Last updatedJanuary 5, 2026
Repositorypluginagentmarketplace/custom-plugin-react-native

How do I helps with frontend development tasks.?

Helps with frontend development tasks.

Who is it for?

Best when you're working on frontend development and need structured help with react native native modules.

Skip if: Teams with no frontend development needs, or anyone wanting a generic chat assistant without this specific workflow.

When should I use this skill?

When you need to helps with frontend development tasks., or when react-native-native-modules is a claude code skill for frontend development.

What you get

Structured output aligned to react-native-native-modules: react-native-native-modules, Frontend Development.

Files

SKILL.mdMarkdownGitHub ↗

React Native Native Modules Skill

Learn to build native modules for iOS and Android using Turbo Modules, JSI, and the new architecture.

Prerequisites

  • React Native intermediate knowledge
  • Basic iOS (Swift/Objective-C) or Android (Kotlin/Java)
  • Understanding of async/sync patterns

Learning Objectives

After completing this skill, you will be able to:

  • [ ] Create native modules for iOS and Android
  • [ ] Implement Turbo Modules with Codegen
  • [ ] Bridge third-party SDKs
  • [ ] Handle native events
  • [ ] Debug native code issues

---

Topics Covered

1. Turbo Module Spec

// specs/NativeCalculator.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): number;           // Sync
  multiply(a: number, b: number): Promise<number>; // Async
}

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

2. iOS Implementation (Swift)

@objc(Calculator)
class Calculator: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool { false }

  @objc func add(_ a: Double, b: Double) -> Double {
    return a + b
  }

  @objc func multiply(_ a: Double, b: Double,
    resolve: @escaping RCTPromiseResolveBlock,
    reject: @escaping RCTPromiseRejectBlock) {
    resolve(a * b)
  }
}

3. Android Implementation (Kotlin)

@ReactModule(name = "Calculator")
class CalculatorModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

  override fun getName() = "Calculator"

  @ReactMethod(isBlockingSynchronousMethod = true)
  fun add(a: Double, b: Double): Double = a + b

  @ReactMethod
  fun multiply(a: Double, b: Double, promise: Promise) {
    promise.resolve(a * b)
  }
}

4. Native Events

import { NativeEventEmitter, NativeModules } from 'react-native';

const { MyModule } = NativeModules;
const emitter = new NativeEventEmitter(MyModule);

// Subscribe
const subscription = emitter.addListener('onProgress', (data) => {
  console.log('Progress:', data.percent);
});

// Cleanup
subscription.remove();

5. When to Use Native Modules

ScenarioSolution
Access native APIsNative module
Performance-criticalJSI/Turbo Module
Third-party SDKBridge wrapper
UI componentFabric component

---

Quick Start Example

// JavaScript usage
import NativeCalculator from './specs/NativeCalculator';

// Sync call (blocks JS thread briefly)
const sum = NativeCalculator.add(5, 3);
console.log('Sum:', sum); // 8

// Async call (non-blocking)
const product = await NativeCalculator.multiply(5, 3);
console.log('Product:', product); // 15

---

Common Errors & Solutions

ErrorCauseSolution
"Module not found"Not linkedRun pod install
Crash on syncMain threadUse async or background
Type mismatchCodegen issueRegenerate specs

---

Validation Checklist

  • [ ] Module loads on both platforms
  • [ ] Sync methods don't block UI
  • [ ] Async methods resolve correctly
  • [ ] Events fire and cleanup properly

---

Usage

Skill("react-native-native-modules")

Bonded Agent: 04-react-native-native

Related skills

FAQ

What does react-native-native-modules do?

react-native-native-modules is a Claude Code skill for frontend development.

When should I use react-native-native-modules?

When you need to helps with frontend development tasks., or when react-native-native-modules is a claude code skill for frontend development.

What are the main capabilities?

react-native-native-modules; Frontend Development; AI-coding skill.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.