React Native First App

You create your first React Native app with a single command. This topic shows you what that command produces, what each file does, and how to see your app running on a real phone.

Create the Project

Open your terminal and run this command. Replace MyFirstApp with your preferred project name — no spaces allowed.

$ npx create-expo-app MyFirstApp
$ cd MyFirstApp
$ npx expo start

The first command creates the project folder and downloads all required files. The second command moves you inside the project. The third command starts the development server.

What the Terminal Shows

After running expo start, your terminal displays a QR code and a menu of options.

┌─────────────────────────────────────┐
│  Metro Bundler running on port 8081 │
│                                     │
│  ████████████████                   │
│  ██          ██                     │
│  ██  ██████  ██   ← QR Code         │
│  ██  ██████  ██                     │
│  ██          ██                     │
│  ████████████████                   │
│                                     │
│  › Press a │ open Android emulator  │
│  › Press i │ open iOS simulator     │
│  › Press w │ open web browser       │
└─────────────────────────────────────┘

Scan the QR code with your phone camera (iOS) or with the Expo Go app (Android). Your app opens on your phone in seconds.

Project Folder Structure

The project Expo creates contains several files and folders. You only need to understand the important ones at this stage.

MyFirstApp/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx     ← Your home screen
│   │   └── explore.tsx   ← Second tab screen
│   └── _layout.tsx       ← Defines navigation structure
├── assets/               ← Images, fonts, icons
├── components/           ← Reusable UI pieces
├── package.json          ← Project info and dependencies
└── app.json              ← Expo configuration

app/ folder

This is where your screens live. Every file inside app/ becomes a screen or a layout in your app. Expo uses file-based routing — the file name determines the URL-like path of the screen.

assets/ folder

Store images, icons, and fonts here. React Native can import these files directly into your components.

package.json

This file lists every library your project uses. When you run npm install, npm reads this file and downloads all listed libraries automatically.

app.json

This file stores Expo-specific settings like the app name, icon, and splash screen. You edit this file when preparing the app for publishing.

Your First Screen — index.tsx

Open app/(tabs)/index.tsx. This is the home screen of your app. It already contains working React Native code.

import { Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, World!</Text>
    </View>
  );
}

Replace the existing content with the code above. Save the file. Your phone screen updates automatically — no need to refresh or restart.

You Save File
     │
     ▼
Metro Bundler Detects Change
     │
     ▼
Sends Update to Expo Go App
     │
     ▼
Phone Screen Refreshes Instantly

This instant update is called Fast Refresh. It is one of the biggest productivity advantages of React Native development.

Understanding the Code

import statement

The first line pulls in Text and View from React Native. You cannot use HTML tags like <div> or <p> in React Native. Use View instead of <div> and Text instead of <p>.

export default function

This defines a component — a reusable piece of UI. Every screen in React Native is a component. The word default marks it as the main thing this file exports.

return statement with JSX

The return block contains JSX. JSX looks like HTML but it compiles down to JavaScript. It describes what the screen should display.

┌──────────────────────────────────────────┐
│  JSX                  Phone Screen       │
│                                          │
│  <View>            → Container Box       │
│    <Text>          → Text Label          │
│      Hello World   → "Hello World"       │
│    </Text>                               │
│  </View>                                 │
└──────────────────────────────────────────┘

Making Your First Edit

Change the text from "Hello, World!" to your name. Save the file and watch the phone screen update. That immediate feedback loop is how React Native development works — edit, save, see.

Stopping the Development Server

Press Ctrl + C in the terminal to stop the Expo server. Your app on the phone goes offline. Run npx expo start again any time you want to continue working.

Summary

Three commands create a working React Native app. The project folder has a clear structure where app/ holds your screens. Fast Refresh sends your code changes to the phone instantly. View and Text are the two core components every React Native screen uses.