What React Native Really Is

Open the Notes app on your phone and drag your finger down a long list. The bounce at the top, the way text selection handles appear, the scroll that keeps coasting after you let go: all of that is the operating system’s own code. React Native’s promise is that your app gets the same behaviour, because it uses the same views.

This course builds Trailhead, a hiking log. By the end you’ll have a list of past hikes, trail detail screens, a form to log a new hike, GPS tracking, photos, reminders, offline storage, and a build that runs on a real phone. Each lesson adds one piece.

Native views, described by React

On the web, React turns your components into DOM nodes and the browser paints them. React Native swaps the bottom layer. You write components with <View>, <Text> and <Image>; React works out what changed; React Native’s renderer then creates or updates native views: a UIView on iOS, an android.view.View on Android.

import { Text, View } from 'react-native';

export default function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Trailhead</Text>
    </View>
  );
}

No HTML, no CSS file, no DOM. The style object looks like CSS, and that is on purpose, but it’s a JavaScript object that React Native’s layout engine (Yoga) reads to place native views.

Two threads you’ll care about

Your JavaScript runs in Hermes, a JavaScript engine built for React Native, on its own thread. The platform’s UI thread draws views and receives touches. Keeping them apart is why a native scroll can stay smooth while your code works, and also why a long synchronous loop in JavaScript makes buttons feel dead: the touch arrives, but nobody is free to handle it.

You’ll return to this in the performance lesson. For now, remember the rule of thumb: keep the JS thread free during gestures and animations.

The New Architecture, briefly

For years, JavaScript and native code talked through a “bridge” that serialized messages to JSON and sent them in batches. The New Architecture replaced it:

• JSI lets JavaScript call C++ directly and hold references to native objects.
• Fabric is the new renderer, written in C++ and shared by both platforms.
• TurboModules are native modules (camera, storage, sensors) loaded lazily, when first used.

It became the default in React Native 0.76 and the only option from 0.82. You won’t configure any of it; Expo projects use it out of the box. It matters when you pick libraries: anything you install must support it, and maintained libraries do.

What transfers from React, and what doesn’t

Components, props, state, hooks, context, keys: all the same. React 19 features work too. What changes is everything around React: the primitives (View instead of div), styling (no cascade, column-first flexbox), navigation (stacks and tabs instead of URLs in a bar), device APIs (permissions that users can refuse) and shipping (store review instead of a deploy).

Next you’ll create the Trailhead project with Expo and get it running on your own phone.