pspdfkit/react-native/react-native-bridge-recipe
Claude Code and agent skill by pspdfkit/react-native
- community
Checking that the SKILL.md file is still in the repository.
Recipe for bridging native iOS and Android APIs to TypeScript in this React Native SDK. Use when the user asks to add or change a native API exposed to TypeScript/JS, to bridge a feature from iOS or Android to the JS layer, or to implement a TurboModule, Fabric component, or Legacy native module. Keywords: bridge, native API, TurboModule, Fabric, Legacy, New Architecture, NativeNutrientModule, NativeNutrientViewTurboModule, index.js, specs, Android, iOS, dual path, ArchitectureDetector.
Install
npx vskill@latest install pspdfkit/react-native/react-native-bridge-recipeSKILL.md
React Native bridge recipe (native → TypeScript)
When adding or changing any native API exposed to the TypeScript/JavaScript layer in this repo, you MUST follow the full recipe in:
`BRIDGING.md`
Read that file first. Do not summarize or skip steps. Do not use only Legacy or only New Architecture. Do not invent a different pattern.
When to use this skill
- The user asks to "bridge" a native API, method, or feature to TypeScript/React Native.
- The user wants to add or change something that touches:
NativeModules, a TurboModule, Fabric,index.js,src/specs/, or native iOS/Android code exposed to JS. - The user mentions: TurboModule, Fabric, Legacy, New Architecture, view ref methods, or app-level module methods.
Rule summary (from BRIDGING.md)
- Dual path: Every public API that talks to native code MUST branch on
isNewArchitectureEnabled(): New Architecture uses TurboModule/Fabric ref; Legacy usesNativeModules/UIManager/requireNativeComponent. - Spec-first for New Architecture: New Architecture APIs MUST be declared in a spec under
src/specs/and implemented in native (Androidnewarch, iOSTurbo/orFabric/). - One public surface: The public API (e.g.
index.js) is the only place callers use; it delegates to either the TurboModule/Fabric path or the Legacy path.
Before coding: gather requirements (Step 0)
If the user has not provided these, ask and wait before Step 1:
- API / feature: What exactly should be bridged?
- Platform: iOS only, Android only, or both?
- Module type: App-level TurboModule, View-backed TurboModule, or Fabric component?
- Method name(s) and signatures: Exact names and TypeScript signatures.
- Links to iOS/Android APIs or guides: So you can implement correctly.
- Extra context: Already implemented elsewhere? Different name on one platform?
After implementation
- Use the Checklist before submitting in
BRIDGING.mdand confirm each item. - Edit in two places: For local development, native changes are typically applied in both the SDK root (
ios/orandroid/) and in the app that consumes the SDK (for example, under itsnode_modules/@nutrient-sdk/react-native/ios/or.../android/) so that builds use the modified sources. - When working with the included Catalog sample app, you can:
- Implement native changes in
ios/andandroid/. - Ensure the Catalog app runs against those changes, either via
npm run dev-buildor by mirroring edits into the Catalog app’snode_modules/@nutrient-sdk/react-nativecopy as described inBRIDGING.md. - After the user confirms they are happy, run the create-bridge-patch script (see
BRIDGING.md) so they can persist the changes withpatch-package.
Self-verifying with native builds
- You should run the iOS and Android builds for the app that consumes this SDK (for example, the included Catalog sample app) to verify the code compiles after your bridge changes.
- Typical order when using the Catalog sample:
- Run
npm run dev-buildfrom the SDK root. - Ensure the sample app’s
node_modules/@nutrient-sdk/react-nativereflects your native changes (either viadev-buildor by copying native files as described inBRIDGING.md). - Run the iOS build (e.g. via
xcodebuild) and the Android build (e.g../gradlew assembleDebug) from the sample app directories.
- If a build fails, fix the code and re-run until it succeeds.
Native API references for bridging
- When you need exact native API signatures or behavior and the user hasn’t provided them:
- For iOS, start with the LLMS guide index:
https://www.nutrient.io/guides/ios/llms.txt - For Android, start with the LLMS guide index:
https://www.nutrient.io/guides/android/llms.txt - Use these LLMS documents to find the relevant API reference pages and feature guides before guessing any native method names, parameters, or semantics.
- When reading these LLMS reference files, do not stop at the first plausible API you find. Instead:
- Continue scanning the document for all APIs and guides related to the feature you’re implementing.
- Only after you’ve seen the full set of relevant options, choose the API whose semantics best match the user’s requirements.
- When you need the precise method signatures and selectors for the native SDKs, consult the official API references:
- iOS Objective‑C API reference:
https://www.nutrient.io/api/ios/documentation/overview?language=objc - iOS Swift API reference:
https://www.nutrient.io/api/ios/documentation/overview - Android Kotlin/Java API reference:
https://www.nutrient.io/api/android/
Reference: key files (within this package)
| Purpose | Location | |
|---|---|---|
| Full recipe | BRIDGING.md | |
| Architecture detection | src/ArchitectureDetector.ts | |
| App-level TurboModule | src/specs/NativeNutrientModule.ts | |
| View TurboModule | src/specs/NativeNutrientViewTurboModule.ts | |
| Fabric component | src/specs/NutrientViewNativeComponent.ts | |
| Public API | index.js | |
| Legacy Android | android/src/main/java/ | |
| New Arch Android | android/src/newarch/java/ | |
| Legacy iOS | ios/ (ViewManagers, RCT* modules) | |
| New Arch iOS | ios/Turbo/, ios/Fabric/ |
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/react-native-bridge-recipe/SKILL.md
Popularity
- Repository stars
- 205
- Repository forks
- 75
- 7-day trend score
- 27
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/pspdfkit/react-native/react-native-bridge-recipe)