useLocalSearchParams not working in expo-router

Question

I have the following React Native component with a router from expo-router:

  <TouchableOpacity
    onPress={() => router.push({ pathname: `//${category}/${type}`})}
    activeOpacity={0.7}
  >

In a separate file called [recentSearch].js that's nested in the following way:

• app
  • index.js
  • [recentSearch.js]

I have the following code:

const RecentSearches = () => {
  const { category, type } = useLocalSearchParams();
  console.log(category, type);


  return (
    <>
      <Text>Recent Searches</Text>
    </>
  );
};

export default RecentSearches;

The console.log always returns "undefined undefined" no matter what I try. I've tried even using {pathname: '/', params: {category: 'test", type: 'test'} but for some reason useLocalSearchParams and useGlobalSearchParams don't work. Any help would be great. TIA

Answer 1

i got same issue and maybe is for structure, i did this

• create a new folder inside app /app/new_folder
• add folder to app/_layout inside your stack

function RootLayoutNav() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  SystemUI.setBackgroundColorAsync(theme.colors.background);
  return (
    <ThemeProvider value={theme}>
      <SessionProvider>
        <ItemsProvider>
          <Stack
            screenOptions={{
              headerShown: false,
              animation: "slide_from_right",
            }}
          >
            <Stack.Screen name="posts" />
          </Stack>
        </ItemsProvider>
      </SessionProvider>
    </ThemeProvider>
  );
}

you can see, i added 'posts' folder, inside 'posts' folder, create _layout file and [] file, like [item].tsx or something like that, in your case [recentSearch].tsx or [recentSearch].js, i can see you have .js inside [], you have to put outside.

after that, just call your file with expo router, like:

router.push(`/posts/${category}`);

remeber, if you wanna pass more parameters, you have to do something like:

router.push(`/posts/${category}?type=${type}`);

similar as how we used to pass parameters in http urls.

after that, just catch parameters in your [].tsx file, using:

const { category, type } = useLocalSearchParams<{
    category: string;
    type?: string;
  }>();

you can find more info about this on expo-router doc, just pay attention at comments on code, have useful infomartion

I hope it has helped and sorry for my English

Answer 2

I had an issue where a faulty metro.config.json file resulted in useLocalSearchParams not working. Trying to log it simply skipped the log and I could not use or see any values from it.

Removing the config file made it work. Not sure exactly which setting caused the issue but worth having a look if you have a similar issue.