Skip to main content

Concepts

Embedded React is three layers. Knowing what each one owns makes everything else in these docs easier to place.

  1. Your app, written as React Native-style JSX: <View>, <Text>, <Pressable>, hooks, StyleSheet, Animated.
  2. One C99 engine that owns the node tree, flexbox layout, damage tracking, rendering and touch. It has no opinion about who calls it.
  3. A backend per display: the handful of pixel operations the engine needs from your hardware, and the code that pushes a finished frame to the panel.

Between your app and the engine sits the question this section spends the most time on: does the app run as JavaScript on the chip, or is it compiled to a package before it gets there?

  • Two flows: React at runtime on QuickJS, or JSX compiled ahead of time to a package. Same engine, same app, different trade-offs.
  • Engine and backends: what the engine owns and what a backend has to provide.
  • Rendering pipeline: from a state change to pixels on the panel: commit, layout, damage rectangles, the render pass, present.
  • Layout: the Yoga flexbox subset the engine implements, and where it diverges.
  • Assets: how images and fonts are baked at build time and found on the device.