useRouteParams()

Tiny absctraction layer that retrieves the parameters of a route in both the Expo Router and Next.js app routers. Serverside, in the browser and on iOS or Android:

import { useRouteParams } from '@green-stack/navigation'

const routeParams = useRouteParams(routeProps)

Typescript should complain if you don’t, but make sure to include the route’s screen props when using this hook, as it relies on them to access the route parameters in Next.js

How it works

Each environment has it’s own ways of accessing route parameters. This is why there are also versions specifically for each of those environments:

Where useRouteParams.next.tsx covers the Next.js app router, and useRouteParams.expo.tsx covers Expo Router. The main useRouteParams.tsx retrieves whichever implementation was provided to the <UniversalAppProviders> component and, which is further passed to <CoreContext.Provider/>:

import { useRouteParams as useExpoRouteParams } from '@green-stack/navigation/useRouteParams.expo'
 
// ... Later ...
 
<UniversalAppProviders
    useContextRouteParams={useExpoRouteParams}
>
    ...
</UniversalAppProviders>

import { useRouteParams as useNextRouteParams } from '@green-stack/navigation/useRouteParams.next'
 
// ... Later ...
 
<UniversalAppProviders
    useContextRouteParams={useNextRouteParams}
>
    ...
</UniversalAppProviders>

While the useRouteParams.types.ts file ensures both implementations are compatible with the same interface, allowing you to use the same useRouteParams() hook across both Expo and Next.js environments.