react-navigation / react-navigation/react-navigation

Linking: Params are not parsed correctly when a screen appears in multiple configs

Open
#10,748 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug platform:web repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Current behavior

I have this config:

const config = {
  screens: {
    Tabs: {
      screens: {
        Sortiment: {
          path: "sortiment",
          screens: {
            Category: {
              path: "k/:category?",
              exact: true
            }
          }
        },
        Home: {
          path: "home",
          screens: {
            Category: "category"
          }
        }
      }
    }
  }
};

And I'm trying to parse this path:

const path = "k/categoryParam?x=x";

The state object that is returned when I call getStateFromPath(path, state) looks like this:

{
    "routes": [
        {
            "name": "Tabs",
            "state": {
                "routes": [
                    {
                        "name": "Sortiment",
                        "state": {
                            "routes": [
                                {
                                    "name": "Category",
                                    "path": "k/categoryParam?x=x",
                                    "params": {
                                        "x": "x"
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}

Notice how categoryParam is not included in the routes params. If you remove the second path config inside the "Home" config, the params are parsed correctly.

I tracked the problem down to this line:
https://github.com/react-navigation/react-navigation/blob/838842e85fffd56a3a64a1f4e969318998217c7a/packages/core/src/getStateFromPath.tsx#L287

In this case there are two configs that can be found here, and the wrong one is used to construct the params.

Expected behavior

params should include the category param and look like this:

{
     "category": "categoryParam",
     "x": "x"
}
Reproduction

https://codesandbox.io/s/npm-playground-forked-pnv716?file=/src/index.js

Platform
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @react-navigation/​bottom-tabs
  • @react-navigation/​drawer
  • @react-navigation/​material-bottom-tabs
  • @react-navigation/​material-top-tabs
  • @react-navigation/​stack
  • @react-navigation/​native-stack
Environment
  • I've removed the packages that I don't use
package version
node v16.13.2
yarn 1.22.15

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/core/src/getStateFromPath.tsx at the line linked in the issue, where multiple matching configs are found and one is used to construct params. Use the provided config and path as the reproduction, then verify that the resulting Category route includes both category and x params.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.