
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-modulesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 32 |
|---|---|
| repo stars | ★ 9 |
| Last updated | January 5, 2026 |
| Repository | pluginagentmarketplace/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
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
| Scenario | Solution |
|---|---|
| Access native APIs | Native module |
| Performance-critical | JSI/Turbo Module |
| Third-party SDK | Bridge wrapper |
| UI component | Fabric 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
| Error | Cause | Solution |
|---|---|---|
| "Module not found" | Not linked | Run pod install |
| Crash on sync | Main thread | Use async or background |
| Type mismatch | Codegen issue | Regenerate 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
# react-native-native-modules Configuration
# Category: general
# Generated: 2025-12-30
skill:
name: react-native-native-modules
version: "1.0.0"
category: general
settings:
# Default settings for react-native-native-modules
enabled: true
log_level: info
# Category-specific defaults
validation:
strict_mode: false
auto_fix: false
output:
format: markdown
include_examples: true
# Environment-specific overrides
environments:
development:
log_level: debug
validation:
strict_mode: false
production:
log_level: warn
validation:
strict_mode: true
# Integration settings
integrations:
# Enable/disable integrations
git: true
linter: true
formatter: true
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "react-native-native-modules Configuration Schema",
"type": "object",
"properties": {
"skill": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"version": {
"type": "string",
"pattern": "^\\d+\\.\\d+\\.\\d+$"
},
"category": {
"type": "string",
"enum": [
"api",
"testing",
"devops",
"security",
"database",
"frontend",
"algorithms",
"machine-learning",
"cloud",
"containers",
"general"
]
}
},
"required": [
"name",
"version"
]
},
"settings": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": true
},
"log_level": {
"type": "string",
"enum": [
"debug",
"info",
"warn",
"error"
]
}
}
}
},
"required": [
"skill"
]
}React Native Native Modules Guide
Overview
This guide provides comprehensive documentation for the react-native-native-modules skill in the custom-plugin-react-native plugin.
Category: General
Quick Start
Prerequisites
- Familiarity with general concepts
- Development environment set up
- Plugin installed and configured
Basic Usage
# Invoke the skill
claude "react-native-native-modules - [your task description]"
# Example
claude "react-native-native-modules - analyze the current implementation"Core Concepts
Key Principles
1. Consistency - Follow established patterns 2. Clarity - Write readable, maintainable code 3. Quality - Validate before deployment
Best Practices
- Always validate input data
- Handle edge cases explicitly
- Document your decisions
- Write tests for critical paths
Common Tasks
Task 1: Basic Implementation
# Example implementation pattern
def implement_react_native_native_modules(input_data):
"""
Implement react-native-native-modules functionality.
Args:
input_data: Input to process
Returns:
Processed result
"""
# Validate input
if not input_data:
raise ValueError("Input required")
# Process
result = process(input_data)
# Return
return resultTask 2: Advanced Usage
For advanced scenarios, consider:
- Configuration customization via
assets/config.yaml - Validation using
scripts/validate.py - Integration with other skills
Troubleshooting
Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Skill not found | Not installed | Run plugin sync |
| Validation fails | Invalid config | Check config.yaml |
| Unexpected output | Missing context | Provide more details |
Related Resources
- SKILL.md - Skill specification
- config.yaml - Configuration options
- validate.py - Validation script
---
Last updated: 2025-12-30
React Native Native Modules Patterns
Design Patterns
Pattern 1: Input Validation
Always validate input before processing:
def validate_input(data):
if data is None:
raise ValueError("Data cannot be None")
if not isinstance(data, dict):
raise TypeError("Data must be a dictionary")
return TruePattern 2: Error Handling
Use consistent error handling:
try:
result = risky_operation()
except SpecificError as e:
logger.error(f"Operation failed: {e}")
handle_error(e)
except Exception as e:
logger.exception("Unexpected error")
raisePattern 3: Configuration Loading
Load and validate configuration:
import yaml
def load_config(config_path):
with open(config_path) as f:
config = yaml.safe_load(f)
validate_config(config)
return configAnti-Patterns to Avoid
❌ Don't: Swallow Exceptions
# BAD
try:
do_something()
except:
pass✅ Do: Handle Explicitly
# GOOD
try:
do_something()
except SpecificError as e:
logger.warning(f"Expected error: {e}")
return default_valueCategory-Specific Patterns: General
Recommended Approach
1. Start with the simplest implementation 2. Add complexity only when needed 3. Test each addition 4. Document decisions
Common Integration Points
- Configuration:
assets/config.yaml - Validation:
scripts/validate.py - Documentation:
references/GUIDE.md
---
Pattern library for react-native-native-modules skill
#!/usr/bin/env python3
"""
Validation script for react-native-native-modules skill.
Category: general
"""
import os
import sys
import yaml
import json
from pathlib import Path
def validate_config(config_path: str) -> dict:
"""
Validate skill configuration file.
Args:
config_path: Path to config.yaml
Returns:
dict: Validation result with 'valid' and 'errors' keys
"""
errors = []
if not os.path.exists(config_path):
return {"valid": False, "errors": ["Config file not found"]}
try:
with open(config_path, 'r') as f:
config = yaml.safe_load(f)
except yaml.YAMLError as e:
return {"valid": False, "errors": [f"YAML parse error: {e}"]}
# Validate required fields
if 'skill' not in config:
errors.append("Missing 'skill' section")
else:
if 'name' not in config['skill']:
errors.append("Missing skill.name")
if 'version' not in config['skill']:
errors.append("Missing skill.version")
# Validate settings
if 'settings' in config:
settings = config['settings']
if 'log_level' in settings:
valid_levels = ['debug', 'info', 'warn', 'error']
if settings['log_level'] not in valid_levels:
errors.append(f"Invalid log_level: {settings['log_level']}")
return {
"valid": len(errors) == 0,
"errors": errors,
"config": config if not errors else None
}
def validate_skill_structure(skill_path: str) -> dict:
"""
Validate skill directory structure.
Args:
skill_path: Path to skill directory
Returns:
dict: Structure validation result
"""
required_dirs = ['assets', 'scripts', 'references']
required_files = ['SKILL.md']
errors = []
# Check required files
for file in required_files:
if not os.path.exists(os.path.join(skill_path, file)):
errors.append(f"Missing required file: {file}")
# Check required directories
for dir in required_dirs:
dir_path = os.path.join(skill_path, dir)
if not os.path.isdir(dir_path):
errors.append(f"Missing required directory: {dir}/")
else:
# Check for real content (not just .gitkeep)
files = [f for f in os.listdir(dir_path) if f != '.gitkeep']
if not files:
errors.append(f"Directory {dir}/ has no real content")
return {
"valid": len(errors) == 0,
"errors": errors,
"skill_name": os.path.basename(skill_path)
}
def main():
"""Main validation entry point."""
skill_path = Path(__file__).parent.parent
print(f"Validating react-native-native-modules skill...")
print(f"Path: {skill_path}")
# Validate structure
structure_result = validate_skill_structure(str(skill_path))
print(f"\nStructure validation: {'PASS' if structure_result['valid'] else 'FAIL'}")
if structure_result['errors']:
for error in structure_result['errors']:
print(f" - {error}")
# Validate config
config_path = skill_path / 'assets' / 'config.yaml'
if config_path.exists():
config_result = validate_config(str(config_path))
print(f"\nConfig validation: {'PASS' if config_result['valid'] else 'FAIL'}")
if config_result['errors']:
for error in config_result['errors']:
print(f" - {error}")
else:
print("\nConfig validation: SKIPPED (no config.yaml)")
# Summary
all_valid = structure_result['valid']
print(f"\n==================================================")
print(f"Overall: {'VALID' if all_valid else 'INVALID'}")
return 0 if all_valid else 1
if __name__ == "__main__":
sys.exit(main())
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.