Start an app with Expo (React Native)

In this tutorial you will create a new Expo app, run it on your own phone, and change it to be a small Brew & Bean welcome screen with a tap counter. You will learn what the files in the project do and how React Native components differ from HTML.

Prerequisites: Node.js (LTS version) installed, a code editor such as VS Code, basic JavaScript, and ideally some React (components, props, useState). You need an Android phone or iPhone on the same Wi-Fi network as your computer. No Android Studio is needed.

npx create-expo-app@latest brew-bean
cd brew-bean

create-expo-app downloads a starter project and installs its packages. The first run can take a few minutes on a slow network.

The default starter uses TypeScript and Expo Router, and includes example screens. To keep things simple we will start from a clean slate. The starter has a script for this.

npm run reset-project

This script moves the example code into a folder called app-example and leaves a minimal app folder. If it asks whether to move or delete the example files, either answer is fine; moving is safer.

npx expo start

Starts the development server (called Metro) and prints a QR code.

The starter's screens are .tsx files (TypeScript). In these lessons we write plain JavaScript, which Expo supports in the same project. So delete app/index.tsx and create app/index.js. If you prefer TypeScript, the code works in .tsx once you add types for props.

In React Native there is no div, p or button. You use built-in components: View is a box (like div), Text shows text (all text must be inside it) and Pressable handles taps. Styles are JavaScript objects made with StyleSheet.create, not CSS files.

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

export default function Home() {
  const [cups, setCups] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Brew & Bean</Text>
      <Text style={styles.subtitle}>Indiranagar, Bengaluru. Open 8 am to 10 pm.</Text>

      <Pressable style={styles.button} onPress={() => setCups(cups + 1)}>
        <Text style={styles.buttonText}>Add a coffee</Text>
      </Pressable>

      <Text style={styles.count}>Cups in your order: {cups}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 24,
    backgroundColor: "#fff8f0",
  },
  title: { fontSize: 32, fontWeight: "bold", color: "#4a2c17" },
  subtitle: { fontSize: 16, color: "#6b4f3a", marginTop: 4, marginBottom: 32 },
  button: {
    backgroundColor: "#4a2c17",
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 10,
  },
  buttonText: { color: "white", fontSize: 18 },
  count: { fontSize: 18, marginTop: 24 },
});

Save the file. The app on your phone reloads by itself (Fast Refresh) and keeps its state where possible.

Compare with React for the web. The useState hook and JSX work the same. What changes: onPress instead of onClick, no CSS files, no HTML tags, and layout uses flexbox with a column direction by default (on the web the default is row).

I am learning React Native with Expo. Explain this error in simple English, tell me which line is probably wrong and show the fix.

Error message:
[paste the red-screen message]

My file:
[paste the file]

What to expect: A good answer names the cause (for example text outside a Text component, or a misspelled component), points to the line and shows corrected code. Check it against the Expo or React Native docs before relying on it.

Expo Go is perfect for learning. It already contains many common libraries (camera, location, storage). Its limit is that it only contains the code that Expo chose to include. When you later need a library with custom native code, or features that Expo Go does not support, you make a development build: your own version of Expo Go that includes your libraries. It is made with EAS Build or locally, and needs more setup. We cover building in *Build and publish to the Play Store*.