1. Introduction

React Native allows developers to build Android and iOS applications using JavaScript and React. However, setting up a mobile development environment manually can be difficult for beginners.

Expo makes this process easier by providing tools to create, run, test, and develop React Native applications.

In this tutorial, we will learn how to:

• Understand Expo and its purpose.

• Install and configure the required development tools.

• Create a React Native project using Expo.

• Understand the basic Expo project structure.

• Run an application using Expo Go.

• Edit the application and see changes instantly.

• Understand common setup errors and their solutions.

2. What Is Expo?

Expo is an open-source framework and platform built around React Native.

It provides development tools and libraries that simplify mobile application development.

With Expo, developers can:

• Create Android and iOS applications.

• Run applications on physical devices.

• Test applications using Expo Go.

• Access device features through Expo SDK libraries.

• Build application packages for distribution.

Expo reduces the amount of manual configuration required when starting a React Native project.

3. Expo vs React Native CLI

React Native is the underlying framework used to build native mobile applications.

Expo provides a framework and development tools that make working with React Native easier.

Expo approach:

• Faster initial setup.

• Built-in development server.

• Expo Go for quick testing.

• Integrated libraries for common device features.

Bare React Native approach:

• More direct control over native Android and iOS projects.

• Greater responsibility for native configuration.

• Useful when a project requires custom native setup outside the available framework workflow.

For beginners, Expo is a practical starting point.

4. Requirements Before Starting

Before creating an Expo application, make sure you have:

1. Node.js LTS installed.

2. npm installed with Node.js.

3. Visual Studio Code installed.

4. A terminal such as Command Prompt, PowerShell, or VS Code Terminal.

5. An Android phone with Expo Go installed, or an Android emulator.

Official download links:

• Node.js: https://nodejs.org/

• Visual Studio Code: https://code.visualstudio.com/

• Expo Go: https://expo.dev/go

Check your Node.js and npm installations:

node -v
npm -v

If both commands display version numbers, the tools are available.

5. Create Your First Expo Project

Open your terminal and execute:

npx create-expo-app@latest MyExpoApp --template default@sdk-58

This command creates a new Expo project named MyExpoApp using the default SDK 58 template.

Wait while npm downloads and installs the required dependencies.

If you use the Expo project creation flow without specifying a template, follow the CLI instructions and select the template compatible with your installed Expo Go version.

After the project is created, open its directory:

cd MyExpoApp

Open the project in Visual Studio Code:

code .

Your Expo project is now ready to explore.

6. Understanding the Expo Project Structure

A modern Expo project may contain the following files and folders:

MyExpoApp/
│
├── src/
│   └── app/
│       ├── _layout.tsx
│       └── index.tsx
│
├── assets/
│   └── images/
│
├── components/
├── constants/
├── hooks/
│
├── app.json
├── package.json
├── tsconfig.json
└── node_modules/

The exact structure can vary depending on the selected template.

Important files:

src/app/index.tsx

This file defines the application's initial screen in this project structure.

src/app/_layout.tsx

This file defines the layout and navigation configuration for Expo Router.

assets/

Stores images, icons, fonts, and other application assets.

app.json

Contains Expo application configuration.

package.json

Contains project information, scripts, and dependencies.

node_modules/

Contains installed project packages.

Some templates use app/ instead of src/app/. Always edit the screen file generated by your selected template.

7. Start the Expo Development Server

Open the terminal inside your project directory.

Run:

npx expo start

Expo starts the Metro development server.

After startup, the terminal displays a QR code and development options.

You can use this QR code to open your application on a physical mobile device.

8. Install and Configure Expo Go

Expo Go is a mobile application used to preview compatible Expo projects during development.

Steps:

1. Open Google Play Store on your Android phone.

2. Search for Expo Go.

3. Install the application.

4. Connect your phone and computer to the same Wi-Fi network.

5. Open Expo Go.

6. Select the QR scanner.

7. Scan the QR code displayed in your terminal.

Your React Native application should open on your phone.

For iOS, use the device camera to scan the QR code and open the project. Expo CLI and Expo Go may need to be signed in to the same Expo account.

9. Run Your Application on an Android Emulator

If you prefer using an Android emulator:

1. Install Android Studio.

2. Open Device Manager.

3. Create an Android Virtual Device.

4. Start the emulator.

5. Keep the Expo development server running.

6. Press A in the terminal.

Expo will attempt to open the project in the running Android emulator.

A compatible Android SDK and emulator configuration are required.

10. Build Your First Screen

Now let's replace the initial screen with a simple custom application screen.

