{"id":4414,"url":"https://github.com/Starotitorov/react-native-deep-link","last_synced_at":"2025-08-04T01:32:23.717Z","repository":{"id":57336477,"uuid":"115999709","full_name":"Starotitorov/react-native-deep-link","owner":"Starotitorov","description":"NPM package for handling deep links in React Native applications (Android+iOS).","archived":false,"fork":false,"pushed_at":"2019-03-16T18:32:31.000Z","size":1339,"stargazers_count":144,"open_issues_count":4,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-09T08:43:16.237Z","etag":null,"topics":["android","deep-linking","ios","javascript","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Starotitorov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-02T09:45:18.000Z","updated_at":"2025-06-11T18:28:43.000Z","dependencies_parsed_at":"2022-09-03T07:11:36.957Z","dependency_job_id":null,"html_url":"https://github.com/Starotitorov/react-native-deep-link","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Starotitorov/react-native-deep-link","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Starotitorov%2Freact-native-deep-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Starotitorov%2Freact-native-deep-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Starotitorov%2Freact-native-deep-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Starotitorov%2Freact-native-deep-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Starotitorov","download_url":"https://codeload.github.com/Starotitorov/react-native-deep-link/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Starotitorov%2Freact-native-deep-link/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636358,"owners_count":24282078,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["android","deep-linking","ios","javascript","react","react-native"],"created_at":"2024-01-05T20:17:11.176Z","updated_at":"2025-08-04T01:32:23.315Z","avatar_url":"https://github.com/Starotitorov.png","language":"JavaScript","funding_links":[],"categories":["Components","深度链接（Deep Linking）"],"sub_categories":["Deep Linking"],"readme":"# react-native-deep-link\n\n[![Build Status](https://travis-ci.org/Starotitorov/react-native-deep-link.svg?branch=master)](https://travis-ci.org/Starotitorov/react-native-deep-link)\n[![npm version](https://img.shields.io/npm/v/react-native-deep-link.svg)](https://www.npmjs.com/package/react-native-deep-link)\n[![NPM Downloads](https://img.shields.io/npm/dt/react-native-deep-link.svg)](https://www.npmjs.com/package/react-native-deep-link)\n\n[![NPM](https://nodei.co/npm/react-native-deep-link.png)](https://nodei.co/npm/react-native-deep-link/)\n\nReact Native deep linking library.\nIf you need to handle deep links in your project, just create a schemes config, the package will do the rest!\n\n* [Why do I need this package?](#why-do-i-need-this-package)\n* [Installation](#installation)\n* [Configuring Android](#configuring-android)\n* [Configuring iOS](#configuring-ios)\n* [Example](#example)\n* [Usage](#usage)\n* [API](#api)\n* [Contributing](#contributing)\n* [License](#license)\n\n## Why do I need this package?\n\n**This package allows you to handle deep links in React Native applications.\nThe package can be added to your project irrespective of what solution you are using for navigation,\nwhat state management library you decided to use. I will try to provide some examples below\njust to show why you may need this package.**\n\nIf you are using react-navigation, you should know that it supports deep linking out of the box,\n**but sometimes this solution does not meet your needs well.** \n\n**React-navigation deep linking implementation only allows you to navigate user to some screen when application receives the url.\nThis package provides you an ability to decide how to handle the url by specifying your own handler in the config,\nread the [docs](#usage) below.**\n\nAlso, in real applications it is a common practice to add navigation state to Redux.\n**According to the react-navigation documentation, in this case you have to handle deep links manually,\nreact-native-deep-link provides a solution.**\nAdding navigation to Redux gives you more control on the navigation state,\nallows to dispatch navigation actions from your redux-thunk actions.\n\n**The package does not require Redux as a dependency,\nso you can use it in your React Native apps without Redux.**\nFor example, you can implement your own NavigationService\nas it is described in [react-navigation docs](https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)\nand use it in route callbacks, read the [docs](#usage) below.\n\n## Installation\n\n```\nyarn add react-native-deep-link\n# or with npm\n# npm install --save react-native-deep-link\n```\n\n## Configuring Android\n\nFor instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-links/deep-linking.html#adding-filters).\n\nIf you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See `\u003cactivity\u003e` documentation for more information.\n\n```\n\u003cactivity\n  android:name=\".MainActivity\"\n  android:launchMode=\"singleTask\"\u003e\n```\n\n## Configuring iOS\n\nOn iOS, you'll need to link `RCTLinking` to your project by following the steps described [here](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:\n\n```\n// iOS 9.x or newer\n#import \u003cReact/RCTLinkingManager.h\u003e\n\n- (BOOL)application:(UIApplication *)application\n   openURL:(NSURL *)url\n   options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options\n{\n  return [RCTLinkingManager application:application openURL:url options:options];\n}\n```\n\nIf you're targeting iOS 8.x or older, you can use the following code instead:\n\n```\n// iOS 8.x or older\n#import \u003cReact/RCTLinkingManager.h\u003e\n\n- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url\n  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation\n{\n  return [RCTLinkingManager application:application openURL:url\n                      sourceApplication:sourceApplication annotation:annotation];\n}\n```\n\nIf your app is using [Universal Links](https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html), you'll need to add the following code as well:\n\n```\n- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity\n restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler\n{\n return [RCTLinkingManager application:application\n                  continueUserActivity:userActivity\n                  restorationHandler:restorationHandler];\n}\n```\n\n## Examples\n\nAn Example of usage this package in the Redux application available in the `example/` folder.\n\nIn the `NavigationServiceExample/` folder you can find an example of usage the package in the application without Redux.\n\n## Usage\n\nAfter installing the package, you need to follow a few simple steps:\n\n1. Use `createDeepLinkingHandler` to get a higher order component, pass schemes config to this function.\n\n```js\nimport { createDeepLinkingHandler } from 'react-native-deep-link';\n\n/**\n * This function receives a result of url parsing,\n * you can find the structure of this object in the API docs below, and returns a function.\n * The returned function receives component props.\n */\nconst handleInvitationToChannel = ({ params: { channelId } }) =\u003e ({ dispatch }) =\u003e {\n    // addCurrentUserToChannel is a redux-thunk action,\n    // which was defined somewhere in the code.\n    dispatch(addCurrentUserToChannel(channelId));\n}\n\nconst schemes = [\n    {\n        name: 'example:',\n        routes: [\n            {\n                expression: '/channels/:channelId',\n                callback: handleInvitationToChannel\n            }\n        ]\n    }\n];\n\nconst withDeepLinking = createDeepLinkingHandler(schemes);\n```\n\n2. Use the higher-order component returned from `createDeepLinkingHandler`.\n\n```js\nexport default compose(\n    connect(mapStateToProps, mapDispatchToProps),\n    withDeepLinking\n)(App);\n```\n\n**That was it, you have added react-native-deep-link package to the project!**\n\nOptionally, if you need to handle situations, when the url is not supported or a handler was not found for the url,\nyou can pass callbacks to withDeepLinking:\n\n```js\nimport { createDeepLinkingHandler } from 'react-native-deep-link';\n\nconst App = createDeepLinkingHandler(schemes)(AppComponent);\n\nclass Root extends Component {\n    render() {\n        return (\n            \u003cApp\n                onGetInitialUrlError={err =\u003e console.log(err)}\n                onCanOpenUrlError={err =\u003e console.log(err)}\n                onUrlIsNotSupported={url =\u003e console.log(`The ${url} is not supported.`)}\n                onCannotHandleUrl={url =\u003e console.log(`A handler for the ${url} was not found.`)}\n            /\u003e\n        );\n    }\n}\n```\n\n## API\n\n`createDeepLinkingHandler` takes an array of schemes as a parameter. Each scheme should have a `name` and an array of `routes`.\n\nEach route should have an `expression` and a `callback` to be invoked in case of successful matching of the url to the route specified using an `expression` property.\nFollow the next pattern to specify named url parameters `:\u003cparameter_name\u003e`.\nExamples: `/users/:userId`, `/conversations/:conversationId/messages/:messageId`.\n\nRoute `callback` is a higher-order function which receives the result of url parsing and returns a function.\nThis returned function receives component props.\n\nA result of url parsing is an object with the next set of properties:\n```js\n{\n    scheme: 'example:', // Scheme name\n    route: '/colors/:color', // Route expression\n    query: {}, // Query string parameters\n    params: {} // Url parameters\n}\n```\n\n`createDeepLinkingHandler` returns a higher order component,\nthe next props can be passed to this component:\n\nProperty              | Type     | Optional | Default     | Description\n--------------------- | -------- | -------- | ----------- | -----------\nonGetInitialUrlError  | function | true     | () =\u003e {}    | a callback, which will be called in case the application throws an error trying to get initial url. The function receives the error.\nonCanOpenUrlError     | function | true     | () =\u003e {}    | a callback, which will be called in case the application throws an error trying to open url. The function receives the error.\nonUrlIsNotSupported   | function | true     | () =\u003e {}    | a callback, which will be called in case the application does not support received url. The function receives the url.\nonCannotHandleUrl     | function | true     | () =\u003e {}    | a callback, which will be called in case a handler for the given url was not specified. The function receives the url.\n\n## Contributing\n\nYou are welcome! Create pull requests and help to improve the package.\n\n## License\n\nreact-native-deep-link is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStarotitorov%2Freact-native-deep-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FStarotitorov%2Freact-native-deep-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStarotitorov%2Freact-native-deep-link/lists"}