"This screen does not exist" page flashing before navigating

[pauldcollins]

Describe the bug I have an issue where I am getting a flash of a "screen doesn't exist" before navigating to the page within my app. I have stripped back all the code and it I still get taken to the "screen doesn't exist page". I suspect it's to do with Deep Linking, but I can't solve it.

I am using the Expo CI Typescript boilerplate, so I don't have an "app.js" file in the root directory, my setup came with the following:

_layout.tsx (my shareIntent router.replace code is in here)
app
- _layout.tsx (this is where the Tab Bar is created and generated)
- index.tsx

To Reproduce

Here is the UI code I'm working with. Worth noting that even if I delete the router.replace below, it still navigates to the "missing" page. So I think that deep linking maybe an issue? I have not installed anything around deep linking, to be clear.

_layout.tsx

  useEffect(() => {
    if (shareIntent) {
      router.replace({ pathname: '/new/share-page', params: shareIntent })
      resetShareIntent()
    }
  }, [shareIntent])

app/_layout.tsx (My tabs and initial route are setup here, it defaults to the index page)

 <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#000000',
        },
        ... 
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: () => <HomeIcon />,
          headerStyle: {
            height: 0,
          },
        }}
      />
     <Tabs.Screen
        ... next tab, etc
        }}
      /> 

Environment

System:
  OS: macOS 14.0
  CPU: (12) x64 Apple M2 Max
  Memory: 8.21 GB / 96.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.16.0
    path: ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn:
    version: 1.17.3
    path: ~/.yarn/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.13.0
    path: /Users/paulcollins/.rvm/gems/ruby-2.6.3/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK:
    Android NDK: 16.1.4479499
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11090377
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.1
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Additional context Add any other context about the problem here.

• expo version ~49.0.13
• branch expo49-expo-router
• target : iOS
• device : BOTH simulator & real device
• type: development build

[pauldcollins]

I just wanted to give an update here as I have tried all the options on this repo and still can't seem to get it to work:

1.) I have tried using the code here on my landing _layout.tsx page, but I still get the flash of the page not found first.

2.) I have tried implementing all the code in this branch, making sure my hooks/useShareIntent.js is the correct one for the Expo Router 49 branch, but still no luck.

3.) I also tried implementing the fixes found in this branch, including creating an [...unmatched].tsx file, but that didn't work either. The shareIntent variable always returns as null on this page. I know this has been addressed further down the comments, but I thought it might be worth trying at least.

I am still getting taken to the [...missing].tsx page for a split second first, before the following code from layout.tsx kicks in and takes me to the correct page.

  useEffect(() => {
    if (shareIntent) {
      router.replace({ pathname: '/new/share-page', params: shareIntent })
      resetShareIntent()
    }
  }, [shareIntent])

Please let me know if there are any other things I can try. I've run out of ideas!

[achorein]

For this problem, in fact we do not have the information synchronously and this make a screen flash. To manage this problem we could add an "isLoading" state in the useShareIntent hook in order to display a loader in the layout component (in absolute position while you check whether or not you have received a share intent).