Getting started with Expo and React Native 2025

Nish — Sat, 07 Jun 2025 19:54:09 +0000

Introduction

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

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.

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

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.

For me, I would like to go with pnpm

Navigate to the project and then

pnpm expo start

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

Installing ESLINT and Prettier

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

npx expo lint

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

npx expo customize

Make sure to use space bar to select the babel and 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;

Then install prettier in the project

npx expo install prettier eslint-config-prettier eslint-plugin-prettier --dev

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/*'],
  },
]);

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

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

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

{
  "main": "expo-router/entry"
}

In the app.json add a deep link

{
  "scheme": "your-app-scheme"
}

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

DEV Community: Nish

New to Docker, will try this :)

10 hands-on Docker projects that’ll actually level up your skills not just hello-world junk

<devtips/> ・ Jun 19

Getting started with Expo and React Native 2025

Introduction

Project Setup

Installing ESLINT and Prettier

Adding Expo Router