make params and useLocalSearchParams handle boolean and accept undefined

[wcastand]

if one of the params is optional i'd rather not have to do something like this :

router.push({ pathname: "/close-account/validation", params: otherReason ? { reason, otherReason } : { reason } })

and instead do where otherReason is optional so can be undefined and just being ignored.

router.push({ pathname: "/close-account/validation", params: { reason, otherReason } })

same with boolean, i use zod to type my params and parse/validate, which means i can't simply pass down the params because he doesn't accept boolean and i would need to convert all to "true" or "false". I feel like that could be handle quite easily by expo router.

i currently use this :

export type NotOptional<Type> = {
	[Property in keyof Type]-?: Type[Property] extends boolean | undefined ? string : Exclude<Type[Property], undefined>
}

export function parseParams<T extends Object>(params: T): NotOptional<T> {
	const parsedParams = {}
	Object.keys(params).forEach((key) => {
		if (params[key] !== undefined) {
			if (typeof params[key] === "boolean") parsedParams[key] = JSON.stringify(params[key])
			else parsedParams[key] = params[key]
		}
	})
	return parsedParams as NotOptional<T>
}


type a = { s?: string; a: boolean; b?:boolean; c: boolean | undefined; d: number }
type b = NotOptional<a> // { s: string; a: string; b:string; c: string; d: number }

[rajatkantinandi]

I was surprised to see that numbers and booleans are not supported by default. I am using a custom hook which is parsing numbers and booleans for me and also properly typed based on the route name (Using a predefined type NavigationParamsList for that). So, instead of using useLocalSearchParams I am using my custom hook everywhere:

import { useLocalSearchParams } from 'expo-router';
import { useMemo } from 'react';
import { type NavigationParamsList } from 'types';

export default function useParams<ScreenName extends keyof NavigationParamsList>() {
  const params = useLocalSearchParams();
  const parsedParams = useMemo(
    () =>
      Object.keys(params).reduce((acc, key) => {
        let value: any = params[key];

        if (!value) {
          return acc;
        }
        if (['true', 'false'].includes(value)) {
          value = value === 'true';
        }
        else {
          const numberValue = parseInt(value, 10);

          if (!Number.isNaN(numberValue)) {
            value = numberValue;
          }
        }

        return { ...acc, [key]: value };
      }, {} as NonNullable<NavigationParamsList[ScreenName]>),
    [params],
  );

  return parsedParams;
}

[EvanBacon]

Looks fixed in #782 (2.0.1)

[wcastand]

for the nullish part yeah, not the boolean part tho

[wcastand]

the plan to support auto casting of boolean from the hook itself is not something that will happen?

is quite unpractical to not be able to pass boolean since most web framework support this out of the box and having to make and maintain a custom hook on op of it "just" for that seems a bit unpleasant :/

an other possible way is:

index?canExist => return canExist: true
index => canExist is undefined

which in the url "standard" represent boolean values. there or not.

currently the hook return "" for the index?canExist which cast as boolean return false instead of present

[pouyarezvani]

The expo router has so many issues. and the lack of proper documentation is a sham!

[iM-GeeKy]

@EvanBacon Is there any recommendation on how to pass boolean values given type boolean isn't supported? Passing a string representation of a boolean seems a little wonky and alternatively it could be represented by a falsy or truthy number, but both workarounds don't particularly feel right.