Question 422407 in React native Question posted in
The official React Native documentation can be found here.

How to pass parameters correctly in expo-router when navigating between screens in React Native?

I’m working on a React Native app using Expo Router. I’m trying to navigate between screens and pass parameters such as bar_id, table_id, and user_id via URL query parameters, but they are not being passed correctly. The parameters table_id and user_id are undefined when received on the target screen, even though I am sure I’m passing them.

Here’s how I’m navigating to the next screen:

router.push({
  pathname: '/client/scan/InviteClientsScreen',
  query: { bar_id, table_id, user_id }
});

However, when I try to access the parameters in the target screen using useLocalSearchParams(), I receive undefined for table_id and user_id:

    const { bar_id, table_id, user_id } = useLocalSearchParams();
    console.log({ bar_id, table_id, user_id });

I’ve also logged the parameters before navigation and confirmed that they are being set correctly, but for some reason, they're coming through as undefined when received.

I've tried the following solutions, but they didn’t work:

 1. Using params instead of query for navigation.
 2. Adding fallback values like { table_id: 'default' } when parameters are undefined.
 3. Ensuring that the parameters are not being overwritten before navigation.


Why am I receiving undefined for table_id and user_id?
Is there something wrong with how I'm passing parameters, or is this an issue with how expo-router handles URL query parameters?
Any suggestions on how to troubleshoot this or best practices for passing parameters in Expo Router?

I've logged the parameters before navigation, and they are set correctly.
The only parameter that seems to work is bar_id. Is this an issue with useLocalSearchParams()?

Thanks for any help!
Tags:

2

Answers


  1. 0

    I dont know if it should be done like this, but that’s how i do it.

    Screen that passes the params :

    const handleEditPost = (post) => {
    router.push({
      pathname: `/(editpost)/${post.post_uid}`,
      params: { postData: JSON.stringify(post) },
    });
  };

    Screen that params were passed to

     const { editid, postData } = useLocalSearchParams();

^here {post.post_uid} is being set to editId, and { postData: JSON.stringify(post) }, to postData

const [form, setForm] = useState({
    postUid: editid, // Use the post ID from params

useEffect(() => {
    // Parse the post data from navigation parameters
    if (postData) {
      try {
        const post = JSON.parse(postData);
        console.log('Received post data:', post);

    Also, the screen that params are being passed to is named [editId].js, I don’t know if that helps with something if it comes to passing params, but I though that maybe it’s important to mention.

    Login or Signup to reply.
  2. 0

    only change the query to params

    router.push({
  pathname: '/client/scan/InviteClientsScreen',
  params: { bar_id, table_id, user_id }
});

    and you can access the parameters here

        const { bar_id, table_id, user_id } = useLocalSearchParams();
    console.log({ bar_id, table_id, user_id });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search