A guide to native routing in Expo for React Native

Editor’s note: This article was last updated 16 June 2023 to include an example of navigating between tabs using Expo Router.

A decade ago, if anyone told you that you could build native mobile applications using JavaScript without compromising UX, you wouldn’t believe it, right? Then, React Native came along and made it possible. Similarly, a few years ago, if someone told you that you could build cross-platform apps using JavaScript without heavy emulator or developer environments, like Android Studio or Xcode, you wouldn’t believe it either, right? Then, Expo was created.

In this article, we’ll review some pros and cons of Expo Router, which is in v1 at the time of writing. To demonstrate its core concepts, we’ll build a React Native application using Expo Router for navigation. Let’s get started!

Jump ahead:

• What is Expo?
• Expo vs. React Native
• What is Expo Router?
  • Core features of Expo Router
• React Navigation vs. Expo Navigation
• Building a React Native contacts app with Expo Router
• Getting started
• Creating the contact model with AWS Amplify
• Initializing the backend environment
• Configuring the app with DataStore
  • Creating contacts using Amplify Studio
• Rendering contacts with a static route
• Rendering single contacts with a dynamic route
• Navigating between tabs

What is Expo?

Expo is an open source platform and set of tools that simplifies the process of building, deploying, and maintaining React Native applications. It provides a development environment, build infrastructure, and a collection of libraries and APIs that enhance the development experience.

With Expo, developers can create cross-platform mobile applications using JavaScript and React Native without needing extensive native code development or configuration. It abstracts away the complexities of setting up and managing native projects, allowing developers to focus on writing code and building features.

Expo vs. React Native

Expo and React Native are often interchanged for one another. Although they have similar features, there are a few important differences between them:

• Expo builds a layer of tools on top of React Native, allowing developers to build applications without writing any native code
• Expo CLI allows developers to create, deploy, and open apps on their devices
• Expo’s client app, Expo Go, allows you to open your projects without needing Android Studio or Xcode

However, Expo and React Native share one major feature, navigation. In React Native applications, routing is implemented using React Navigation, which wraps your app with a navigator component that manages the navigation history and presentation of screens in the app.

Although this worked well, it had some issues. For example, you had to install peer dependencies like react-native-screens and react-native-safe-area-context, which add extra weight to your app.

What is Expo Router?

We all know that JavaScript developers love file-based routing. Next.js’s file-based routing style works well and has quickly become the current standard for routing in JavaScript applications. This led Evan Bacon, the creator of Expo, to build a new library called Expo Router, which works similarly to the Next.js router. Both generate nested navigation and deep links based entirely on a project’s file structure.

Expo Router is a routing concept that extends the functionality of the React Navigation suite. If you’re already familiar with how navigation works in Next.js, understanding Expo Router should be pretty straightforward. Essentially, every file in your app directory becomes a route in your application, making it easy to manage navigation within your app.

Core features of Expo Router

Let’s review the core features of Expo Router:

• Offline-first and fast: Native apps must handle incoming URLs without an internet connection. Expo Router enables this by implementing these features across the entire framework
• Error handling: You can set up React error boundaries on each route
• Layout routes: Most screens in your app will share the same layout components. Expo Router allows you to create a parent layout component in the app directory
• Next.js-like linking and dynamic and static routing: Similar to the Next.js router, you can link routes using the Link component

import { Link } from "expo-router";

export default function Page() {
return (

Home
);
}

So far, the only major tradeoff with the new Expo Router is that it is limited and opinionated. Some developers may like the Expo Router features but want to rearrange the file directory structure. Unfortunately, due to its limitations, you might not be able to customize your Expo Router instance to fit your preferred structure just yet.

React Navigation vs. Expo Navigation

React Native Navigation and Expo Navigation are two popular navigation solutions for React Native applications. While they serve a similar purpose of handling navigation within an app, there are some noteworthy differences between them.

React Native Navigation provides a rich set of features, including support for bottom tabs, side menu drawers, stack-based navigation, and deep linking. It also offers advanced customization options, allowing you to finely control the navigation stack and perform custom transitions. However, it requires some native setup and configuration, making the initial setup a bit more complex compared to other solutions.

Expo Navigation offers a declarative API and a set of configurable navigators, including Stack Navigator, Tab Navigator, Drawer Navigator, and Switch Navigator. It provides a simple and intuitive way to define navigation flows and screens using components and props. Designed to work out of the box with Expo-managed projects, Expo Navigation eliminates the need for complex native configurations.

Expo Router, in general, makes app development faster and more intuitive for developers. Deep linking works right out of the box, and Expo Router is naturally URL-based, making it simple to target webpages.

