Using unstable_settings breaks deep linking in the app when it's in the foreground or background

[GibbyBox]

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

yarn

Summary

Exporting unstable_settings (even an empty object) prevents deep linking from working in an app that is in the foreground or the background. The app will be brought to the foreground, just not to the requested screen. Deep linking when the app is closed works fine.

A warning is thrown when this issue occurs.

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.

I tested this on both router v1.7.7 (repro's master branch) and v2.0.0 (repro's with-router-v2 branch) using the ios simulator. I haven't used android and I tried setting it up to test but uri-scheme wasn't opening up expo :/

Workaround

Currently, I'm using this as a workaround in my app since I need to use unstable_settings for the back button behavior.

	useEffect(function linkingWorkaround() {
		Linking.addEventListener('url', ({ url }) => {
			const match = url.match(new RegExp(`^${SCHEME}:\/\/(.*)`));
			if (match) router.push(match[1]);
		});
	}, []);

Minimal reproducible example

https://github.com/GibbyBox/expo-router-deeplink-repro

[usmangurowa]

Does it work if you did not export the unstable_settings object?

I am trying to add deep linking to my expo app using expo-router, i am also using a dev build. How react-navigation does it by adding a linking prop to the navigation container like this

import * as Linking from 'expo-linking';

const prefix = Linking.createURL('/');

function App() {
  const linking = {
    prefixes: [prefix],
  };

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      {/* content */}
    </NavigationContainer>
  );
}

I am trying to replicate the exact same thing using expo-router but i could not find documentation or a tutorial covering that.

And your workaround is exactly what i am currently using right now.

I don't mind not exporting the unstable_settings if there is an actual way to implement this.

[GibbyBox]

Yes it works if you don't export unstable_settings. But then you miss out on back buttons in some places https://docs.expo.dev/router/reference/faq/#missing-back-button

Router handles the routing config using the folder layout in the app directory. It does not handle app / universal links though. You'll want to refer to https://docs.expo.dev/guides/deep-linking/

[louislatreille]

I'll echo what @usmangurowa said. I am getting the exact issue you are describing, but without even exporting unstable_settings. I.e. deep linking works when the app is initially fully closed, but it doesn't work when the app is already opened.

I've tested both on android and ios, with expo go and native.

I'm using expo SDK 49 and expo-router v2.0.1

[louislatreille]

Did a bit more testing, and it seems like my issue is actually caused by my nested stack setup. When deep linking to a top-level screen, I'm experiencing the issue the exact same way as @GibbyBox described.

My nested stack setup for reference:

• stack
  • tabs
    • stack
  • ...
  • screens

[sannajammeh]

Its unfortunate how unclear the docs are written on how this all works. Same issue for me. Whats even weirder is that this only happens for built apps, expo go works as expected. This errors on the latest expo sdk 49 and expo router 2.0.0 builds.

When exporting linking is not working. Removing it makes it work. @marklawlor are we doing anything wrong here?

export const unstable_settings = {
  initialRouteName: "(tabs)/index",
};

Sitemap:

[sannajammeh]

Its unfortunate how unclear the docs are written on how this all works. Same issue for me. Whats even weirder is that this only happens for built apps, expo go works as expected. This errors on the latest expo sdk 49 and expo router 2.0.0 builds.

When exporting linking is not working. Removing it makes it work. @marklawlor are we doing anything wrong here?

export const unstable_settings = {
  initialRouteName: "(tabs)/index",
};

Got it working! Works, but breaks routing.

Instead of following expo examples I just removed the /index from that route, worked perfectly. This is what I mean by "the documentation is unclear". How are we supposed to know about this? There should really be a section explaning in detail (or with graphics) how a nested route can impact navigation and linking.

export const unstable_settings = {
  initialRouteName: "(tabs)",
};

Update 2.

This actually breaks navigation through anything inside of (tabs).

[sannajammeh]

Looks like expo-router was moved into expo. Perhaps we should move this issue too?

[los-ko]

Is this going to be fixed? Currently if the application is behind authentication deep linking is really hard to implement.

[gabimoncha]

I confirm that for prebuild routes, removing unstable_settings fixes linking.
My issue was that path linking wasn't working if the app was in background.

[RiczCalixto]

Any chance that this got fixed? It's annoying in projects that we need to use unstable_settings and deeplink.