initialRouteName has no effect

[ep1kt3t0s]

Which package manager are you using? (Yarn is recommended)

npm

Summary

On a fresh Expo project with tabs and Typescript, the unstable_settings.initialRouteName has no effect.

I also tested <Stack initialRouteName=...> and it also has no effect.

Basically, any directory with parenthesis (something) alphabetically at the top becomes the default route, unless there is an index directory.

This doesn't correlate with what's described in the documentation: https://expo.github.io/router/docs/features/routing/#layout-settings

Minimal reproducible example

Steps to reproduce:

Step 1, Environment

$ npx expo --version
0.7.3

$ npx expo init --npm
Select: tabs (TypeScript)

Step 2, Testing the effect

Duplicate (tabs) directory and rename the duplicate to (a)
Update some text in (a)/index.ts
Add <Stack.Screen name="(a)" options={{ headerShown: false }} /> into the <Stack>

Result: (a) will be the default route without unstable_settings.initialRouteName is updated. You can set anything to unstable_settings.initialRouteName, there is no effect.

[eridr]

Only when both unstable_settings and initialRouteName in the Stack is used then it works. 🤷‍♂️

[NiklasEi]

I am running into this when deep linking from one tab with its own stack to another tab with its own stack. There is no back button for the deep linked page although, unstable_settings.initialRouteName and initialRouteName on the deep linked Stack are configured.

[suhail135]

import { Redirect } from "expo-router";

const Index = () => {
	return <Redirect href="/onboarding" />;
};
export default Index;

i know it's not a proper solution. for now am going with this.

check out : #428

[matthewhausman]

I'm able to use this to impact the router history with groups. My initial problem was I couldn't figure out how to have proper pop/push animations. I always wanted anything in (auth) group to pop and anything in (tabs) to push. Turned out I just had to export this in the root layout:

export const unstable_settings = {
  initialRouteName: '(auth)',
}

[Zenb0t]

Well, I'm running into the same issue. After running a few investigations, if you console.log each route component, you see that the components are really mounting, but the redirect is being redirected again to the index of (tabs), for some unknown reason.

The render order is "initial route" > "login" > "(tabs)/index". I tested both reloading and from a fresh start. Clearing the cache with -c had no effect. However, if you don't navigate when the app loads, and you do a fast refresh from a change in the code, the route properly initiates in the correct route. However, any attempt to open the app defaults to tabOne in the template.

Navigating from the Expo Go app, you go straight to "(tabs)/index".

package.json

   "expo": "~50.0.4",
   "expo-router": "~3.4.6",
    

[dominictobias]

Same issue, I set initialRouteName and in unstable_settings on every _layout (unclear which to use) and none have any effect, the initial route is always "/"

[jimpala]

The React Navigation -> Expo Router migration guide seems to imply that the initialRouteName on navigators like <Stack> is a no-op - it's whatever index is for a navigator that determines the initial route.
And it seems that the same property in unstable_settings is purely there to determine where the back button goes to on an initial render in the case of something like deep linking - it doesn't seem to dictate anything to do with what renders first on an ordinary boot of the app.

With this in mind I think (tabs)/index as the initial route would be the expected behaviour because (tabs) is a group and hence doesn't contribute to a routing URL segment, therefore (tabs/index) is effectively index? And if there is no index it just looks for the first screen at the top level alphabetically?

The docs could probably be a bit clearer that initialRouteName on the navigators don't have any effect? And unstable_settings.initialRouteName seems a bit of a misleading name. Idk