Build and run a React Native app on your own phone with Expo: components, navigation, data, storage and device features.

Mobile Development Basics

## Why this choice matters

Before you write a line of mobile code, someone on the team decides how the app will be built. That decision shapes which languages you need, how many codebases you maintain, how fast features ship and how the app feels in the hand. As a mobile developer you will be asked to explain the trade-offs, so it pays to understand them clearly rather than repeat opinions from the internet.

There are three broad options:

1. **Native**: one app per platform, written with the platform's own tools. iOS apps use Swift (older code uses Objective-C) and Apple's SwiftUI or UIKit in Xcode. Android apps use Kotlin (older code uses Java) with Jetpack Compose or Android Views in Android Studio.
2. **Cross-platform**: one codebase that produces apps for both platforms. The two big frameworks are **React Native** (JavaScript or TypeScript, React components) and **Flutter** (the Dart language, its own widget toolkit). Kotlin Multiplatform is a newer option that shares business logic in Kotlin while each platform keeps its own UI.
3. **Web-based**: a mobile website or a Progressive Web App (PWA), sometimes wrapped in a thin native shell. Cheapest to build, but with the most limited access to device features and store distribution.

## How React Native works

This course uses React Native because you already know React. In React Native you still write components, props, state and hooks, but instead of rendering HTML elements you render **native views**. A `<View>` becomes a real `UIView` on iOS and an `android.view.View` on Android; a `<Text>` becomes a native text view. Your JavaScript runs in a JavaScript engine (Hermes by default) inside the app, and React Native's renderer turns your component tree into the platform's own UI widgets.

That is the key difference from a web view: the buttons, scrolling and text input are the platform's real controls, so they behave the way users expect. Since React Native 0.76 the "New Architecture" is the default: JavaScript talks to native code through JSI (a direct C++ interface) instead of the old asynchronous "bridge", which makes calls into native code faster.

Flutter takes a different route. It does not use the platform's widgets at all; it draws every pixel itself with its own rendering engine. That gives very consistent visuals across platforms, at the cost of re-implementing platform look and feel.

## Comparing the options

| Concern | Native (Swift / Kotlin) | React Native | Flutter |
|---|---|---|---|
| Codebases | Two | One (plus small native parts) | One |
| Language | Swift, Kotlin | JavaScript / TypeScript | Dart |
| UI controls | Platform's own | Platform's own, via React | Drawn by Flutter |
| New OS features | Available on day one | Usually needs a library update | Usually needs a plugin update |
| Team fit | Separate iOS and Android skills | Web and React developers | Teams willing to learn Dart |

A worked example makes this concrete. Imagine a small team building a booking app for a gym: class lists, sign-in, push reminders and payments. They have two web developers who know React. A cross-platform framework lets them ship to both stores with one codebase, and React Native lets them reuse their React knowledge, so React Native is a sensible choice.

Now imagine a different team building a professional photo editor that uses the newest camera APIs, custom GPU filters and Apple Pencil pressure on iPad. Here the app lives on platform-specific features and heavy graphics, and the team would likely go native, at least for the editing screens.

Most real decisions are not all-or-nothing. Many React Native apps contain some native modules written in Swift or Kotlin, and many native apps embed a few web views for help pages. You will meet "when to go native" again in Mobile App Production.

## Common mistakes

- **"Cross-platform means write once, run everywhere with no extra work."** You still test on both platforms, handle platform differences (back button on Android, gestures on iOS, permission dialogs) and sometimes write platform-specific code with `Platform.OS`.
- **"Cross-platform apps are always slow."** For typical business apps (lists, forms, navigation) a well-built React Native or Flutter app feels native. Performance problems usually come from how the app is written, such as rendering huge lists badly, not from the framework itself.
- **Choosing a stack by hype.** Choose by the team's skills, the features the app needs and how long it must be maintained.
- **Forgetting the web.** If users only need to read content once in a while, a responsive website may be enough and skips store review entirely.

## Quick recap

- Native means one app per platform in Swift or Kotlin: the most direct access to the platform, at the cost of two codebases.
- React Native renders real native views from React components written in JavaScript; Flutter draws its own UI with Dart.
- Pick based on team skills, required device features, performance needs and long-term maintenance.
- Real apps often mix approaches: cross-platform for most screens, native modules where needed.

## Try it

Open the Do tab and take the quiz to check that you can explain the trade-offs to a teammate.


Compare native, cross-platform and web approaches and explain when each one fits.

Native vs cross-platform

React Native in 100 Seconds

React Native vs Flutter - I built the same chat app with both