React Navigation is unquestionably primitive, and you must create your own patterns for deeplinks, stack nesting, etc. Expo Router provides thoughtful APIs, but they may be too limiting. Expo Router is easier to use due to its simpler DX.

Building a React Native contacts app with Expo Router

We’ll build a contacts directory app that uses the Expo Router to navigate between screens. To follow along with this tutorial, you’ll need the following:

• Node.js ≥v14 installed
• Knowledge of JavaScript and React
• AWS Amplify CLI installed: npm install -g @aws-amplify/cli
• AWS Amplify configured: amplify configure
• Expo CLI installed: npm install -g expo-cli
• Expo Go: Installed from your mobile play store

Feel free to check out the GitHub repo with the complete code for the demo.

Getting started

Let’s get started by scaffolding a new Expo app. Run the command below in your terminal:

npx create-expo-app@latest --example with-router

The code above will create a new React Native application with Expo Router configured. Change the directory, initialize Amplify, and install peer dependencies using the following commands in your terminal:

cd ReactNativeContactExpoApp
npx amplify-app@latest
npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage

To run the app, run yarn start or npm run start:

Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▄███▀ ███ ▄▄▄▄▄ █
█ █   █ █ ▀█ ▄ █▄██ █   █ █
█ █▄▄▄█ █▄ ▄▄▀▀█▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄▀▄█ █ █▄▄▄▄▄▄▄█
█▄▄▄ ▀▀▄█ ▀████▀██▄██▄ ▄▀▄█
█▀▄▀▄▄▄▄▀▄██▀▀▀▄█▄█ ▀██▀███
█▄▀█▀ ▄▄▀▄▄▀ ▄ █ ▄█ ▄ █ █▀█
█▀▄▀██▀▄█ ▀ █▀███ ▀▀█▀▀█ ▀█
███▄▄▄▄▄█ ▄▀ ▄  ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ███ ▀▄███ █▄█ █▄  █
█ █   █ █▀▀█▀ ▀▀▀▄▄   █▀▀ █
█ █▄▄▄█ █  ▄▄█▀ ▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄█▄██▄█▄██████▄▄▄█

› Metro waiting on exp://192.168.55.200:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:19000

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Scan the QR code on your mobile Expo Go app, and it’ll compile.

Creating the contact model with AWS Amplify

Just like with every other database, DataStore requires a model. To generate this model, head to the Amplify Directory > Backend > API > (Amplify project name) > schema.graphql. Modify schema.graphql with the following code:

type Contact @model {
  id: ID!
  name: String!
  phone: String!
  email: String!
  address: String
  message: String
}

The contact model has id, name, title, phone, and email fields. Let’s go ahead and generate the model with the following command in your terminal:

npm run amplify-modelgen

The code above will create a src/models folder with the model and GraphQL schema.

Initializing the backend environment

We need to initialize an Amplify backend environment for the application. To do this, run the following command in your terminal:

amplify init
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

This will create a configuration file in src/aws-config.js. Next, we’ll deploy the backend and create AWS resources using the following command:

amplify push
...
Do you want to generate code for your newly created GraphQL API? No
...

Depending on the quality of your internet connection, this might take some time to deploy.

Configuring the app with DataStore

Let’s go ahead and configure the Expo app to work with Amplify. Create an app/index.js file and add the code below:

import config from '../src/aws-exports';
import { DataStore, Amplify } from 'aws-amplify';

Amplify.configure(config)

Creating contacts using Amplify Studio

Now, let’s add some contacts to our DataStore. Head to the AWS Amplify console in your browser. As a shortcut, you can run amplify console in your terminal and select AWS Console. To create contacts with Amplify Studio, go to the Amplify dashboard and click Launch Studio:

You should see something like the following:

Click the Data menu by the left sidebar of the dashboard, then click Save and Deploy:

You can see the schema that we created and edit it using the UI. Deploying the data model might take few minutes, depending on your internet connection:

When it’s done deploying, open the Content menu:

To create a new contact, click the Create contact button. You can also auto-generate seed data by clicking the Actions dropdown and selecting Auto-generate data. That’s it! We’ve successfully created contacts for the application.

Rendering contacts with a static route

Now, let’s render the contacts. Update the app/index.js file with the following code:

import { View, Text, Button } from "react-native";
import { Link, Stack } from "expo-router";
import config from '../src/aws-exports';
import { DataStore, Amplify } from 'aws-amplify';
import { Contact } from '../src/models'
import { useState } from "react";

Amplify.configure(config)

