DEV Community

Cover image for Getting started with Expo and React Native 2025
Nish
Nish Subscriber

Posted on

Getting started with Expo and React Native 2025

Introduction

When we are building apps for the mobile or talking about mobile development. We can classify them into two categories:

  1. Native Development: Apps are built specifically for a platform using the platform's official languages and tools.

  • Android --> Built with Kotlin or Java using Android Studio.

  • IOS ---> Built with Swift or Objective-C using XCode.

  1. Hybrid Development: Apps are built using web technologies where there is one codebase that runs on both platforms.
  • React Native --> Built with JavaScript using React.
  • Flutter --> Built with Dart using Flutter.

With these options in our arsenal, whenever we are choosing to go with React Native, we have 2 choices, either to go with React Native CLI or the EXPO Framework.

Project Setup

Here is the official Expo Documentation to create a new project:

npx create-expo --help
Enter fullscreen mode Exit fullscreen mode

This will help us to determine which package manager to use and whether to go with barebones setup or use existing template setup with react-router installed.

For me personally, I would like to go with an empty template and add things along the way.

Choose the empty template for maximium flexibility.

Template selection

For me, I would like to go with pnpm

Selecting Template

Navigate to the project and then

pnpm expo start
Enter fullscreen mode Exit fullscreen mode

Starting Project

As of now I am running on an IOS Simulator, you can even use the EXPO GO app to run the project. Here, Expo Go is a sandbox that enables you to quickly experiment with building native Android and iOS apps. I

First App

Installing ESLINT and Prettier

With ESLint and Prettier, we can maintain code quality and consistent formatting.

npx expo lint
Enter fullscreen mode Exit fullscreen mode

We also need the babel.config.js and metro.config.js files.

npx expo customize
Enter fullscreen mode Exit fullscreen mode

Make sure to use space bar to select the babel and metro files.

Metro files

In the metro.config.js make the following changes:

/* eslint-env node */
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(
   __dirname 
);

module.exports = config;
Enter fullscreen mode Exit fullscreen mode

Then install prettier in the project

npx expo install prettier eslint-config-prettier eslint-plugin-prettier --dev
Enter fullscreen mode Exit fullscreen mode

Make changes to the eslint.config.js

const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');

module.exports = defineConfig([
  expoConfig,
  eslintPluginPrettierRecommended,
  {
    ignores: ['dist/*'],
  },
]);
Enter fullscreen mode Exit fullscreen mode

Now, when we run npx expo lint, anything that is not aligned with Prettier formatting will be caught as an error.

Also for the prettier configuration, we can follow this link

Adding Expo Router

In mobile and web apps, routing manages how a user moves between different screens or views within your application. There are various routing libraries (or navigation libraries) for React Native, like "React Native Navigation" and "React Navigation", with the latter being a popular choice amongst the Expo Developers.

Building mobile apps often involves managing how users navigate between different screens. In the realm of Expo development, the Expo Router emerges as a valuable tool for streamlining this process. 

Expo Router enables file based routing which is very similar to Next.JS. An Expo router project will have a root folder called app, which may only contain screen and layout files. Since we are following manual installation

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
Enter fullscreen mode Exit fullscreen mode

Every project must have a index route, even if we don’t use index other wise, we must have one file called index in our app folder. It is the screen that open first when the app is lunched. The only way to use a different screen when the app is lunched is using a redirect.

Create a folder called src and inside a subfolder called app and then create a new file called index.tsx and copy the contents of the App.tsx to the index.tsx and make the screen as IndexScreen

Renaming Files

Now we need to setup entry point and modify the project configuration
In the package.json add

{
  "main": "expo-router/entry"
}
Enter fullscreen mode Exit fullscreen mode

In the app.json add a deep link

{
  "scheme": "your-app-scheme"
}
Enter fullscreen mode Exit fullscreen mode

Adding Configs

Now we can delete the index.ts and the App.tsx file, the project structure looks like this:

Also since we have done a lot of changes, we can reset the cache and try running our project again.

npx expo start --reset cache
Enter fullscreen mode Exit fullscreen mode

Project Structure

Running

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.