Navigation is crucial for all mobile applications, however, getting it right sometimes is quite challenging.

The industry go-to solution for navigation in React Native is React Navigation which provides us with the most common navigators: Stack, Tabs, Drawer, etc.

💡 React Navigation offers native navigators (ex: NativeStackNavigator) that use the underlying native API on iOS and Android. This makes it as performant as a native app.

I don’t have anything against React Navigation, however…

I recently asked you on Twitter:

• Typing
• Nesting multiple navigators (Stack → Drawer → Tab → Stack)
• Animated transitions
• Deep linking
• Managing shared screens

What can I say?

I can relate to a lot of these challenges.

In a small project, you might not get into these bottlenecks, however, when the project grows in size, and you start dealing with a lot of screens, deeply nested navigators, typings, etc. - it becomes tough to manage. Every change in navigation becomes harder and harder, and the chance it will introduce new bugs grows exponentially.

Is there a better way?

It looks like we are moving in that direction.

The previous week I gave it a try and played with Expo Router - a new navigation library for React Native apps, developed by Evan Bacon from Expo team.

Another library?

Yes, but this one is quite different than the rest of the navigation libraries out there, and it might be the new way we will implement navigation in the future.

What do I mean?

Expo Router is a file-based navigation system. You simply create files in your source code, and expo router will automatically create the pages and the whole navigation tree.

If you worked with NextJS, you should be familiar with the file-based navigation systems and their benefits.

This leads to less boilerplate and will make nesting multiple navigators much easier - you just create sub-folders.

Routing and Linking

Expo router brings a lot of conventions from the web to mobile.

Our file structure automatically generates routes, and we navigate to them using links.

For example, to go to a user page, you will redirect to app://user/vadim. Assuming you have the directory app/user with a file [name].js , expo router will render that page, and it will automatically parse the dynamic parameter name from the URL (in this case: vadim).

If you want to give it a try, check out this livestream where I go other the most important features of the expo-router. This is a great way to get started in just 1.5 hours

Expo router also

• Works on iOS and Android (obviously) and also WEB
• Automatically generates deep link (that’s a winner)
• Is fully customizable
• And yes, it works with React Native CLI apps as well

🔴 Join me live

Let's build the Ultimate Nike App with React Native and Redux

See you there 👋

🔁 In case you missed it

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker that can benefit from it as well. That would be much appreciated 🙏