Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useSearchParams crashing on react native app #472

Open
1 of 3 tasks
wongk opened this issue Apr 25, 2024 · 4 comments
Open
1 of 3 tasks

useSearchParams crashing on react native app #472

wongk opened this issue Apr 25, 2024 · 4 comments

Comments

@wongk
Copy link

wongk commented Apr 25, 2024

Is there an existing issue for this?

  • 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

Screenshot 2024-04-25 at 12 47 36 PM

Reproduction

No response

@wongk
Copy link
Author

wongk commented Apr 25, 2024

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
Copy link
Author

wongk commented Apr 25, 2024

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()
}

@nandorojo
Copy link
Owner

I think Solito should actually just ignore this error

@nandorojo
Copy link
Owner

Also I would not call your join safe since it breaks the rules of hooks and could throw in production since Params are dynamic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants