What React Native Is

What React Native Is and How It Renders to Native Views

React Native 36,878 is an open-source framework for building Android and iOS apps with React 7,897 . Your components return host components such as <View>, <Text>, <Image> and <TextInput> instead of HTML, and nothing is drawn in a web view: each is backed by a real platform widget, which the platform draws, scrolls and makes accessible exactly as in a Kotlin or Swift app.

Rendering runs in three phases. In the render phase, on the JavaScript thread, React calls your components and the renderer builds a matching tree of C++ shadow nodes. In the commit phase, usually on a background thread, the Yoga layout engine computes every node's size and position with flexbox. In the mount phase, on the UI thread, the renderer diffs the new tree against the one on screen and creates, updates or removes native views. You can see the result on a running app. Here is the screen component of a small test app, BookNestIntro:

App.js: the screen of BookNestIntro (excerpt)JavaScript

export default function App() {
  const info = runtimeInfo();
  console.log(JSON.stringify(info, null, 2));
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>BookNest</Text>
      <View style={styles.card}>
        <Text style={styles.book}>The Quiet Harbor</Text>
        <Text style={styles.meta}>Mara Ellison · $14.99</Text>
      </View>
      <View style={styles.rows}>
        {Object.entries(info).map(([key, value]) => (
          <Text key={key} style={styles.row}>{key}: {String(value)}</Text>
        ))}
      </View>
    </View>
  );
}

With it running on the emulator, adb shell dumpsys activity top lists the native views that were created (package names removed, as in View Props):

Output of 1

                    ReactViewGroup{V.E...... ........ 0,0-1080,2400 #54}
                    ReactTextView{V.ED..... ........ 63,168-1017,268 #e}
                    ReactViewGroup{V.E...... ........ 63,310-1017,533 #18}
                    ReactTextView{V.ED..... ........ 105,352-975,423 #12}
                    ReactTextView{V.ED..... ........ 105,433-975,490 #16}
...

Each <Text> became a ReactTextView, an Android TextView subclass, and each <View> that draws a background became a ReactViewGroup. The rows view, which only arranges its children, has no native view at all: the renderer flattened it away (View Props).

MENU