React Native, The Native Bits

Sjölander notes that JavaScript makes up less than 40% of React Native’s code; the framework also uses Java, C, C++, and Objective-C on its supported platforms. He focuses on Android, where the framework uses JavaScript, Java, C++, and C, and says apps pass through at least four runtimes and languages before showing UI.

React compares UI trees and produces imperative commands describing what changed. On an initial render, UI manager messages create shadow nodes and connect them; for example, text uses a virtual text node inside an RCTText node. These native-side commands build a mutable shadow tree from declarative JSX.

Yoga is a portable C layout engine that implements a mobile-focused subset of CSS, mainly Flexbox. React Native creates Yoga nodes for layout-relevant shadow nodes, then calls YGNodeCalculateLayout to determine positions and sizes. Text measurement calls back into Java through a measure function, and styled text nodes do not need separate Yoga nodes.

View managers create and update native views and shadow nodes for types such as text and inputs. On Android, the native view hierarchy optimizer skips nodes that only affect layout and draw no pixels, such as uncolored row containers in a Flexbox grid. In Sjölander’s example, four shadow nodes become three Yoga nodes and two Android view nodes.

Press handling can send direct commands to an existing view, such as setting its pressed state and ripple location, without going through the shadow and Yoga trees. After the press handler adds “Hello React Native EU,” React sends incremental commands that mutate the existing trees. Yoga reuses cached text measurements, while the Android hierarchy is updated to add the new text view.