host-objects

Bridge C++ audio nodes to JavaScript via JSI HostObjects.

822|83|Updated Jul 3, 2024
One-click install
npx skills add https://github.com/software-mansion/react-native-audio-api --skill host-objects
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: host-objects
Source: https://github.com/software-mansion/react-native-audio-api/tree/main/.claude/skills/host-objects
Command: npx skills add https://github.com/software-mansion/react-native-audio-api --skill host-objects

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges the gap between native C++ audio node state and JavaScript by providing a robust JSI HostObject layer. It explains naming conventions, property/method exposure via macros, shadow state management for JS↔audio-thread communication, and safe cross-thread argument parsing and return value patterns. Use this skill when creating a new audio node HostObject, modifying existing HostObject getters/setters/calls, wiring a new node into the context factory, or debugging JSI-related crashes and type errors.

Core Features & Use Cases

  • Defines a three-layer architecture where TS, HostObject, and AudioNode interact without serialization.
  • Documents guarding against common pitfalls like shadow state initialization and safe destructor cleanup.
  • Provides guidance on macros, registration in constructors, and memory pressure considerations for large buffers.
  • Use Case: Add a new HostObject for a custom audio node by following the provided structure and examples.

Quick Start

Create or modify a HostObject following the patterns described above and ensure you register getters/setters in the constructor.

Frequently Asked Questions about host-objects

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

FAQPage Schema
How do I expose C++ audio node state to JavaScript without serialization in React Native?

Use JSI HostObjects to bridge C++ audio nodes to JavaScript, exposing native state and behavior directly to the TypeScript API. This architecture allows TS, HostObject, and AudioNode to interact without serialization overhead.

What is the best way to add a new HostObject for a custom audio node in React Native?

To add a new audio HostObject, follow the three-layer architecture pattern and register getters and setters in the constructor using macro-based registration. This ensures proper property and method exposure for the custom node.

Why does my React Native JSI HostObject crash when parsing arguments across threads?

JSI crashes often stem from unsafe cross-thread argument parsing or improper shadow state initialization. You must implement safe argument parsing patterns and ensure shadow state is correctly initialized for JS-to-audio-thread communication.

How do I manage memory pressure when passing large audio buffers through JSI HostObjects?

Handle memory pressure for large buffers by following memory pressure considerations during HostObject creation. Ensure safe destructor cleanup is implemented to prevent leaks when the HostObject is garbage collected.

Can I use macro-based registration to wire a new audio node into the React Native context factory?

Yes, you can wire a new node into the context factory using the macro-based registration system. This approach codifies the registration of getters, setters, and methods directly in the HostObject constructor.

What are shadow state patterns in React Native JSI audio nodes?

Shadow state patterns manage the communication between the JavaScript thread and the native audio thread. They provide a safe mechanism to sync state and behavior between the JSI HostObject layer and the underlying C++ AudioNode.