Open the initial route file generated by your template. In the SDK 58 default structure used in this tutorial, edit:

src/app/index.tsx

Replace its contents with:

import React, { useState } from 'react';

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

export default function HomeScreen() {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Welcome to Expo!
      </Text>

      <Text style={styles.subtitle}>
        My First React Native App
      </Text>

      <Text style={styles.counter}>
        Button Clicks: {count}
      </Text>

      <Pressable
        style={styles.button}
        onPress={handlePress}
      >
        <Text style={styles.buttonText}>
          Click Me
        </Text>
      </Pressable>

      <Pressable
        style={styles.resetButton}
        onPress={() => setCount(0)}
      >
        <Text style={styles.resetText}>
          Reset Counter
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#101827',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },

  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 10,
  },

  subtitle: {
    fontSize: 16,
    color: '#b8c5d8',
    marginBottom: 30,
  },

  counter: {
    fontSize: 22,
    color: '#38bdf8',
    marginBottom: 25,
  },

  button: {
    backgroundColor: '#2563eb',
    paddingVertical: 14,
    paddingHorizontal: 35,
    borderRadius: 10,
    marginBottom: 15,
  },

  buttonText: {
    color: '#ffffff',
    fontSize: 18,
    fontWeight: 'bold',
  },

  resetButton: {
    padding: 12,
  },

  resetText: {
    color: '#fbbf24',
    fontSize: 16,
  },
});

Save the file.

Expo will automatically refresh the application when the development server detects the change.

11. Understand the Practical Code

useState

const [count, setCount] = useState(0);

Stores the button click count and allows the screen to update when the value changes.

View

Provides a container for arranging interface elements.

Text

Displays text on the mobile screen.

Pressable

Creates a touchable interface element.

StyleSheet

Organizes styling properties in a structured way.

onPress

Executes a function when the user taps the button.

When the user clicks the button, setCount(count + 1) updates the counter.

12. Useful Expo Commands

Start the development server:

npx expo start

Start using tunnel networking:

npx expo start --tunnel

Clear the Metro cache:

npx expo start --clear

Check project dependencies:

npx expo install --check

Install compatible package versions:

npx expo install package-name

13. Common Expo Setup Errors

Problem 1: Node or npm command not found

Solution:

• Install Node.js LTS.

• Restart the terminal.

• Verify the PATH configuration.

• Run node -v and npm -v again.

Problem 2: QR code does not open the application

Solution:

• Check that both devices use the same Wi-Fi network.

• Confirm that Expo Go is installed.

• Restart the development server.

• Try npx expo start --tunnel if the network blocks local connections.

Problem 3: Application does not refresh

Solution:

• Save the edited file.

• Check the terminal for errors.

• Restart Expo if necessary.

• Clear the Metro cache using npx expo start --clear.

Problem 4: Expo Go reports an SDK compatibility error

Solution:

• Check the Expo SDK version used by your project.

• Check which SDK version your installed Expo Go supports.

• Create or upgrade the project using a compatible SDK version.

Problem 5: Application displays a blank screen

Solution:

• Check the terminal and application logs.

• Verify the file path and export.

• Check for TypeScript or JavaScript errors.

• Confirm that the initial route is configured correctly.

14. Expo Go vs Development Build

Expo Go is useful for learning and quickly previewing compatible Expo projects.

Development builds are more suitable when an application requires custom native modules or a customized native runtime.

Start with Expo Go for learning. Move to development builds when your application needs features that Expo Go cannot provide.

15. Conclusion

In this tutorial, we learned how to set up React Native development using Expo.

We created a new Expo project, explored its folder structure, started the development server, connected Expo Go, and built a simple interactive counter screen.

Expo makes the initial React Native development process easier and helps beginners focus on learning application development.

16. Frequently Asked Questions

Q1. Is Expo required for React Native?

No. Expo is a framework and toolset for React Native, but it is not the only way to develop React Native applications.

Q2. Is Expo Go free?

Yes. Expo Go is available as a free learning and testing application.

Q3. Can I build Android applications using Expo?

Yes. Expo supports Android application development and provides build tools through Expo Application Services.

Q4. Can I use Expo without Android Studio?

Yes. You can test compatible applications on a physical Android phone using Expo Go without installing Android Studio.

Q5. What is Metro Bundler?

Metro is the JavaScript bundler used by React Native. It serves the JavaScript bundle during development.

Q6. Can Expo applications run on iOS?

Yes. Expo supports iOS development as well as Android and web.

Q7. What should beginners learn after setting up Expo?

Beginners should learn JavaScript fundamentals, JSX, React Native components, props, state, and styling.