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

[wcastand]

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.

https://github.com/expo/router/assets/2178244/93f70830-185d-4df3-b3c1-110677f61cde

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 https://github.com/expo/router/issues/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.

[fluid-design-io]

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

[devoren]

https://github.com/expo/router/issues/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

[EvanBacon]

Please provide a minimal reproducible demo so I can fix.

[EvanBacon]

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

[EvanBacon]

I can confirm this is fixed in 2.0.4