React native Question posted in
The official React Native documentation can be found here.

React native – useLocalSearchParams not working in expo-router

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search