How React Native works

React Native lets you write components in React and TypeScript, but instead of rendering HTML elements, it renders real native views: a View becomes a UIView on iOS and an android.view.View on Android. Text, images and scroll views are native too. That is why React Native apps feel like platform apps rather than websites in a wrapper.

Your JavaScript runs in a JavaScript engine on the device, by default Hermes, which is optimised for mobile startup time. Since React Native 0.76, the New Architecture is enabled by default. It replaces the old asynchronous bridge with a direct interface between JavaScript and native code, which makes rendering more predictable and lets features such as concurrent React work properly.

What is different from the web

• There is no DOM and no CSS files. You use components such as View, Text, Pressable, Image and ScrollView, and style them with JavaScript objects.
• All text must be inside a Text component. A string directly inside a View is an error.
• Layout uses Flexbox, but the default direction is column, not row.
• There is no hover in most cases. Touch feedback comes from Pressable and its pressed state.
• Navigation is a stack of screens, not a history of URLs, although Expo Router gives you URL style paths.

Why Expo

Expo is an open source framework and set of tools around React Native. It gives you:

1. A ready project with TypeScript and sensible defaults
2. Expo Router, file based navigation similar to Next.js
3. A large set of maintained native modules for camera, notifications, file system and more
4. EAS, cloud services for building, submitting and updating your app

The React Native documentation recommends starting new apps with a framework, and Expo is the main one. You can still add custom native code later through development builds, so you are not locked in.

In the next lesson we create Pantry and run it on your phone.