What Is React Native?

Introduction

React Native is a framework for building mobile apps for iPhone and Android using React and TypeScript or JavaScript. You write your screens once, as React components, and they run on both kinds of phone.

This course assumes you know the basics of React: components, props and state. If not, take the React Basics course on this site first. Everything specific to phones is explained from zero.

One honest note: React Native apps run on phones, so the code in this course cannot run inside this website the way the HTML or Python lessons can. You run it on your own computer. The code examples are checked, but you will see them working only on your own device or emulator.

Not a website in a box

React Native is not a web page wrapped in an app. When your code says it wants a View or a Text, React Native creates the matching real native element on the phone. The official docs list the match:

Because the pieces are the phone's own, an app feels like any other app: native scrolling, native keyboards, native text selection. That is the main difference from a website, and from older ways of putting a web page inside an app.

How it compares with other ways to build apps

• Fully native: you write Swift for iPhone and Kotlin for Android, as two separate apps. Best access to everything, but twice the work.
• React Native: one codebase in TypeScript, shared by both phones, using real native views.
• Web app: a website opened in the phone's browser. No app store, but less access to the phone and no native feel.

React Native does not mean zero platform differences. Buttons, permissions and some layouts differ between iPhone and Android, and later lessons show where.

The New Architecture

Under the hood, React Native used to send messages between JavaScript and the native side through an asynchronous bridge. Since React Native 0.76 the New Architecture is switched on by default in every project. Its main part, JSI (the JavaScript Interface), lets JavaScript hold a direct reference to native objects and call them without that message passing.

You do not have to do anything to use it. You only need to know that when you read older tutorials about "the bridge", they describe how things used to work.

Meet Expo

Expo is a framework built on top of React Native. The React Native team's own documentation says: "we recommend using a Framework" for a new app, and "Expo is a production-grade React Native Framework." Expo gives you:

• a ready project with a file-based router,
• a development server with instant updates,
• a large set of ready-made libraries for the camera, location, storage and more,
• cloud services to build and release your app.

You will use Expo for the whole course.

Create your first project

You need Node.js (a current LTS version) on macOS, Windows or Linux. Then run:

npx create-expo-app@latest

Expo releases a new SDK (a numbered version of its toolkit) several times a year, and the docs note that around a new release the default command can create a project one version behind. This course was checked with Expo SDK 58. If your project shows a different number, the ideas are the same, and the Expo docs are the place to check exact commands.

Move into the new folder and start the development server:

npx expo start

The terminal shows a QR code and a few key shortcuts.

Run it on a device

• On your phone: install the Expo Go app from the App Store or Google Play and scan the QR code. Your app opens inside Expo Go.
• iOS Simulator: press i in the terminal. This needs a Mac with Xcode.
• Android Emulator: press a in the terminal. This needs Android Studio set up with an emulator.

Now open the project in your editor and change some text in the home screen file. Save, and the app updates in a moment without restarting. That feature is called Fast Refresh, and it is what makes mobile development feel quick.

What is inside the project

The default Expo project uses file-based navigation. The folder that matters most is src/app:

• src/app/index.tsx is the first screen.
• src/app/_layout.tsx sets up how screens are arranged, for example with tabs.

Older projects put this folder at app instead of src/app. Either way, each file in it becomes a screen. You will learn how in the intermediate course, so for now it is enough to edit the text and styles in index.tsx.

A tiny screen

Here is the smallest useful screen. It is a normal React component that returns native elements:

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  title: { fontSize: 24, fontWeight: "bold" },
});

It looks like React for the web, but there are no div or p tags, and the styles are JavaScript objects. The next lessons explain each part.

Try it yourself

Create a project with npx create-expo-app@latest, start it with npx expo start, and open it on your phone or an emulator. Change the text on the home screen, save, and watch it update. Then change a number in a style, such as a font size, and see the result.

Summary

• React Native builds real native iPhone and Android apps from React components, not web pages inside an app.
• The New Architecture is on by default since React Native 0.76, and Expo is the framework the React Native team recommends.
• Create a project with npx create-expo-app@latest, run it with npx expo start, and see changes instantly with Fast Refresh.