jsi

Bind native C++ functions and objects to React Native JavaScript via JSI.

265|12|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/software-mansion-labs/skills --skill jsi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jsi
Source: https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/jsi
Command: npx skills add https://github.com/software-mansion-labs/skills --skill jsi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSI provides a direct interface for native C++ code to interact with the JavaScript engine in React Native, enabling reading and writing JS values, calling JS functions, and exposing C++ objects to JS without going through the old bridge.

Core Features & Use Cases

  • Access and manipulate JS values from C++ using jsi::Value, jsi::Object, and related types.
  • Create HostFunction and HostObject bindings to expose native functionality to JavaScript and to implement dynamic object shapes from C++.
  • Call JS from native threads safely using CallInvoker, and construct promises or other JS objects from C++.
  • Use PropNameID optimization, Scope for temporary values, and NativeState / WeakObject for lifecycle control.

Quick Start

Install JSI bindings during module initialization and expose a minimal HostFunction on the global object, then invoke it from JavaScript to verify end-to-end binding.

Frequently Asked Questions about jsi

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the JSI bridge in React Native and when do I need it?▼

JSI is a direct interface in React Native allowing native C++ code to interact synchronously with the JavaScript engine, needed when you must read and write JS values or expose C++ objects without old bridge overhead.

How do I expose a C++ HostFunction to JavaScript in React Native?▼

To expose a C++ HostFunction, include the jsi headers and install bindings during module initialization, then attach the HostFunction to the global JS object to verify end-to-end binding and allow direct invocation from JavaScript.

Can I call JavaScript functions from native C++ threads using JSI?▼

Yes, you can call JavaScript functions from native C++ threads using CallInvoker, which safely schedules cross-thread JS invocations across runtime boundaries while maintaining strict thread-safety rules to avoid crashes.

Does JSI require specific thread-safety rules for Runtime references?▼

Yes, JSI requires using Runtime references strictly on the JavaScript thread, while managing object lifetimes with Scope, NativeState, and WeakObject to prevent crashes and ensure safe cross-thread JS invocations across runtime boundaries.

How do I manage object lifetime and dynamic shapes with JSI in C++?▼

Manage object lifetime and dynamic shapes in JSI by implementing HostObject for dynamic object shapes from C++, and utilizing NativeState or WeakObject for lifecycle control alongside Scope for temporary values.

What is the best way to avoid crashes when binding HostObjects in React Native?▼

The best way to avoid crashes when binding HostObjects is to follow strict lifetime management and thread-safety rules, using Runtime references on the JS thread only and leveraging PropNameID optimization for safe execution.