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.
\nThis 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.
\nOn 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';\n\nexport default function Home() {\n return (\n <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n <Text>Trailhead</Text>\n </View>\n );\n}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.
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.
\nYou’ll return to this in the performance lesson. For now, remember the rule of thumb: keep the JS thread free during gestures and animations.
\nFor years, JavaScript and native code talked through a “bridge” that serialized messages to JSON and sent them in batches. The New Architecture replaced it:
\nIt 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.
\n\nComponents, 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.
\n","toc":[{"id":"sec-1","text":"Native views, described by React","level":2},{"id":"sec-2","text":"Two threads you’ll care about","level":2},{"id":"sec-3","text":"The New Architecture, briefly","level":2},{"id":"sec-4","text":"What transfers from React, and what doesn’t","level":2}],"takeaways":["React Native renders real platform views such as UIView on iOS and android.view.View on Android; there is no browser and no DOM.","Your JavaScript runs in the Hermes engine on its own thread, while the platform’s UI thread draws pixels and receives touches.","The New Architecture (JSI, the Fabric renderer and TurboModules) is the only architecture since React Native 0.82.","React knowledge transfers directly; what changes is the set of primitives, styling, navigation and how you ship."],"further":[{"title":"Core Components and Native Components","url":"https://reactnative.dev/docs/intro-react-native-components"},{"title":"About the New Architecture","url":"https://reactnative.dev/architecture/landing-page"}],"quiz":[{"q":"A teammate says “React Native is a WebView with a nicer API.” What’s the most accurate correction?
","options":[{"text":"It renders HTML, but compiles it to native code ahead of time.","why":"There’s no HTML at any stage. You write React components like<View> and <Text>, never <div>."},{"text":"Your components become real platform views; JavaScript describes the UI and native code draws it.","why":"Correct. React Native’s renderer creates and updates native views, which is why scrolling and text input feel like any other app."},{"text":"It uses a WebView on Android and native views on iOS.","why":"Both platforms get native views. Android is not a second-class target with a browser fallback."}],"answer":1},{"q":"Trailhead runs a heavy loop in JavaScript for two seconds. What does the user most likely notice?
","options":[{"text":"Nothing, because JavaScript runs on the UI thread and has priority.","why":"JavaScript does not run on the UI thread. That separation is the reason it can fall behind without the OS noticing."},{"text":"The app crashes immediately with an out-of-memory error.","why":"A long loop blocks, it doesn’t allocate unbounded memory. You’d see a freeze, not a crash."},{"text":"Taps and JS-driven updates stall until the loop finishes, even though the OS keeps the app alive.","why":"Correct. The JS thread is busy, so it can’t respond to events or schedule renders. Native-driven work like a ScrollView’s own scrolling may still move."}],"answer":2},{"q":"What does JSI, part of the New Architecture, give you?
","options":[{"text":"Direct calls between JavaScript and C++ without serializing every message to JSON.","why":"Correct. The old bridge batched JSON messages asynchronously; JSI lets JS hold references to native objects and call them directly."},{"text":"A way to write UI in Swift and Kotlin instead of JSX.","why":"You still write UI in React. JSI is plumbing underneath, and you rarely touch it yourself."},{"text":"A JavaScript engine that replaces Hermes.","why":"Hermes is still the engine. JSI is the interface engines expose to native code, not an engine."}],"answer":0}],"exercise":{"kind":"choice","multiple":true,"options":["native-views","js-thread","css-file","bridge-json","react-skills"],"correct":["native-views","js-thread","react-skills"],"title":"What's really happening on the phone?","prompt":"Trailhead’s first screen shows a list of hikes and a big Log a hike button. Select every statement that is true about how that screen runs on a phone today.
\n","hints":["Think about what draws the pixels and where your code runs.","Remember which architecture React Native has used exclusively since 0.82.","Three statements are true."],"explanation":"The list and button are real native views created by the Fabric renderer, and your JavaScript runs in Hermes on its own thread, separate from the UI thread that draws and receives touches. Your React knowledge carries over unchanged. There is no CSS file or cascade: styles are JavaScript objects. And the JSON-batching bridge belongs to the old architecture; JSI replaced it.
\n","checkLabels":{},"optionText":{"native-views":{"text":"The button is a real platform view, the same kind of view a Swift or Kotlin app would use.","why":"True. React Native’s renderer creates native views, not HTML elements in a WebView."},"js-thread":{"text":"If the JavaScript thread is busy with a long loop, the button stops responding to taps until it finishes.","why":"True. The touch reaches the UI thread, but the JS handler can’t run until the JS thread is free."},"css-file":{"text":"The button’s colors come from a CSS file that cascades into child components.","why":"False. Styles are plain JavaScript objects passed to each component; there’s no stylesheet cascade."},"bridge-json":{"text":"Every button press is serialized to JSON and sent over the bridge in a batch.","why":"False. That describes the legacy architecture. With the New Architecture, JSI lets JavaScript and native code call each other directly."},"react-skills":{"text":"The screen uses the same components, props, state and hooks you already know from React.","why":"True. React itself is identical; only the primitives and the platform around it change."}}},"words":525,"readMinutes":3}