Expo Router React Native setParams() not on screen error

Question

I am having trouble using the router.setParams() method with Expo Router.

I'm trying to follow the example here: https://docs.expo.dev/router/reference/search-parameters/#updating-search-parameters

I set up a minimal test with the example copied directly from there as page.tsx and a Stack.Screen

Here is my _layout.txt

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider value={DarkTheme}>
        <View className=" w-screen h-screen dark">
          <Stack>
            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
            <Stack.Screen name="page" options={{ headerShown: false }} />
          </Stack>
        </View>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}

Here is how my files are set up: My file structure, with _layout.tsx and page.tsx in the App folder

As soon as a trigger the setParams() function by typing in the text input, I get an error "Cannot call setParams outside a screen"

The error, Cannot call setParams outside a screen"

As far as I understand, the component is inside a screen due to the Stack.Screen in the layout so I'm not sure why I'm getting this error. I'd appreciate any help understanding how I can use the setParams.

I experience the error with the minimal example copied directly from the documentation.

Answer 1

I had the same problem after updating to the new version of expo (from 49 to 50.x.x). I solved it by updating @react-navigation/native to the latest version (^6.1.14).If it doesn’t help, I advise you to check all versions of the libraries in the dependencies.