Install the current Node.js LTS from nodejs.org and check it with `node --version`.

Install Expo Go on your phone from the App Store or Google Play. No phone? Install Android Studio and create an Android emulator instead.

Run `npx create-expo-app@latest my-first-app`, then `cd my-first-app`.

Run `npx expo start` and scan the QR code (Expo Go on Android, the Camera app on iOS). If it cannot connect, restart with `npx expo start --tunnel`.

Open the home screen file in the `app/` folder, change a line of text and save. Watch the phone update.

Introduce a deliberate error (delete a closing tag), save, and read the red error screen. Then fix it.

Press `j` in the terminal to open the debugger and find your component in the tools.

## Why setup matters

The first hour with a new platform decides whether you keep going. Mobile setup has a reputation for pain: SDKs, emulators, signing certificates. The good news is that you do not need any of that to start. With **Expo**, a free, open-source framework and toolset around React Native, you can run your own code on your own phone in a few minutes. You will add the heavier tools (Android Studio, Xcode) later, only when you need them.

## The pieces

- **Node.js** (an LTS release) runs the development tools on your computer.
- **create-expo-app** generates a new project with sensible defaults.
- **The Expo CLI** (`npx expo start`) runs the development server (Metro), which bundles your JavaScript and serves it to the phone.
- **Expo Go** is a free app from the App Store and Google Play. It loads your project from the development server, so you do not need to build or sign anything to try your code.
- Optional: **Android Studio** gives you an Android emulator on Windows, macOS or Linux. **Xcode** (macOS only) gives you the iOS Simulator. Neither is required for this lesson.

You do **not** need a paid developer account to run apps in Expo Go. Store accounts only matter when you publish, and they cost money: the Apple Developer Program is $99 per year and a Google Play developer account is a one-off $25 fee. Checked on 2026-10-23. Prices change, so check apple.com/developer and play.google.com/console before you pay.

## Worked example: your first project

In a terminal:

```bash
node --version            # should print an LTS version, e.g. v22.x
npx create-expo-app@latest my-first-app
cd my-first-app
npx expo start
```

The last command prints a QR code and a menu. On Android, open Expo Go and scan the code. On iOS, scan it with the Camera app, which hands it to Expo Go. Your phone and computer must be on the same Wi-Fi network. If they cannot see each other (school or office networks often block this), stop the server and run `npx expo start --tunnel` instead.

The default template uses **Expo Router**, which turns files in the `app/` folder into screens. Open `app/(tabs)/index.tsx` (the name may differ slightly between template versions), change some text and save. The app on your phone reloads within a second or two. This is **Fast Refresh**, and it keeps component state where it can.

A tiny screen of your own looks like this:

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

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Hello from my phone</Text>
    </View>
  );
}
```

## Useful commands in the Expo CLI

While `npx expo start` runs, press:

- `r` to reload the app,
- `j` to open the JavaScript debugger,
- `m` to open the developer menu on the device (you can also shake the phone),
- `a` to open an Android emulator, or `i` for the iOS Simulator, if you installed them.

Errors appear both in the terminal and as a red screen on the phone. Read the first line of the error and the file name it points to; that usually tells you exactly what broke.

## Common mistakes

- **Phone and computer on different networks.** The QR code points at your computer's local address. Use the same Wi-Fi or `--tunnel`.
- **Old Node.js.** Very old versions fail with confusing errors. Install the current LTS from nodejs.org.
- **SDK mismatch.** Expo Go from the stores supports the newest Expo SDK. If you open an older project, Expo Go may say it is incompatible; create a fresh project or upgrade the project's SDK.
- **Installing packages with plain npm when Expo expects specific versions.** Use `npx expo install <package>`, which picks versions that match your SDK.
- **Editing the wrong file.** With Expo Router, the screen you see comes from the `app/` folder; components elsewhere only show up if a screen imports them.

## Quick recap

- Expo lets you run React Native code on a real phone without building or signing anything.
- `npx create-expo-app@latest`, then `npx expo start`, then scan the QR code with Expo Go.
- Fast Refresh reloads your changes almost instantly.
- Emulators and simulators are optional; store accounts cost money and are only needed to publish.

## Try it

The Do tab walks you through creating a project and running it on your own phone (or an emulator if you do not have one).


Create an Expo project and run it on your own phone with Expo Go.

Setting up your environment

How to create your first Expo app | Universal App tutorial #1

Expo in 100 Seconds

## Why it matters

You already know React for the web, where JSX becomes HTML: `<div>`, `<p>`, `<button>`. React Native uses exactly the same JSX syntax, components, props and hooks, but there is **no HTML and no CSS** on a phone. Your JSX must use React Native's components, and styles are JavaScript objects. Knowing the mapping saves you an afternoon of "why is nothing rendering?".

## The core components

| Web habit | React Native | Notes |
|---|---|---|
| `<div>`, `<section>` | `<View>` | A box for layout. It cannot hold raw text. |
| `<p>`, `<span>`, `<h1>` | `<Text>` | **All** text must be inside `<Text>`. |
| `<img>` | `<Image>` | Needs a `source` and usually a width and height. |
| `<button>`, clickable `<div>` | `<Pressable>` (or `<Button>`) | `onPress`, not `onClick`. |
| `<input>` | `<TextInput>` | `onChangeText` gives you the string directly. |
| page scrolling | `<ScrollView>` or `<FlatList>` | Views do not scroll by themselves. |

The most common error for web developers is putting text straight into a `View`:

```javascript
// Crashes with "Text strings must be rendered within a <Text> component"
<View>Hello</View>

