expo router.push params not working with dynamic values

Question

push navigation not working with values coming from Formik but works if I pass statically.

It's not working

const handleSubmit = (values) => {
  SMSLogin({ variables: values }).then(({ data, errors }) => {
    console.log(values.phone)
    router.push({
      pathname: "/sign-up-completion",
      params: {
        phone: values.phone,
      },
    });
  });
};

but It's work

const handleSubmit = (values) => {
  SMSLogin({ variables: values }).then(({ data, errors }) => {
    console.log(values.phone)
    router.push({
      pathname: "/sign-up-completion",
      params: {
        phone: '+1 (920) 123-4567',
      },
    });
  });
};

both console.logs are showing correctly the phone

Why!? any idea?

• expo SDK 49
• expo-router 2.0.0

Answer 1

I'm not finding any standard solution yet. Finally, I decided to develop a patch to solve the problem temporarily:

import { setParams } from "@src/redux/slice/paramsSlice";
import { useRouter } from "expo-router";
import { useDispatch } from "react-redux";

type PropsType = {
  pathname: string;
  params?: object;
};

export const usePatchedRouter = () => {
  // TODO: fix expo-router bug described in
  // https://stackoverflow.com/questions/77370412/expo-router-push-params-not-working-with-dynamic-values
  // I'm forced to use redux

  const router = useRouter();
  const dispatch = useDispatch();

  const push = ({ pathname, params = {} }: PropsType) => {
    // patch expo-router pass params handling by redux
    dispatch(setParams(params));

    router.push({
      pathname: pathname,
      params: params,
    });
  };

  return { ...router, push };
};

Note: useLocalSearchParams() not worked with this patch. I'm using this code to access params in next screen:

const params = useSelector((state: RootState) => state.paramsSlice.params);

Answer 2

There is an open issue on this: https://github.com/expo/expo/issues/26664

Issue is the closing ) in your string. Personally, in the mean time, I'm just changing the parentheses in my string to square brackets with a regex like this: someString.replace(/\((.*?)\)/g, "[$1]")