1. Introduction

React Native allows developers to build mobile applications for Android and iOS using JavaScript and React.

Expo makes React Native development easier by providing tools for creating, running, and testing mobile applications.

Expo Go is a mobile application that allows developers to preview compatible Expo projects on physical Android and iOS devices.

In this tutorial, we will:

• Understand Expo Go.

• Create a new React Native application.

• Explore the project structure.

• Start the Expo development server.

• Connect an Android phone using a QR code.

• Build an interactive mobile application.

• Test buttons, text inputs, and state management.

• Understand Fast Refresh and common errors.

2. What Is Expo Go?

Expo Go is a mobile application that provides a ready-to-use environment for previewing compatible Expo projects.

It allows developers to test applications without creating a separate native Android or iOS build for every change.

Important features:

• Preview React Native applications on physical devices.

• Scan QR codes to open development projects.

• Test UI changes quickly.

• Use supported Expo SDK libraries.

• Reload applications during development.

Expo Go is especially useful for beginners who want to learn React Native without dealing with complex native configuration.

Official website:

https://expo.dev/go

3. Requirements Before Starting

Before creating your first application, make sure you have:

1. Node.js LTS installed.

2. npm installed.

3. Visual Studio Code installed.

4. Expo Go installed on your Android phone.

5. A working internet connection.

6. A terminal such as Command Prompt or VS Code Terminal.

Check Node.js:

node -v

Check npm:

npm -v

If both commands display version numbers, you can continue.

4. Install Expo Go on Your Android Phone

Follow these steps:

1. Open Google Play Store.

2. Search for Expo Go.

3. Select the official Expo Go application.

4. Install it.

5. Open Expo Go.

You can also visit:

https://expo.dev/go

Expo Go will be used to open and test the application created on your computer.

5. Create Your First React Native Project

Open Command Prompt or VS Code Terminal.

Execute:

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

This command creates a new Expo application named MyFirstExpoApp using the default SDK 58 template.

Wait until the project and its dependencies are installed.

If you are using a different SDK version, choose a template compatible with the Expo Go version installed on your phone.

Now enter the project directory:

cd MyFirstExpoApp

Open the project in Visual Studio Code:

code .

Your first Expo project is ready.

6. Understand the Project Structure

The default Expo Router project may contain the following structure:

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

Important files:

src/app/index.tsx

This file defines the initial screen of the application.

src/app/_layout.tsx

This file manages the root layout and navigation configuration.

assets/

Stores images, fonts, and other static resources.

app.json

Contains Expo application configuration.

package.json

Contains dependencies and project scripts.

node_modules/

Stores the installed packages.

The exact folder structure can vary depending on the selected template.

7. Start the Expo Development Server

Open the terminal inside your project folder.

Execute:

npx expo start

Expo will start the Metro development server.

After successful startup, you will see a QR code in the terminal.

You may also see options such as:

Press a - open Android
Press i - open iOS
Press w - open web
Press r - reload app
Press ? - show all commands

The QR code contains the development URL needed to open your project.

8. Connect Your Android Phone Using Expo Go

Now connect your phone to the development server.

Follow these steps:

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

2. Open Expo Go on your phone.

3. Select the Scan QR Code option.

4. Scan the QR code displayed in the terminal.

5. Wait for the JavaScript bundle to load.

6. Your application will open inside Expo Go.

You should now see the default Expo application on your Android phone.

If your network prevents local device connections, try:

npx expo start --tunnel

Tunnel mode can help when LAN connections are blocked, although it may be slower.

9. Open the Project in Android Emulator

If you completed Tutorial 7 and configured Android Studio, you can also run your application on an Android Emulator.

Follow these steps:

1. Open Android Studio.

2. Start your previously created virtual device.

3. Open your Expo project in VS Code.

4. Execute:

npx expo start

1. Press the A key in the terminal.

Expo will attempt to open the application in the Android Emulator.

This gives you two testing options:

• Physical Android phone using Expo Go.

• Android Emulator using Expo Go.

10. Build Your First Interactive Mobile Application

Now we will create a simple application called My First Expo App.

The application will include:

• Welcome heading.

• Name input field.

• Greeting message.

• Interactive counter.

• Increase button.

• Reset button.

Open the following file:

src/app/index.tsx

Replace its existing code with:

import React, { useState } from 'react';

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

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

  return (
    <ScrollView contentContainerStyle={styles.container}>

      <Text style={styles.title}>
        My First Expo App
      </Text>

      <Text style={styles.subtitle}>
        Welcome to React Native!
      </Text>

      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        placeholderTextColor="#94a3b8"
        value={name}
        onChangeText={setName}
      />

      <Text style={styles.greeting}>
        {name.trim()
          ? `Hello, ${name}!`
          : 'Hello, Developer!'}
      </Text>

      <View style={styles.counterBox}>

        <Text style={styles.counterTitle}>
          Button Click Counter
        </Text>

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

        <Pressable
          style={styles.button}
          onPress={() => setCount(count + 1)}
        >
          <Text style={styles.buttonText}>
            Increase Counter
          </Text>
        </Pressable>

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

      </View>

      <Text style={styles.footer}>
        Built with React Native and Expo
      </Text>

    </ScrollView>
  );
}

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

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

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

  input: {
    width: '100%',
    backgroundColor: '#ffffff',
    padding: 15,
    borderRadius: 10,
    fontSize: 16,
    marginBottom: 20,
  },

  greeting: {
    color: '#38bdf8',
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 30,
  },

  counterBox: {
    width: '100%',
    backgroundColor: '#1e293b',
    padding: 25,
    borderRadius: 15,
    alignItems: 'center',
  },

  counterTitle: {
    color: '#ffffff',
    fontSize: 18,
    marginBottom: 15,
  },

  counter: {
    color: '#38bdf8',
    fontSize: 45,
    fontWeight: 'bold',
    marginBottom: 20,
  },

  button: {
    width: '100%',
    backgroundColor: '#2563eb',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginBottom: 12,
  },

  resetButton: {
    width: '100%',
    backgroundColor: '#dc2626',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },

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

  footer: {
    color: '#94a3b8',
    fontSize: 13,
    marginTop: 30,
  },
});

