React.Strict breaks react-navigation Linking on Web

floataboat commented 2 years ago

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.

https://user-images.githubusercontent.com/68788204/200696936-602ddf9d-f38d-4ec6-a7e3-64c8407e7225.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 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
[X] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[ ] @react-navigation/drawer
[ ] @react-navigation/material-bottom-tabs
[ ] @react-navigation/material-top-tabs
[ ] @react-navigation/stack
[X] @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 commented 1 year ago

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

Did you have any progress here?

floataboat commented 1 year ago

I found no solution besides removing the element.

dbenfouzari commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

iuuukhueeee commented 1 year ago

Are there any updates?

miso-belica commented 1 year ago

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 commented 10 months ago

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

david-gettins commented 8 months ago

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 commented 6 months ago

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 commented 6 months ago

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.

react-navigation / react-navigation