export default function Home() {
    const [contacts, setContacts] = useState([])

    async function fetchContacts() {
        const allContacts = await DataStore.query(Contact)
        setContacts(allContacts)
    }

    fetchContacts()

    return (
        <View style={container}>
            <Stack.Screen options={{ title: "Contacts" }} />
            {
                contacts.map(contact => (
                    <View key={contact.id} style={contactBox}>

                        <View>
                            <Text style={textStyleName}>{contact.name}</Text>
                            <Text style={textStyle}>{contact.phone}</Text>

                        </View>
                        <Link href={`contacts/${contact.id}`}>
                            <Button
                                title="View contact"
                                color="#841584"
                            />
                        </Link>
                    </View>
                ))
            }
        </View>
    );
}

In the code above, we query the contacts from the DataStore by passing the model to the DataStore .query() method:

DataStore.query(Contact)

To get more details for each contact, we used the new Expo Router link component and passed the \[contact.id\](<http://contact.id>) to the href attribute. The dynamic route will be contacts/[contactId].

Rendering single contacts with a dynamic route

Let’s create the screen for contact details. In the app directory, create a contacts folder and an [id].js file:

import { Text, View } from "react-native";
import { Stack } from "expo-router";
import { useEffect, useState } from "react";
import { Contact } from "../../src/models";
import { DataStore } from "aws-amplify";

export default function SingleContact({ route }) {
    const [contact, setContact] = useState('')
    useEffect(() => {
        if (!route.params?.id) {
            return
        }
        DataStore.query(Contact, route.params.id).then(setContact)
    }, [route.params?.id])
    return (
        <View style={container}>
            <Stack.Screen options={{ title: contact.name }} />
            <View style={contactBox}>
                <Text style={textStyleName}>{contact.name}</Text>
                <Text style={textStyle}>{contact.phone}</Text>
                <Text style={textStyle}>{contact.email}</Text>
                <Text style={textStyle}>{contact.address}</Text>
                <Text style={textStyle}>{contact.message}</Text>
            </View>
        </View>
    );
}

If you’ve worked with Next.js, this code should look familiar. The major difference is that the Expo Router makes the route object available without importing it.

In DataStore, to query a single item by its ID, you pass the model and ID you want to query. In our case, we pass the params ID. Run your app, and you should get something like the following:

Our final contacts app, built with the new Expo Router

Navigating between tabs

To achieve navigation between tabs using Expo Router, first, run the following code to create a project with expo-router set up:

npx create-expo-app@latest --example with-router

The command above initializes and creates our application with routing functionality. Next, run the following command to start your Expo app:

npm start

Click on the touch app/index.js button on the bottom screen of your emulator to create the app directory with the index.js file. Update the index.js file as follows:

import { Redirect } from "expo-router";
export default function Page() {
  return <Redirect href={'/home'}/>
}

In the app directory, create _layout.js and add the following code:

import { Stack } from "expo-router";
export default () => {
    return <Stack
        screenOptions={{
            headerStyle: {
                backgroundColor: "green"
            },
            headerTintColor: "#1E2632",
            headerTitleStyle: {
                fontWeight: "bold"
            }
        }}
    />
};

In the example above, we use Stack from Expo Router to create a stack navigator. We set the screenOptions prop to customize the header styles for all screens in the stack. In the app directory, create home/feed.js and add the following code:

import { View, Text } from "react-native";
const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};
export default Home;

In the home directory, create inbox.js and add the following:

import { View, Text } from "react-native";
const Inbox = () => {
  return (
    <View>
      &lt;Text>Inbox</Text>
    </View>
  );
};
export default Inbox;

In the app directory, create home/_layout.js and add the following:

import { Tabs } from "expo-router";
import { FontAwesome } from "@expo/vector-icons";
export default () => {
  return (
    <Tabs screenOptions={{ tabBarShowLabel: false }}>
      <Tabs.Screen
        name="feed"
        options={{
          tabBarIcon: ({ color }) => (
            <FontAwesome name="home" size={24} color={color} />
          ),
          title: "Feed",
        }}
      />
      <Tabs.Screen
        name="inbox"
        options={{
          tabBarIcon: ({ color }) => (
            <FontAwesome name="envelope" size={24} color={color} />
          ),
          title: "Inbox",
        }}
      />
    </Tabs>
  );
  // return <Tabs/>
};

In the code above, we use Tabs from Expo Router to create a bottom tab navigator. We set the screenOptions prop to customize the tab icons based on the route name using the FontAwesome icon library. Additionally, we use color props to specify the colors for active and inactive tabs. Now, you should see the following result:

Conclusion

In this article, we learned about Expo Router, how it works, its core features, and its tradeoffs. We built a React Native app with Expo and data from Amplify DataStore. We also built a tab navigator to achieve navigation between tabs using Expo Router.

File-based routing is the future of smooth navigation experience for mobile applications, and Expo Router implements this solution into its library. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!