Exploring the Power of Expo Router v2: What's New and How to Get Started

As the world of app development continues to evolve, finding a routing solution that seamlessly connects mobile and web applications has become a top priority for developers. That's where Expo Router v2 steps in – the latest version of Expo's powerful routing library that redefines the way we navigate through our React Native apps. In this blog post we'll dive into the power and capabilities of Expo Router v2. Whether you're a seasoned React Native developer or just beginning your journey, this feature-packed routing solution has something to offer for everyone.

What’s new in Expo Router v2?

Expo Router v2 introduces a lot of exciting new features that elevate the app development experience to a new level. Let's take a look at the key enhancements:

Auto Typed Routes
First-class support for aliased imports
Static Routes
Async Routes
Reanimated Shared Element Transitions
Improved Error Handling
Universal Links
first-class support for CSS Modules, Sass and PostCSS configuration files and many more.

Let’s explore these new features by creating a simple application. To start out I’ll be using the Expo starter, which will have all necessary dependencies already installed.

Scaffold the application by running:

File-based routing

As you may have noticed, the above command generated us a project with an app folder. What is striking here is the specific naming of files. Expo Router uses file-based routing, so when creating applications with it, we have to stick to a proper file naming convention.

When we create a file in the app folder and export default a React Component from it, it automatically becomes a route in our application. For example:

app/products.tsx
matches
/products
app/profile/index.tsx
matches
/profile
- files named
index
do not add any segment to the path.

Other typical file naming in Expo Router:

_layout
- file defining a layout for child routes. It can be really useful with
<Tabs />
or
<Stack />
for nesting navigators.
[id]
- file defining a dynamic route. Example:
app/products/[id].tsx
matches
/products/1
,
/products/2
etc.
[…missing]
- file defining a dynamic route, but matches multiple slugs. Example:
app/profile/[...routes]
matches
/profile/a/b/c
.
(tab)
- directory names wrapped in parenthesis prevent a segment to appear in the URL. It can be useful in grouping and organizing your routes or creating a layout without affecting the URL.
+html
- file defining a layout for the default HTML wrapper for child routes - it can be useful for static routes (if you also want to support Web).

Move the app to top-level src directory

Once we understand the file naming conventions, we can proceed to explore the capabilities of the new version of Expo Router.

Let's start by organizing our project by placing the

app

folder in the

src

folder. Personally, I prefer to structure my project this way, and with the Expo Router update we can do this without any configuration, simply by creating an

src

folder and moving the

app

folder into it.

Note that all configurational files as well as the

public

directory must remain in the root of the project.

Async Routes

One of the exciting new features in Expo Router v2 is "Async Routes", designed to enhance the scalability and upgrading process of your app. It basically is a first-class lazy bundling, allowing you to incrementally bundle your app page by page instead of all at once. This is especially beneficial for large teams working on massive apps with thousands of screens. When using Expo Router v2, any errors that might occur are deferred until you load a specific page. This means that even if one page out of a thousand has an error, it won't bring down the entire app. With Async Routes, you can progressively upgrade your app over time without worrying about major disruptions. It's essential to note that Async Routes is currently available as an experimental feature in Expo Router v2. You can enable it during development mode to experience its benefits. While it doesn't support static rendering due to constraints around React Suspense, it promises to bring even more stability and scalability to your app. Let’s configure the async routes in our application to see it in action. All we need to do is enable it in the app.json:

simulator_screenshot_75E6989F-0856-46E6-81E6-8E7C5BC8DC45 (1) (1).png

Auto Typed Routes

Expo Router v2 introduces Auto Typed Routes. Expo CLI now automatically generates static type definitions for each route in your Expo Router app. With this feature you can now use autocomplete with the

<Link />

component and other navigation related hooks coming from Expo Router. In Expo SDK 49 Auto Typed Routes are supported out of the box, without any configuration.

Query Parameters

Query parameters, also known as Search parameters, play a crucial role in passing data between pages within an app. Expo Router introduces two powerful hooks,

