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.

Sign up for GitHub

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

Jump to bottom

useLocalSearchParams() is always returning {} when used inside of <Stack.Screen> #30625

Open
petja opened this issue Jul 25, 2024 · 4 comments
Open

useLocalSearchParams() is always returning {} when used inside of <Stack.Screen> #30625

petja opened this issue Jul 25, 2024 · 4 comments
Assignees
@marklawlor
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router

Comments

@petja
Copy link

petja commented Jul 25, 2024

Minimal reproducible example

https://github.com/petja/expo-use-local-search-params-issue-repro

Which package manager are you using? (Yarn is recommended)

pnpm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

useLocalSearchParams() is always returning {} when used inside of <Stack.Screen>'s options.headerRight. Instead of an empty object, it should return search params for the screen if given.

This worked before I upgraded from Expo 50 to 51, but not anymore.

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.5
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
npm: 10.6.0 - ~/.nvm/versions/node/v20.12.1/bin/npm
Managers:
CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
IDEs:
Android Studio: 2023.2 AI-232.10300.40.2321.11567975
Xcode: 15.4/15F31d - /usr/bin/xcodebuild
npmPackages:
expo: ~51.0.22 => 51.0.22
expo-router: ~3.5.18 => 3.5.18
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.74.3 => 0.74.3
react-native-web: ~0.19.10 => 0.19.12
npmGlobalPackages:
eas-cli: 10.2.1
Expo Workflow: managed
@petja petja added needs validation Issue needs to be validated Router expo-router labels Jul 25, 2024
@expo-bot expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels Jul 25, 2024
@pkfms
Copy link

pkfms commented Aug 1, 2024

this worked on 3.5.17, I just updated to 3.5.20 and useLocalSearchParams() in headerTitle started returning an empty object

@imckain imckain mentioned this issue Aug 8, 2024
Open
@petja
Copy link
Author

petja commented Aug 12, 2024

I can confirm that downgrading to 3.5.17 helps. So the problem is for >=3.5.18.

@petja
Copy link
Author

petja commented Oct 24, 2024

Can we somehow prioritize this issue? As I just tested, it's still present in expo-router 3.5.23. Every time I run expo install --fix to upgrade my other Expo packages, it also installs this broken version of expo-router, and I have to install an older version manually.

@kennethstarkrl kennethstarkrl mentioned this issue Oct 27, 2024
Open
3 tasks
@Kaarelmm
Copy link

This is my TEMPORARY plug-in workaround for using useLocalSearchParams while staying compatible with SDK52. From my testing, I can confirm that it appears that the last working expo-router version was 3.5.17.
I'll use this temporary workaround until the issue is resolved or I find a proper fix.

import { ParamListBase, useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { useMemo } from 'react'

export const useLocalSearchParams2 = <T = undefined,>(): T => {
    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()
    const navState = navigation.getState()
    const params = navState.routes?.[navState.index]?.params

    return useMemo(() => {
        if (isObjectMatchingType<T>(params)) {
            return params as T
        }
        return createUndefinedObject<T>()
    }, [params])
}

function isObjectMatchingType<T>(obj: unknown): obj is T {
    if (typeof obj !== 'object' || obj === null) return false

    return true
}

function createUndefinedObject<T>(): T {
    return new Proxy(
        {},
        {
            get: () => undefined,
        }
    ) as T
}

export default useLocalSearchParams2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marklawlor marklawlor

Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@petja @marklawlor @expo-bot @pkfms @Kaarelmm