React native Question posted in
The official React Native documentation can be found here.

React native – How to define a default stack different from index.tsx

With React Native Expo Router, I would like to define a default stack different from index.tsx. At the moment, when I start an app with one simple stack named page1.tsx, expo router does not find it and display "Unmatched route (page could not me found)".

To reproduce the issue,

  • npx create-expo-app@latest
  • npm run reset-project

and change the following 2 files:

in app folder:

_layout.tsx

page1.tsx

_layout.tsx file:

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="page1" options={{ title: "P1" }} />
    </Stack>
  );
}

page1.tsx file:

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

package.json :

"dependencies": {
    "expo": "~52.0.19",
    "expo-router": "~4.0.13",
    "expo-web-browser": "~14.0.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.5",
Tags:

2

Answers


  1. 0

    Expo Router works with file-based routing, much like traditional websites. The index file is the default entry into your app / a specific directory.

    If you for whatever reason would like to use "page1" as your default entry file instead, there are two ways to accomplish this:

    1. The less hacky way. You could make an index file that returns a Redirect to "/page1"
    2. You could use the unstable settings to redefine the Expo Router behaviour to your expectation. You can set initialRouteName to "page1" on your stack and this should cause it to act like the index.
    Login or Signup to reply.
  2. 0

    Do note that the expo-router currently has an open issue about initialRouteName not functioning properly. I’ve also encountered issues with it, and the best solution for me has been just to set up redirects like he said or use router.replace() if that doesn’t work.

    https://github.com/expo/router/issues/723

    Here’s the GitHub issue if you want to take a look.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search