React Native with Expo: Setup and Your First App

React Native lets you build real mobile apps for iPhone and Android with JavaScript or TypeScript and React. You write one codebase. The framework shows real native buttons, text boxes and lists on each phone, not a web page in disguise. That is why many companies use it: one team can ship to both stores, and web developers who already know React can move into mobile work quickly.

Expo is a set of tools on top of React Native. It gives you a ready project, a development server, ready-made libraries for the camera, files, notifications and more, and a build service. Today the React Native team itself recommends starting with Expo, so that is what this course uses. You do not need a Mac, and you do not need Xcode or Android Studio to start. You can test on your own phone with an app called Expo Go.

What you will build

After two lessons on the language and the core ideas, you build ten complete apps. Each uses a new group of skills that real teams use.

• Tip calculator: components, state and styling.
• To-do list: lists and saved data with AsyncStorage.
• Quiz: several screens with Expo Router.
• Weather: loading data from an API with loading and error states.
• Expense tracker: useReducer, Context and money stored as cents.
• Notes: a real SQLite database with search.
• Recipe browser: TanStack Query for server data, caching and refresh.
• Photo journal: camera, photo library, permissions and the file system.
• Habit tracker: streaks and daily local notifications.
• Shop app: Zustand for the cart and tab navigation.

The last lessons cover forms and security, testing and speed, and how to build and publish with EAS.

Install the tools

1. Install Node.js (the current LTS version) from the official Node website. It includes npm.
2. Install a code editor. Visual Studio Code is free and works well with TypeScript.
3. Install Expo Go on your phone from the App Store or Google Play.
4. Make sure your phone and your computer are on the same Wi-Fi network.

Create the project

Terminal commands

# Create the project (Node.js LTS must be installed)
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo start
# press a for Android emulator, i for iOS simulator (macOS), or scan the QR code with the Expo Go app

The first command creates a folder with a blank TypeScript app. The second starts the development server and prints a QR code. On Android open Expo Go and scan it. On iPhone scan it with the Camera app. The app loads on your phone in a few seconds. Edit a file and save, and the phone updates by itself. This is called Fast Refresh, and it makes learning quick.

What Expo created

my-app/
  App.tsx          the first screen (older template; newer ones use app/)
  app.json         app name, icon, version, permissions and plugins
  package.json     libraries (dependencies) and scripts
  tsconfig.json    TypeScript settings
  assets/          icons and images
  node_modules/    installed libraries (never edit)

Open App.tsx. You will see something like this.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, my first app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

App is a component: a function that returns what should appear on screen. View is a box, like a div. Text shows text, and all text in React Native must be inside Text. StyleSheet.create holds the styles as plain objects. The syntax that looks like HTML inside the function is JSX, which React turns into native elements.

If your phone cannot connect, press s in the terminal to switch connection mode, or start with npx expo start --tunnel. You can also press a to open an Android emulator or i for the iOS simulator on a Mac.

Your task

1. Install Node.js and Expo Go, then create the project and scan the QR code.
2. Change the text to your name and save. Watch the phone update.
3. Add a second Text line and give the first one a bigger fontSize in the styles.
4. Open app.json and find the app name.

How to check it worked

• The app shows on your phone and updates when you save.
• You can say what a component, JSX and Expo each are.