Part 6 · Applications

Fabric native view: props down, events up

Prerequisites: 02-fabric-trees

Props and events

The same component contract has separate Android and iOS host implementations. Nodes: React component, Codegen spec, Host view, Native SDK.
The same component contract has separate Android and iOS host implementations. [S08] [S10]

Mental model verified

A Fabric component spec describes props and events. Codegen creates interfaces. A platform view manager/component implements view creation and prop updates; events move from the host back toward JS. Nonvisual service calls belong in a module.

[S08] [S10]

Worked flow synthesis

A scanner preview receives an enabled prop and emits onDetected. Android creates a View via a manager; iOS creates a UIView-backed component and updates props. Keep frame processing native and emit only meaningful detections.

[S10] [S12]

Engineering decision synthesis

Separate slow SDK initialization from UI-thread view mutation. Release camera or media resources when the view is destroyed, and avoid putting large frames in JS events.

[S06] [S10] [S12]

Failure mode and improvement synthesis

An event fired after unmount can target stale listeners. Couple subscription, view lifetime and SDK shutdown; test mount/unmount loops on both platforms.

[S10] [S12]
Keep this: A native visual surface needs a component contract, host view implementation and event path.
Check yourself: When should a device SDK be wrapped as a native view rather than only a module?

When it owns a visible platform surface such as camera preview, map, video player or specialized control.

Sources & further reading

  1. [S06] Threading Model

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: JS, UI and render scheduling scenarios.

    Inspect the implementation boundary described by this source.

  2. [S08] Using Codegen

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: Generated Android JNI/Java and iOS Objective-C++/C++ glue.

    Inspect the implementation boundary described by this source.

  3. [S10] Fabric Native Components Introduction

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: Typed props and events for custom host components.

    Inspect the implementation boundary described by this source.

  4. [S12] Module API Reference

    Expo · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: Function, AsyncFunction, queues, views, events and lifecycle.

    Inspect the implementation boundary described by this source.