software-mansion-labs/jsi
skills/react-native-best-practices/references/jsi/SKILL.md
React Native JSI (JavaScript Interface) — C++ API for interacting with the JS runtime. Use whenever the user asks about or writes C++ code that touches JSI types or patterns: jsi::Runtime, jsi::Value, jsi::Object, jsi::Function, jsi::Array, jsi::ArrayBuffer, jsi::String, jsi::Symbol, jsi::BigInt, jsi::PropNameID, jsi::HostObject, jsi::HostFunction, jsi::NativeState, jsi::WeakObject, jsi::Scope, JSIException, JSINativeException, JSError, HostFunctionType, createFromHostFunction, getHostObject, setNativeState, evaluateJavaScript, queueMicrotask, drainMicrotasks, setRuntimeData, getRuntimeData, ISerialization, rt.global(), jsi.h, jsi-inl.h, JSI binding, C++ native module, calling JS from C++, calling C++ from JS, HostObject destructor, shared_ptr, CallInvoker, invokeAsync, folly::dynamic with JSI, zero-copy ArrayBuffer, TurboModule C++ layer, Nitro Module, jsi::WithRuntimeDecorator, or any question about the boundary between C++ and the JavaScript engine in React Native.
$ install --global
skillsauthnpx skillsauth add software-mansion-labs/skills jsiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 15, 2026, 4:24 AM11.7s11 files scanned
SKILL.md
- name:
- jsi
- description:
- React Native JSI (JavaScript Interface) — C++ API for interacting with the JS runtime. Use whenever the user asks about or writes C++ code that touches JSI types or patterns: jsi::Runtime, jsi::Value, jsi::Object, jsi::Function, jsi::Array, jsi::ArrayBuffer, jsi::String, jsi::Symbol, jsi::BigInt, jsi::PropNameID, jsi::HostObject, jsi::HostFunction, jsi::NativeState, jsi::WeakObject, jsi::Scope, JSIException, JSINativeException, JSError, HostFunctionType, createFromHostFunction, getHostObject, setNativeState, evaluateJavaScript, queueMicrotask, drainMicrotasks, setRuntimeData, getRuntimeData, ISerialization, rt.global(), jsi.h, jsi-inl.h, JSI binding, C++ native module, calling JS from C++, calling C++ from JS, HostObject destructor, shared_ptr, CallInvoker, invokeAsync, folly::dynamic with JSI, zero-copy ArrayBuffer, TurboModule C++ layer, Nitro Module, jsi::WithRuntimeDecorator, or any question about the boundary between C++ and the JavaScript engine in React Native.
React Native JSI
The JavaScript Interface (JSI) is a C++ API that lets native code interact directly with the JavaScript engine — reading and writing JS values, calling JS functions, and exposing C++ objects to JS — without going through the old async bridge.
References
Load at most one reference file per question. Prefer the most specific match.
| File | Load when question is about |
|------|-----------------------------|
| overview.md | JSI architecture, why rt.global(), sync vs async model, why some methods take Runtime&, event loop absence, queueMicrotask/drainMicrotasks, setRuntimeData/getRuntimeData, evaluateJavaScript caveat, prototype manipulation |
| core-types.md | JSI type system: Value, PropNameID, HostFunction, HostObject, NativeState, WeakObject, Array, ArrayBuffer, BigInt, Scope — constructors, ownership, lifetimes, GC behavior |
| casting-and-serialization.md | The get/as naming convention, getPropertyAsObject/getPropertyAsFunction, string encoding (createFromAscii vs createFromUtf8), zero-copy string access, C++↔JS type mapping, createFromJsonUtf8, folly::dynamic, ISerialization |
| threading-safety.md | Single-thread rule, write operations from multiple threads, JSI object destruction order, Value non-copyable + shared_ptr pattern, hot reload / bundle reload pitfalls, WithRuntimeDecorator<AroundLock> |
| calling-js-and-async.md | Installing HostFunction bindings, calling JS functions from C++, callWithThis, callAsConstructor (JS Set / Map / Promise), invokeAsync + CallInvoker, Promise resolve/reject patterns, JSIException hierarchy |
| performance.md | Batching sequential calls, caching PropNameID, zero-copy ArrayBuffer via MutableBuffer, setExternalMemoryPressure, Scope in tight loops, avoiding evaluateJavaScript for function calls |
| setup-and-templates.md | Installing a JSI binding in Android (FBJNI, JSIModulePackage) and iOS (ObjC++ .mm), library scaffolding templates, JSI vs TurboModules vs Nitro Modules |
| module-approaches.md | Choosing between Pure JSI, TurboModules, Nitro Modules, or a pure C++ core with thin adapter — decision tree, trade-offs, boilerplate comparison |
| cpp-memory-patterns.md | C++ memory for JS developers: unique_ptr, shared_ptr, std::move, lambda captures, RAII, circular ownership, the GC boundary between JS heap and native heap |
| debugging-and-pitfalls.md | Crash traces, symbolication (c++filt, addr2line, atos, ndk-stack), ASan, common JSI crash patterns, pre-ship checklist |
Related Skills
software-mansion-labs/typegpu
development
VerifiedTrustedCommunity
TypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, vertex layouts, slots, accessors, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mentions one (e.g. "how do I write a shader", "how do I create a buffer"). Trigger on any mention of typegpu, tgpu, "use gpu", TypedGPU, or WebGPU code written using TypeGPU's schema API (d.*, tgpu.*, std.*). Do NOT trigger for raw WebGPU (using GPUDevice/GPURenderPipeline directly without tgpu), WGSL-only questions, Three.js, Babylon.js, or WebGL.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/rnrepo
tools
VerifiedTrustedCommunity
Best practices for integrating and using RNRepo — Software Mansion's infrastructure for pre-built React Native library artifacts that reduces native build times by up to 2×. Use when setting up, configuring, or troubleshooting RNRepo in a React Native or Expo project. Trigger on: 'RNRepo', 'rnrepo', 'slow builds', 'build times', 'prebuilt artifacts', 'prebuilt libraries', '@rnrepo/expo-config-plugin', '@rnrepo/build-tools', 'prebuilds-plugin', 'rnrepo.config.json', 'DISABLE_RNREPO', 'packages.rnrepo.org', 'Maven prebuild', 'CocoaPods prebuild', 'xcframework prebuild', 'prebuild AAR', 'build from source', 'native compilation slow', 'Gradle plugin slow', 'pod install slow', 'CI build times'.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/svg
development
VerifiedTrustedCommunity
Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/rich-text
tools
VerifiedTrustedCommunity
Software Mansion's best practices for rich text in React Native using react-native-enriched and react-native-enriched-markdown. Use when building rich text editors, formatted text inputs, Markdown renderers, or any feature requiring inline styling, mentions, links, structured text editing, or Markdown display. Trigger on: 'rich text editor', 'rich text input', 'text editor', 'react-native-enriched', 'react-native-enriched-markdown', 'EnrichedTextInput', 'EnrichedMarkdownText', 'formatted text input', 'WYSIWYG', 'mentions input', 'text formatting toolbar', 'markdown renderer', 'markdown display', 'render markdown', 'display markdown natively', 'LaTeX math', 'GFM tables', or any request to build rich text editing or Markdown rendering in React Native.
184SKILL.mdUpdated May 15, 2026