`useSearchParams` crashing on react native app

[wongk]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [ ] Not urgent

Current Behavior

I have a component that is rendering as a part of _layout.tsx for a given route. This component uses useSearchParams, which causes the error shown in the attached screenshot. I have logged the value of params from the underling react navigation route, which is what the solito source is referencing, and it is {"screen":"index","params":{}}, which seems quite odd. I am doing this exact same thing from a component that is rendered by index.ts on the same route, and it does not have the same issue. It also works fine in the web app. There does not seem to be a workaround for this.

Expected Behavior

No response

Steps To Reproduce

Call useSearchParams from a component rendered by _layout.tsx.

Versions

- Solito: 4.2.2
- Next.js: 13.5.6
- Expo: 50.0.14
- React Native: 0.73.6

Screenshots

Reproduction

No response

[wongk]

Here is a log from when the route has a query param present: {"initial":true,"screen":"index","params":{"threadId":"965e9694-5747-48b3-85dd-72d617bfbda7"},"path":"/chat?threadId=965e9694-5747-48b3-85dd-72d617bfbda7"}

It appears react navigation is using the params for its own purposes within layout components. Maybe Solito needs to check if params.params is truthy and use that instead?

[wongk]

For anyone else needing a workaround:

function useSafeSearchParams(): ReturnType<typeof useSearchParams> {
  const route = useContext(NavigationRouteContext)
  if (route?.params && Object.hasOwn(route.params, "params")) {
    const realParams = (route.params as any).params
    return useMemo(() => realParams && new URLSearchParams(realParams), [realParams])
  }
  return useSearchParams()
}