React.Strict breaks react-navigation Linking on Web

[floataboat]

Current behavior

Given a basic app generated via 'Create React App' with React-Navigation integrated does not support Linkage on Web. When running locally links do not work properly on page load. Whatever path is passed to the location bar is ignored, the first ( default ) route is loaded. Attached is a screen cast of the behavior.

Screen.Recording.2022-11-08.at.4.06.56.PM.mov

Expected behavior

I except the path provided in the location bar to be used for the initial navigation route.

I narrowed the issue down to <React.StrictMode/> This Component is incorporated in the Create React App template. Unwrapping the main app from that component fixes the issue. With it removed, the initial path is being used to load the initial route.

Reproduction

https://github.com/floataboat/cuddly-invention

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.13
@react-navigation/stack	6.3.4
@react-navigation/native-stack	6.9.1
node	19.0.1
yarn	1.22.19

[matsmello]

I am having the same issue, but I believe the problem is related to my configurations.

Did you have any progress here?

[floataboat]

I found no solution besides removing the <React.StrictMode/> element.

[dbenfouzari]

Same here but I'm on "react-native": "0.71.6" with "expo": "~48.0.9"

Here is my code

function App() {
  const scheme = useColorScheme();

  return (
    <NavigationContainer
      linking={{
        prefixes: ["devez://"],
        config: {
          screens: {
            Home: { path: "" },
            About: { path: "about" },
          },
        },
      }}
      theme={scheme === "dark" ? DarkTheme : DefaultTheme}
    >
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

When I wrap this with <React.StrictMode /> it just fails to change routes on web.

[GirlBossRush]

I encountered this too, and with some well-placed console.log statements in the onStateChange prop, I found double logging around the <NavigationContainer> component.

I believe the issue stems from logic surrounding initialState value and the getStateFromPath method. Strict mode is double rendering components to ensure they're pure, and that their side-effects are playing nice with hooks.

My team is working around the issue by disabling strict mode.

[niklasmachacek]

We encountered this as well, but only when using expo48. With the same version of react-navigation/stack (6.3.16) and react-navigation/native (6.1.6) - when using expo47.xx.xx everything worked well with <React.StrictMode />.

Only after upgrading to expo48, we had to remove the <React.StrictMode /> to get the navigation working again.

[chrisscott718]

Is there any update on this issue? I'd rather not disable strict mode.

[iuuukhueeee]

Are there any updates?

[miso-belica]

Maybe better to switch to expo-router or some other library/framework if you really need the strict mode. It doesn't seem to be a high prio issue here. Up to you if it's worth the effort for your project.

[bnussman]

This is definitely not an issue on v6.x but using the v7.x Static Router does introduce this bug.

[david-gettins]

I have also experienced this issue. Glad someone found the cause as I was faffing for ages... I can confirm that removing either the linking config from the NavigationContainer or removing StrictMode from the web entry point meant that navigate worked as expected. As mentioned by others, I would rather not disable strict mode in development, but I also want the route urls on web.

[natew]

Btw expo-router doesn't use strict mode because of this same issue. I'm digging into it currently, if anyone has any idea of where exactly the issue is that'd be hugely helpful.

[natew]

Tried making as much of useLinking and other hooks not rely on unsafe refs and have the right dependencies in their effect arrays without luck.