Save the file.

Expo will automatically send the updated JavaScript bundle to the running application.

11. Understand the Application Code

A. Import React Native Components

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

These components are used to build the mobile application's user interface.

View: Creates a layout container.

Text: Displays text.

TextInput: Accepts user input.

Pressable: Creates a touchable element.

StyleSheet: Organizes styling properties.

ScrollView: Allows content to scroll when it exceeds the available screen space.

B. Understand useState

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

The useState hook stores information that can change while the application is running.

Here:

• name stores the entered name.

• count stores the current counter value.

• setName updates the name.

• setCount updates the counter.

C. Understand TextInput

<TextInput
  placeholder="Enter your name"
  value={name}
  onChangeText={setName}
/>

TextInput allows the user to enter a name.

Whenever the user types something, onChangeText calls setName and updates the state.

D. Understand Pressable

<Pressable
  onPress={() => setCount(count + 1)}
>
  <Text>Increase Counter</Text>
</Pressable>

When the user taps the button, the counter increases by one.

E. Understand Reset Functionality

onPress={() => setCount(0)}

This resets the counter to zero.

12. Test Your Application

Now test the application on your Android phone.

Test 1: Application Launch

Open the application using Expo Go.

Expected result: The welcome screen should appear.

Test 2: Name Input

Enter your name in the input field.

Expected result: The greeting message should update automatically.

Test 3: Counter Button

Tap Increase Counter several times.

Expected result: The counter value should increase.

Test 4: Reset Button

Tap Reset Counter.

Expected result: The counter should return to zero.

If all four tests work correctly, your first interactive React Native application is running successfully.

13. What Is Fast Refresh?

Fast Refresh is a development feature that updates your application after you save code changes.

For example:

1. Open index.tsx.

2. Change the heading text.

3. Save the file.

4. Check your Android phone.

5. The updated interface should appear.

This reduces the time required to repeatedly restart the application.

Fast Refresh generally preserves component state when possible, but some code changes can reset it.

14. Important Expo Commands

Start the application:

npx expo start

Start with tunnel networking:

npx expo start --tunnel

Clear the Metro cache:

npx expo start --clear

Open Android:

Press A in the running Expo terminal

Open web:

Press W in the running Expo terminal

Check project dependencies:

npx expo install --check

15. Common Errors and Solutions

Error 1: QR Code Is Not Connecting

Possible causes:

• Computer and phone are on different networks.

• Local network access is blocked.

• Firewall restrictions.

Solutions:

• Connect both devices to the same Wi-Fi.

• Restart Expo.

• Try tunnel mode.

• Check firewall permissions.

Error 2: Expo Go Shows an SDK Compatibility Error

Possible cause:

The project SDK is not compatible with the installed Expo Go version.

Solutions:

• Check the Expo SDK version in package.json.

• Install the compatible Expo Go version where available.

• Upgrade the project if necessary.

• Consider a development build when appropriate.

Error 3: Application Shows a Blank Screen

Possible causes:

• Syntax errors.

• Incorrect file path.

• Missing imports.

• Runtime errors.

Solutions:

• Check the terminal.

• Check the application error screen.

• Verify the default export.

• Correct the code and save again.

Error 4: Application Is Not Updating

Solutions:

• Save the file.

• Check the Metro terminal.

• Reload the application.

• Restart Expo with the clear-cache option if necessary.

Error 5: Text Input Is Not Working

Solutions:

• Verify the value property.

• Verify the onChangeText callback.

• Check that the state setter is correctly connected.

16. Expo Go vs Development Build

Expo Go is designed for quick learning and testing.

Development builds provide a customized native application containing the native modules required by your project.

Expo Go:

• Suitable for beginners.

• Quick to launch.

• Uses the Expo Go native runtime.

• Limited to supported native modules.

Development Build:

• Supports custom native modules.

• Provides a project-specific native runtime.

• Better suited to complex applications.

Start with Expo Go while learning the basics. Move to development builds when your project needs custom native functionality.

17. Conclusion

In this tutorial, we created our first React Native application using Expo.

We installed Expo Go, created a new project, explored its structure, started the development server, connected an Android phone using a QR code, and built an interactive application.

We also learned how to use TextInput, Pressable, View, Text, StyleSheet, ScrollView, and useState.

You now have a working starting point for building more advanced mobile applications with React Native.

18. Frequently Asked Questions

Q1. What is Expo Go?

Expo Go is a mobile application that allows developers to preview compatible Expo projects during development.

Q2. Do I need Android Studio to use Expo Go?

No. You can test your application directly on a physical Android phone without installing Android Studio.

Q3. Can I use Expo Go on iPhone?

Yes. Expo Go supports iOS. A physical iOS device also requires the relevant Expo account sign-in for opening development projects.

Q4. What is Metro Bundler?

Metro is the JavaScript bundler used by React Native to serve the application bundle during development.

Q5. What is Fast Refresh?

Fast Refresh updates your running application after code changes are saved.

Q6. Can I build a complete application using Expo?

Yes. Expo supports development and production workflows, including native modules through development builds.

Q7. Is Expo Go suitable for production applications?

Expo Go is primarily a learning and testing environment. Production applications should be built and distributed as their own application packages.