sw-native-modules_skill

This skill helps you implement and optimize React Native native modules with Turbo Modules, JSI, and Codegen for fast JS-native bridges.

Python

1.1k

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill openclaw/skills --skill sw-native-modules

_meta.json289 B
SKILL.md18.4 KB

Overview

This skill provides hands-on expertise for building and integrating React Native native modules using the New Architecture (Turbo Modules, JSI, Fabric, and Codegen). It covers Swift and Kotlin implementations, TypeScript specs for Codegen, native UI components, and practical debugging and deployment commands. Use it to bridge complex platform APIs to JavaScript with high performance and type safety.

How this skill works

I inspect your JavaScript/TypeScript module spec and guide you to generate native interfaces with Codegen. I show how to implement Turbo Modules and JSI bindings on iOS (Swift/Obj‑C) and Android (Kotlin/Java), create Fabric UI components, and configure autolinking or Expo plugins. I also provide concrete troubleshooting steps for build failures, autolinking issues, and native crashes.

When to use it

You need to expose platform APIs (Bluetooth, HealthKit, sensors) to React Native with minimal overhead.
You want type-safe native modules using Codegen and TypeScript specs.
You are migrating an app to the New Architecture (Turbo Modules + Fabric + JSI).
You must implement synchronous or high-performance native calls via JSI.
You need custom native UI components or Fabric-compatible view managers.

Best practices

Define a single TypeScript spec as the source of truth and enable Codegen in package.json.
Prefer Promise-based async methods; reserve synchronous methods for small constants or critical fast paths.
Use Turbo Modules for lazy loading and type safety, and JSI for hot paths that must avoid JSON serialization.
Test native implementations separately in Xcode/Android Studio and use logcat/Xcode console for native crash diagnostics.
Use Expo config plugins when working in the managed workflow and rebuild the dev client when adding native modules.

Example use cases

Create a Calendar native module with create/find/delete methods implemented in Swift and Kotlin and used from TypeScript.
Wrap a third‑party iOS SDK (HealthKit) with JSI bindings for synchronous read access from JS.
Build a custom Fabric-based native view (camera preview, map overlay) with props and events exposed to React Native.
Troubleshoot an autolinking failure: verify package.json, rerun pod install, and clear Metro cache.
Migrate legacy Bridge modules to Turbo Modules and enable Codegen for compile-time type checks.

FAQ

For the New Architecture and type safety you should use Codegen and Turbo Modules; legacy Bridge modules still work but have higher overhead.

When should I use JSI instead of a Promise-based Turbo Module?

Use JSI for hot paths requiring synchronous or very low-latency native calls; use Promise-based methods for most async tasks.

How do I debug native crashes?

Check Xcode console and crash reports on iOS, use adb logcat on Android, reproduce in the native debugger, and inspect JNI/stack traces.