useLocalSearchParams

and

useGlobalSearchParams

, to efficiently handle and manipulate these parameters.

useLocalSearchParams:

The

useLocalSearchParams

hook is your go-to solution for accessing search parameters specific to the current component. It updates only when the global URL conforms to the route, ensuring that you can efficiently retrieve and modify the search parameters within the context of the current component.

In nested apps where multiple pages are mounted simultaneously, useLocalSearchParams proves to be an essential tool. For instance, if a stack contains the previous page and the current page in memory when a new route is pushed, useLocalSearchParams comes in handy to manage the search parameters of the current component with precision.

useGlobalSearchParams:

When you need to access the global URL regardless of the component,

useGlobalSearchParams

is the ideal choice. Unlike

useLocalSearchParams

, this hook updates on every search param change, which means that it might cause components to update extraneously in the background.

While

useGlobalSearchParams

offers powerful global access to search parameters, it's essential to use it judiciously, as excessive re-renders can potentially lead to performance issues. Global re-renders occur in the order of the stack, so the first screen is re-rendered first, followed by subsequent screens with updated search params.

Reanimated Shared Element Transitions

The newer version of Expo Router now fully supports Reanimated Shared Element Transitions. For those of you who don’t know, Shared Element Transitions is a feature that allows you to smoothly transform a component from one screen into a component on another screen, creating a seamless and visually captivating experience for your users.

When using Reanimated Shared Element Transitions, you simply add a

sharedTransitionTag

prop to the components you wish to animate. As your app navigates between screens, Reanimated detects the mounting or unmounting of components with the same

sharedTransitionTag

. When a match is found, Reanimated takes a snapshot of the styles for both components and temporarily detaches them from their parent. The components are then attached to a temporary transition container for the duration of the animation. After the animation is complete, the shared views are smoothly reattached to their original parent, providing a seamless visual transition between screens.

Let’s test possibilities of Reanimated and Shared Element Transitions. First, install

react-native-reanimated

We also need to add the Babel plugin to babel.config.js:

Then, restart your server and clear the cache:

I’ve prepared a simple application with a list of products and a simple product details page to showcase the Shared Element Transitions. Here’s what the app looks like:

Let’s start implementing the Shared Element Transition. The product image seems to be a good candidate to test out this feature. First, we need to import Animated from react-native-reanimated for both Product List Item component and Product Details Page.

Then, let’s use the <Animated.Image /> component - a wrapper around the regular React Native <Image /> component - that will handle the transitioning between screens.

Product List Item component:

Product Details Page:

Now the important part - in order for Reanimated to recognize which images should be transitioned between screens we need to add the

sharedTransitionTag

prop for both

<Animated.Image />

components with the same value.

Product List Item component:

Product Details Page:

And that’s all it takes, let’s see the result:

Conclusion

Expo Router v2 is a game changer for React Native developers, offering a feature-packed and user-friendly routing solution. With Auto Typed Routes, developers benefit from auto generated static type definitions for each route, streamlining the development process. Async Routes enable incremental app bundling and progressive upgrades, enhancing error handling and stability. Reanimated Shared Element Transitions bring elegance to app navigation, providing smooth transformations between screens for a captivating user experience. Expo Router v2's hooks, useLocalSearchParams and useGlobalSearchParams, effortlessly handle query parameters. Expo Router v2 can elevate your app development with its powerful capabilities, file-based routing and support for CSS modules, Sass and PostCSS. I encourage you to try it out!

Are you ready to revolutionize your app navigation? Dive into Expo Router v2 today and explore the endless possibilities it brings to your projects. For any questions, assistance, or to share your experiences, feel free to reach out to us.

Would you like to innovate your ecommerce project with Hatimeria?

Author

Hubert

Developer

An MMA enthusiast and code ninja. He has a black belt in both coding and roundhouses. When he is not delivering top-notch software, he can be found at the gym, honing his skills and training for his next fight.