Expo Router, No route named "register" exists in nested children

Question

I am developing Mobile App using expo react. I got the following error while I was trying to route my app using expo-router.

[Layout children]: No route named "register" exists in nested children: ["(auth)", "(tabs)", "[...missing]", "auth/index", "modal", "_sitemap"]

Below is my _layout.tsx in app folder

import FontAwesome from "@expo/vector-icons/FontAwesome";
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { SplashScreen, Stack } from "expo-router";
import { useEffect } from "react";
import { useColorScheme } from "react-native";

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from "expo-router";

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: "(tabs)",
};

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  return (
    <>
      {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
      {!loaded && <SplashScreen />}
      {loaded && <RootLayoutNav />}
    </>
  );
}

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
          <Stack.Screen
            name="register"
            options={{ presentation: "fullScreenModal" }}
          />
          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        </Stack>
      </ThemeProvider>
    </>
  );
}

My _layout.tsx in (auth) folder

import { Stack } from "expo-router";

export default function AuthLayout() {
  return (
    <>
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="register" />
      </Stack>
    </>
  );
}

Please can someone tell me what I am doing wrong

Answer 1

index. files can be skipped from the path only if there's a _layout next to it indexing it.

For instance if your project structure is as follow

app
 /(auths)
   /register
     index.tsx
   /index.tsx

The path to app/(auths)/register/index.tsx is then register/index not just register.

To omit the /index from the path end, you need to create a layout next to it app/(auths)/register/_layout.tsx which will list the index screen in its rendering.

// app/(auths)/register/_layout.tsx
import { Stack } from "expo-router";
export default function RegisterLayout() {
   return (
      <Stack>
        <Stack.Screen name="index" /> {/* <-- index it */}
      </Stack>
    );
}

Answer 2

First create file named _layout.tsx in your (auth) directory. So app directory should be look like this (ref):

bambi@ubuntu:~/path$ tree app
app
├── auth
│   ├── _layout.tsx // <= important!
│   ├── Login.tsx
│   └── Register.tsx
├── index.tsx
├── _layout.tsx
└── +not-found.tsx

Now in the Root layout config put this code (ref):

// _layout.tsx

import { SafeAreaView } from "react-native-safe-area-context";
import { PaperProvider } from "react-native-paper";
import { Stack } from "expo-router";
import { ThemeProvider } from "@react-navigation/native";



export const unstable_settings = {
  // Ensure any route can link back to `/`
  initialRouteName: "index",

  auth: { // <= important!
    initialRouteName: "Login", // <= important!
  },
};

export default function RootLayout() {
  // ...

  return (
    <ThemeProvider>
      <PaperProvider>
        <SafeAreaView style={{ flex: 1, margin: 0, padding: 0 }}>
          <Stack screenOptions={{ headerShown: false }} >
            <Stack.Screen name="auth" /> {/* <= important! */}
          </Stack>
        </SafeAreaView>
      </PaperProvider>
    </ThemeProvider>
  );
}

Also put this in the auth/_layout.tsx:

// auth/_layout.tsx

import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack initialRouteName="Login" screenOptions={{ headerShown: false }}> {/* <= important! */}
      <Stack.Screen name="Register" />
      <Stack.Screen name="Login" />
    </Stack>
  );
}

Now restart app by

yarn start --clear -c

PS: You can nesteding app by this format in any depth but its better to not do so nested/(too depth) as react may not find out which path you are in right now.