// Correct
<View>
  <Text>Hello</Text>
</View>
```

## Styling with StyleSheet

Styles are plain objects with camelCase property names, and numbers are density-independent pixels (no `px`):

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

export default function Card({ title, done, onToggle }) {
  return (
    <View style={styles.card}>
      <Text style={[styles.title, done && styles.done]}>{title}</Text>
      <Pressable onPress={onToggle} style={styles.button}>
        <Text style={styles.buttonText}>{done ? "Undo" : "Done"}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#fff", flexDirection: "row", alignItems: "center" },
  title: { flex: 1, fontSize: 18 },
  done: { textDecorationLine: "line-through", color: "#666" },
  button: { paddingVertical: 8, paddingHorizontal: 12, borderRadius: 8, backgroundColor: "#2563eb" },
  buttonText: { color: "#fff", fontWeight: "600" },
});
```

Three things to notice:

1. **Style arrays.** `style={[styles.title, done && styles.done]}` combines styles. Later entries win, and falsy entries (`false`, `null`, `undefined`) are ignored. That is how you apply conditional styles without string class names.
2. **Flexbox by default.** Every `View` is a flex container, and the default `flexDirection` is `column` (on the web it is `row`). `flex: 1` makes a child fill the remaining space.
3. **No cascade.** Styles do not inherit from parents, except that nested `<Text>` inherits text styles from an outer `<Text>`. You cannot set a font on a `View` and expect the text inside to use it.

`StyleSheet.create` mostly helps by keeping styles in one place and validating property names in development. React Native also exports `StyleSheet.flatten`, which merges a style array into one object; it is handy for tests and for reading the final value of a style.

## Worked example: merging styles by hand

To understand how style arrays work, imagine writing the merge yourself. Given `[base, isActive && active, { opacity: 0.5 }]`, you walk the array left to right, skip falsy entries, flatten nested arrays and copy each object's properties over the result:

```javascript
function merge(style) {
  if (!style) return {};
  if (Array.isArray(style)) {
    return style.reduce((acc, s) => Object.assign(acc, merge(s)), {});
  }
  return { ...style };
}
```

That small function is the whole idea behind `StyleSheet.flatten`. You will write your own version in the Do tab.

## Common mistakes

- Raw text in a `View`, or a string with a stray space between components. Wrap it in `<Text>`.
- Units in strings: `padding: "16px"` is invalid. Use numbers (`16`) or percentages as strings (`"50%"`).
- Expecting `onClick`. Use `onPress` on `Pressable`.
- Expecting the page to scroll. Wrap long content in `ScrollView`, and use `FlatList` for long lists.
- Expecting CSS inheritance. Set text styles on the `Text` itself (or a parent `Text`).

## Quick recap

- Use `View` for boxes, `Text` for every piece of text, `Pressable` for touches, `TextInput` for typing and `Image` for pictures.
- Styles are objects; combine them with arrays where later entries win and falsy ones are ignored.
- Layout is Flexbox with `column` as the default direction.

## Try it

In the Do tab you will write two helpers: one that maps an HTML tag to the React Native component you would use, and one that flattens a style array exactly like `StyleSheet.flatten`. The exercise is plain JavaScript (no JSX), so it runs in your browser.


Build screens with View, Text, Pressable and StyleSheet instead of HTML and CSS.

JSX without HTML

React Native Tutorial - 7 - Core Components

React Native Tutorial - 20 - StyleSheet API

Native versus cross-platform, your Expo setup, and building screens with View, Text and StyleSheet.