Is expo-router a replacement for React Navigation for react native apps?

[xandemon]

Hey guys! I am just starting to learn React Native by myself and I am a bit confused about like everything. First of all, what is Expo in itself? Is it some sort of prerequisite/ must-have tool for developing React Native apps? Is it possible to build React Native apps without Expo at all like maybe using Android Studio and other stuffs?

I don't know any of that but I started React Native development with Expo because it was said to be simpler. Is Expo the recommended way to build React Native apps? What does the official React Native developers/team suggest?

And as I was learning, I came across react Navigation library used for navigation in react native apps. Now I am even more confused. React Navigation library is made by Expo, right? Is this just preferred by people, or is it a some sort of compulsion in React native apps? Now looks like the React Navigation hasn't had a stable update since 2021 0there seems to be pre-release available tho). Is it gonna be discontinued soon? And is expo-router the new form of navigation that will replace React Navigation?

I seriously need your guidances and suggestions in this. i have a lot of questions in my mind and since I am just starting out, what would be better to learn - Expo Router or React navigation or what to start my development journey with React Native?

[danilopolani]

As far as I understood - I'm new too in the React ecosystem - Expo is a superset of React Native to handle more easily some topics, such as native dependencies, builds, notifications etc.
Expo router is based on React Navigation and is file-based, where React Navigation, on the other hand, is configuration-first (no auto discovery of files to generate paths).
So far I found Expo Router easier for basic situations, but too hacky for others, also because it's still young as project.
For example, I found confusing how to create a Stack navigation inside a tab, because all the sub-routes were visible in my tabs (because of file-based routing with auto discovery). Now I'm struggling with "path rewrites" for universal links, since expo handles the incoming urls it seems not possible to rewrite them.
Hoenstly I would say it's worth to use Expo Router, but keep in mind about the limitations and - for now - low community support, since it's a new project

[xandemon]

Thanks! This helps a lot! At least somebody gave their opinion on this. I though this discussion will get closed without receiving any help.

[darrylyoung]

@danilopolani Thanks for sharing. I just started playing around with Expo Router, and I came across the same thing. I created some tabs, but then wanted to create the screens in a stack for each tab, e.g. in the cards tab I wanted a card screen, etc. The new files appeared in the tab bar. I saw that you can hide them from there with href: null in the screen options, but that doesn't seem like the way. I'm sure I'm missing a big piece here as I just started, and that's okay, but it'd be great if there was an example that actually had a tab layout, but with various screens/modals for each tab. If you're going with a tab layout, it's very likely each tab is a stack of various screens that live within that tab. I've done this before with React Navigation, but I guess I'm not quite there yet with Expo Router.

[danilopolani]

Ehy @darrylyoung , I've solved the issue by using the headerShown property to false on your "tab+stack" screen. I've recently found out that React Navigation suggests a different solution, but TBH I prefer this one.
For example, with this tree:

├── (tabs)
│   │   ├── (home)
│   │   │   ├── _layout.tsx
│   │   │   ├── details.tsx
│   │   │   └── index.tsx
│   │   ├── _layout.tsx
│   ├── [...missing].tsx
│   ├── _layout.tsx

The root _layout.tsx contains the default scaffold, like a ThemeProvider and a Stack with the Tabs, modals etc. (comes by default with expo router template):

<ThemeProvider value={colorScheme === 'dark' ? navigationDarkTheme : navigationLightTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
    </ThemeProvider>

Then, the (tabs)/_layout.tsx is the classic Tabs navigator and also there I've used headerShown: false:

<Tabs>
      <Tabs.Screen
        name="(home)"
        options={{
          headerShown: false,
          title: 'Home',
      />

      <Tabs.Screen
        name="two"
        options={{
          title: 'Tours',
      />
    </Tabs>

Finally, in (tabs)/(home)/_layout.tsx I have a Stack:

import { Stack } from 'expo-router';

export default function HomeLayout() {
  return <Stack />;
}

[darrylyoung]

Thank you so much for taking the time to explain that, @danilopolani. It's very much appreciated. I'll give it a try this weekend.

@EvanBacon Is there maybe an example of this kind of setup somewhere that I've missed?