What React Native Is

Native views driven by React

React Native is an open-source framework from Meta for building mobile apps with React. You write components in JavaScript or TypeScript, and instead of producing HTML in a browser, React Native renders real native views: a <View> becomes a UIView on iOS and an android.view.View on Android, and <Text> becomes a native text view. Your JavaScript runs in an engine (Hermes by default) inside the app, React computes what the UI should look like, and the renderer creates and updates the native views. The same component model, hooks and state ideas you know from React on the web apply.

React components, native views

React Native lets you write React components in JavaScript or TypeScript that render real platform UI on iOS and Android.

The New Architecture in brief

The New Architecture replaced the old asynchronous JSON "bridge". JSI (JavaScript Interface) is a C++ layer that lets JavaScript hold references to native objects and call them directly. Fabric is the new rendering system, built on JSI, which supports concurrent React features and synchronous layout reads. TurboModules are native modules loaded lazily and called through JSI with typed interfaces generated by Codegen. The New Architecture is the default in recent React Native and Expo SDK releases; check the docs for your version, since older libraries may need updates to be compatible.

A first component

Plain React with React Native primitives instead of DOM elements.

import { useState } from "react";
import { View, Text, Pressable } from "react-native";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View style={{ padding: 24, alignItems: "center" }}>
      <Text style={{ fontSize: 24 }}>Tapped {count} times</Text>
      <Pressable onPress={() => setCount((c) => c + 1)}>
        <Text style={{ color: "#2563eb" }}>Tap me</Text>
      </Pressable>
    </View>
  );
}

A conductor and an orchestra

React is the conductor deciding what should be played; the native platform is the orchestra that actually makes the sound. React Native passes the score from one to the other.

Quick check: What does a React Native `<View>` become at runtime?

• A canvas drawing made by JavaScript
• An HTML div inside a WebView
• A real native platform view such as UIView or android.view.View
• A screenshot of a web page