{"id":13672927,"url":"https://github.com/vonovak/react-navigation-props-mapper","last_synced_at":"2025-04-12T16:38:18.923Z","repository":{"id":23136857,"uuid":"98240906","full_name":"vonovak/react-navigation-props-mapper","owner":"vonovak","description":"Forwards react-navigation params to your screen component's props directly","archived":false,"fork":false,"pushed_at":"2023-03-05T11:56:50.000Z","size":2890,"stargazers_count":395,"open_issues_count":8,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-15T08:10:34.276Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vonovak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["vonovak"]}},"created_at":"2017-07-24T22:40:43.000Z","updated_at":"2024-04-15T08:10:34.276Z","dependencies_parsed_at":"2023-02-18T12:55:14.823Z","dependency_job_id":"7f59d27a-7f28-4438-8912-9dc1190b3b61","html_url":"https://github.com/vonovak/react-navigation-props-mapper","commit_stats":{"total_commits":85,"total_committers":6,"mean_commits":"14.166666666666666","dds":0.388235294117647,"last_synced_commit":"8ae3f3c603855427e5def31629bafa298cb013c4"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-navigation-props-mapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-navigation-props-mapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-navigation-props-mapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-navigation-props-mapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vonovak","download_url":"https://codeload.github.com/vonovak/react-navigation-props-mapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597732,"owners_count":21130933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:57.897Z","updated_at":"2025-04-12T16:38:18.902Z","avatar_url":"https://github.com/vonovak.png","language":"TypeScript","readme":"## react-navigation-props-mapper\n\nForwards `react-navigation` params to your screen component's props directly. Supports type-checking with TypeScript.\n\n\u003e use version 3 of this package for `react-navigation` version 6 and newer\n\u003e\n\u003e use version 2 of this package for `react-navigation` version 5\n\u003e\n\u003e use version 1 of this package for `react-navigation` version 4 and lower\n\n`yarn add react-navigation-props-mapper`\n\nor\n\n`npm i react-navigation-props-mapper`\n\n## Motivation\n\nIn `react-navigation` there were different ways to access navigation params:\n\n- `props.navigation.state.params` (from version 1)\n- `props.navigation.getParam(paramName, defaultValue)` (added in version 3)\n- `props.route.params` (the only way to read params in version 5 and later)\n\nExample with react-navigation v6:\n\n```js\nfunction SomeComponent({ route }) {\n  const { params } = route;\n  return (\n    \u003cView\u003e\n      \u003cText\u003eChat with {params.user.userName}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nThis works well but if you don't want your code to be tightly coupled to `react-navigation` (maybe because you're migrating from version 4 to 5) or if you simply want to work with navigation params the same way as with any other props, this package will help.\n\n### `withForwardedNavigationParams`\n\nUse this function be able to access the navigation params passed to your screen _directly_ from the props. Eg. instead of `props.route.params.user.userName` you'd write `props.user.userName`. The function wraps the provided component in a HOC and passes everything from `props.route.params` to the wrapped component.\n\n#### Usage\n\nWhen defining the screens for your navigator, wrap the screen component with the provided function. For example:\n\n```js\nimport { withForwardedNavigationParams } from 'react-navigation-props-mapper';\n\nfunction SomeScreen(props) {\n  // return something\n}\n\nexport default withForwardedNavigationParams()(SomeScreen);\n```\n\n### TypeScript\n\nThe package comes with full TS support, so you will get the same level of type checking as you would when using `react-navigation` alone.\nIt exports several TS types that replace the ones exported from `react-navigation`. Their name is prefixed by `Forwarded`:\n\n| original type          | replacement type                |\n| ---------------------- | ------------------------------- |\n| StackScreenProps       | ForwardedStackScreenProps       |\n| NativeStackScreenProps | ForwardedNativeStackScreenProps |\n| DrawerScreenProps      | ForwardedDrawerScreenProps      |\n| BottomTabScreenProps   | ForwardedTabScreenProps         |\n\n`ForwardedTabScreenProps` should work for all types of tab navigators.\n\nFor example:\n\n```ts\ntype StackParamList = {\n  Profile: { userId: string };\n};\n\ntype ForwardedProfileProps = ForwardedStackScreenProps\u003c\n  StackParamList,\n  'Profile'\n\u003e;\n\nconst ProfileScreen = withForwardedNavigationParams\u003cForwardedProfileProps\u003e()(\n  function ProfileScreenWithForwardedNavParams({ userId }) {\n    // userId is of type string\n  }\n);\n```\n\nSee the example app for full code.\n\n### Injecting Additional Props to Your screen\n\nThis is an advanced use-case and you may not need this. Consider the [deep linking guide](https://reactnavigation.org/docs/deep-linking/) from react-navigation.\nYou have a chat screen that expects a `userId` parameter provided by deep linking:\n\n```js\nconfig: {\n  path: 'chat/:userId';\n}\n```\n\nyou may need to use the `userId` parameter to get the respective `User` object and do some work with it. Wouldn't it be more convenient to directly get the `User` object instead of just the id? `withMappedNavigationParams` accepts an optional parameter, of type `React.ComponentType` (a React component) that gets all the navigation props and the wrapped component as props. You may do some additional logic in this component and then render the wrapped component, for example:\n\n```js\nimport React, { useContext } from 'react';\nimport { withForwardedNavigationParams } from 'react-navigation-props-mapper';\n\nfunction UserInjecter(props) {\n  const userStore = useContext(UserStoreContext);\n\n  // In this component you may do eg. a network fetch to get data needed by the screen component.\n  const { WrappedComponent, userId } = props;\n\n  const additionalProps = {};\n  if (userId) {\n    additionalProps.user = userStore.getUserById(userId);\n  }\n  return \u003cWrappedComponent {...props} {...additionalProps} /\u003e;\n}\n\nexport const ChatScreen = withForwardedNavigationParams(UserInjecter)(\n  ({ user }) =\u003e {\n    // return something\n  }\n);\n```\n\nThat way, in your `ChatScreen` component, you don't have to work with user id, but directly work with the user object.\n\n### Accessing the wrapped component\n\nThe original component wrapped by `withForwardedNavigationParams` is available as `wrappedComponent` property of the created HOC. This can be useful for testing.\n","funding_links":["https://github.com/sponsors/vonovak"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-navigation-props-mapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvonovak%2Freact-navigation-props-mapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-navigation-props-mapper/lists"}