Navigation twice on the first screen of a modal (only in production app)

[William]

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

yarn

Summary

As you can see in the video, when i open a modal that have a stack inside, i get a bug where it navigate twice to the first screen. It only happens in production/built app. I can't reproduce the problem locally to try and debug it so a bit stuck.

RPReplay_Final1692348709.mov

the structure is :

app/
  _layout (Stack)
  accounts
    wallet
      create (modal you see in video)
        _layout (Stack)
        amount
        name (the screen that appear twice)

app option layout

const screenAppOption = {
	title: "",
	headerBackTitleVisible: false,
	headerShadowVisible: false,
	// theme is not init yet so directly accessing color, don't do that elsewhere
	headerTintColor: color["light.primary.900"],
	contentStyle: { backgroundColor: color["light.white"] },
}

the modal has this options:

const options = {presentation: "modal", headerShown: false}

and the Stack inside the modal:

const options = {
  title: "",
			headerBackTitleVisible: false,
			headerShadowVisible: false,
			headerTintColor,
			headerTitle: ({ children }: PropsWithChildren<{}>) => <Text variant="bodyBold">{children}</Text>,
			headerRight: () =>
				Platform.OS === "ios" ? (
					<Pressable
						onPress={() =>
							target
								? target()
								: router.canGoBack()
								? router.back()
								: router.replace(isConnected ? "/home" : "/welcome")
						}
					>
						<AppleClose />
					</Pressable>
				) : undefined,
			contentStyle: { backgroundColor },
}

Minimal reproducible example

can't reproduce in local dev so not sure what to show here. still is an issue tho :/

potentially linked to #838

UPDATE:

still trying to understand but managed to get something locally by removing the modal presentation.

I tried to remove the screenOptions on the Stack inside the modal (bug still happens)
if i use a Slot instead of Stack, it seems to fix the issue (at this point there is basically no more Stack inside the Stack since no modal and it's Slot so useless _layout in accounts/wallets/create

from what i can understand locally (not much lol)
it looks like the screen accounts/wallets/create/name is mounted once, then the stack accounts/wallets/create/_layout get mounted which trigger to mount accounts/wallets/create/name again in the stack, which explain the double nav happening.

in local, only happen if i remove the presentation: modal but on production app, the bug appear with the modal presentation on.

[EGurney]

I also have this same issue. Same exact thing you are experiencing where a modal sub route is mounted twice, which causes the user to see the initial layout correctly and then see the "slide-in" transition to the same screen.

[Oliver Pan]

Also happens to me as well, the double mounting applies to both Android and iOS.

[Oren Nurkeldi]

#320
I guess it doesn't matter if it's modal, try to push screen usingaccounts/wallets/create instead accounts/wallets/create/name

UPD:
Yes, it's _layout's fault, if I remove it, the screen is mounted once

[Evan Bacon]

Please provide a minimal reproducible demo so I can fix.

[Evan Bacon]

A possible fix was published in expo-router@2.0.4. Let me know if this resolves the issue for you.

[Evan Bacon]

I can confirm this is fixed in 2.0.4