React Native Expo: A Beginner’s Guide to Mobile App Development

If you're looking to build powerful cross-platform mobile apps using JavaScript and React, Expo is one of the easiest and fastest ways to get started. Whether you’re targeting Android, iOS, or even the web, Expo simplifies your workflow and gives you an excellent development experience out of the box.

We’ll walk through how to set up and start developing your first app using React Native with Expo.

1. What Is Expo?

Expo is an open-source framework built on top of React Native that lets you build apps for Android and iOS with fewer configurations. It provides file-based routing, a library of pre-built native modules, development tools, and more - all aimed at streamlining mobile development.

It’s backed by an active community and available on both GitHub and Discord.

2. Prerequisites: What You Need to Begin

Before creating a new Expo project, make sure you have the following:

• A system running macOS, Windows (with PowerShell and WSL 2), or Linux.
• Node.js LTS version installed.

Once that’s in place, you’re ready to create your first Expo project.

3. Creating a New Expo Project

To create a new app using Expo, run the following command in your terminal:

npx create-expo-app@latest

This sets up a starter project with some example code to help you get familiar with the environment. Once created, you can open the folder in your code editor and start customizing it right away.

4. Setting Up the Development Environment

Expo supports multiple ways to develop and test your app, whether on a physical device or emulator.

Recommended: Use a Real Device

You can preview your app on:

• Android Phone
• iPhone
• Android Emulator
• iOS Simulator (macOS only)

5. How to Run the App on Your Device

There are two main options for development:

Start Your First Expo App:

Let’s get the app running!

Go to your project directory:

cd <project-directory>

Then:

Step 1: Start the Dev Server

npx expo start

Or:

npm run web

(This will launch a development server and display a QR code.)

Step 2: Open the App

Open app on web browser with given url http://localhost:8081

OR:

Scan the QR code shown in terminal with Expo Go app (Android) or the Camera app (iOS)

6. Make a Change and Preview:

Navigate to: app/(tabs)/index.tsx
Change this line:

<ThemedText type="title">Welcome!</ThemedText>

to this:

<ThemedText type="title">Hello World!</ThemedText>

The changes should appear instantly in your app!

Not seeing updates? Follow this troubleshooting guide.

7. Understanding the File Structure

Here’s what the default project includes:

📁 app/ — Your Routes & Screens

Handles the app’s navigation based on file structure.
Example screens:

• app/(tabs)/index.tsx
• app/(tabs)/explore.tsx
  Tab layout is controlled via app/(tabs)/_layout.tsx.

📁 assets/ — App Assets

Includes icons and splash screens:

• icon.png (iOS)
• adaptive-icon.png (Android)
• splash.png (splash screen)
• favicon.png (web)

📁 components/ — Reusable UI Components

Contains components like ThemedText.tsx, supporting light and dark themes.

📁 constants/ — Shared Values

Stores color palettes and other shared constants.

📁 hooks/ — Custom Hooks

Example: useThemeColor() dynamically adjusts UI to the system theme.

📁 scripts/ — Utility Scripts

Includes reset-project.js to quickly reset your app’s structure.

📄 app.json — App Configuration

Controls app metadata and build behavior.

📄 package.json — Project Metadata

Lists all dependencies and scripts.

📄 tsconfig.json — TypeScript Settings

Defines TypeScript rules for type safety.

8. Key Features of the Starter Template

1. File-based Navigation: Screens are organized based on file structure.
2. Cross-platform Support: Works seamlessly on Android, iOS, and the Web.
3. Image Optimization: Supports multiple screen densities using @2x, @3x images.
4. Custom Fonts: Easily load fonts via app/_layout.tsx.
5. Dark & Light Mode: Automatically adapts to user preference.
6. Smooth Animations: Components like HelloWave.tsx and ParallaxScrollView.tsx use the Animated API for rich UI.

9. Resetting the Project (Optional)

Want to start from scratch? Run:

npm run reset-project

This moves the existing app/ folder to app-example/ and creates a fresh structure with a new index.tsx.

10. What’s Next?

Now that your environment is set up, it's time to start building real features! In upcoming tutorials, we’ll cover how to:

• Add navigation
• Handle API requests
• Use local storage
• Publish your app to app stores

Stay tuned and happy coding!

Expo makes React Native development easier than ever, perfect for beginners and pros alike. With built-in support for multiple platforms, a fast dev server, and great community resources, you’ll be building production-ready apps in no time.