Using a Marquee (Scrolling Text) as an Example: How React Native Calls and Controls a Native HarmonyOS Component via Fabric

Fabric is React Native's new rendering system, designed for performance and reliability, allowing seamless integration of native components into React Native apps. When integrating a custom native component, Fabric enables React Native JS code to declare, configure, and control the native view, while also receiving native events. The flow involves declaring the component's props and events using codegenNativeComponent, using the component in a React Native screen, and implementing the native component in HarmonyOS. Properties and events are mapped automatically to native code via Fabric's codegen/binder logic. Native events can be fired, which are received in JS as callbacks, and JS can send commands to control native component state at runtime. The code walkthrough demonstrates how to declare a Fabric component, use it in a React Native screen, implement the native component in HarmonyOS, and bind properties and events. Fabric's architecture provides a synchronous and predictable way of updating the UI, using a structure that mirrors the JS and native view trees. Fabric offers several benefits over the old bridge, including synchronous updates, direct struct mapping, and type-safe, always-in-sync code. To write a Fabric component, one needs to declare it with codegenNativeComponent, implement the native component, implement the binder/glue, and use it in JS.