{"id":4077,"url":"https://github.com/joshswan/react-native-autolink","last_synced_at":"2026-01-18T09:09:13.420Z","repository":{"id":41341164,"uuid":"50565788","full_name":"joshswan/react-native-autolink","owner":"joshswan","description":"Automatic linking of URLs, phone numbers, emails, handles, and even custom patterns in text for React Native","archived":false,"fork":false,"pushed_at":"2023-10-07T18:16:58.000Z","size":975,"stargazers_count":642,"open_issues_count":5,"forks_count":84,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-25T00:51:53.352Z","etag":null,"topics":["autolinker","links","react-native"],"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/joshswan.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-28T07:47:29.000Z","updated_at":"2024-04-16T20:34:11.000Z","dependencies_parsed_at":"2024-01-08T01:01:39.525Z","dependency_job_id":"3c2eabd3-130b-42f9-8f0d-128be8c0aab8","html_url":"https://github.com/joshswan/react-native-autolink","commit_stats":{"total_commits":162,"total_committers":18,"mean_commits":9.0,"dds":0.6049382716049383,"last_synced_commit":"718c13424e14567c352cd5dfc2d17c3b195ecdc5"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshswan%2Freact-native-autolink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshswan%2Freact-native-autolink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshswan%2Freact-native-autolink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshswan%2Freact-native-autolink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshswan","download_url":"https://codeload.github.com/joshswan/react-native-autolink/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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":["autolinker","links","react-native"],"created_at":"2024-01-05T20:17:00.369Z","updated_at":"2026-01-18T09:09:13.403Z","avatar_url":"https://github.com/joshswan.png","language":"TypeScript","funding_links":[],"categories":["Components","TypeScript","Others"],"sub_categories":["UI"],"readme":"# React Native AutoLink\n\n[![Version][version-image]][package-url] [![Downloads][downloads-image]][package-url] [![Build Status][build-image]][build-url] [![License][license-image]][license-url]\n\nAuto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, hashtags, and more with Text nodes and onPress handlers.\n\n**New in v4**: Autolink any pattern using [custom regex matchers](#custom-matchers) and click handlers! Thanks @lafiosca!\n\n## Installation\n\n```shell\nnpm i react-native-autolink\n```\n\n## Usage\n\nSimply import the library and enable the link types you want to auto-link:\n\n```javascript\nimport Autolink from 'react-native-autolink';\n\nconst MyComponent = () =\u003e (\n  \u003cAutolink\n    // Required: the text to parse for links\n    text=\"This is the string to parse for urls (https://github.com/joshswan/react-native-autolink), phone numbers (415-555-5555), emails (josh@example.com), mentions/handles (@twitter), and hashtags (#exciting)\"\n    // Optional: enable email linking\n    email\n    // Optional: enable hashtag linking to instagram\n    hashtag=\"instagram\"\n    // Optional: enable @username linking to twitter\n    mention=\"twitter\"\n    // Optional: enable phone linking\n    phone=\"sms\"\n    // Optional: enable URL linking\n    url\n    // Optional: custom linking matchers\n    matchers={[MyCustomTextMatcher]}\n  /\u003e\n);\n```\n\n## Props\n\n- [`component?`](#component)\n- [`email?`](#email)\n- [`hashtag?`](#hashtag)\n- [`linkProps?`](#linkprops)\n- [`linkStyle?`](#linkstyle)\n- [`matchers?`](#matchers)\n- [`mention?`](#mention)\n- [`onPress?`](#onpress)\n- [`onLongPress?`](#onlongpress)\n- [`phone?`](#phone)\n- [`renderLink?`](#renderlink)\n- [`renderText?`](#rendertext)\n- [`showAlert?`](#showalert)\n- [`stripPrefix?`](#stripprefix)\n- [`stripTrailingSlash?`](#striptrailingslash)\n- [`text`](#text)\n- [`textProps?`](#textprops)\n- [`truncate?`](#truncate)\n- [`truncateChars?`](#truncatechars)\n- [`truncateLocation?`](#truncatelocation)\n- [`url?`](#url)\n- [`useNativeSchemes?`](#usenativeschemes)\n\n**Note:** All other props (e.g. `numberOfLines`, `style`, etc.) will be passed through to the container component, which is either `Text` (default) or a custom component supplied to the `component` prop.\n\n### `component`\n\n| Type                | Required | Default | Description                                          |\n| ------------------- | -------- | ------- | ---------------------------------------------------- |\n| React.ComponentType | No       | `Text`  | Override the component used as the output container. |\n\n```js\n\u003cAutolink text={text} component={View} /\u003e\n```\n\n### `email`\n\n| Type    | Required | Default | Description                                |\n| ------- | -------- | ------- | ------------------------------------------ |\n| boolean | No       | `true`  | Whether to link emails (`mailto:{email}`). |\n\n```js\n\u003cAutolink text={text} email={false} /\u003e\n```\n\n### `hashtag`\n\n| Type              | Required | Default | Description                                                                                                                  |\n| ----------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| boolean or string | No       | `false` | Whether to link hashtags to supplied service. Possible values: `false` (disabled), `\"facebook\"`, `\"instagram\"`, `\"twitter\"`. |\n\n```js\n\u003cAutolink text={text} hashtag=\"facebook\" /\u003e\n```\n\n### `linkProps`\n\n| Type      | Required | Default | Description                                 |\n| --------- | -------- | ------- | ------------------------------------------- |\n| TextProps | No       | `{}`    | Attributes applied to link Text components. |\n\n```js\n\u003cAutolink text={text} linkProps={{ suppressHighlighting: true, testID: 'link' }} /\u003e\n```\n\n### `linkStyle`\n\n| Type      | Required | Default | Description                                                                                                         |\n| --------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |\n| TextStyle | No       | `{}`    | Styles applied to link Text components. _Note:_ Will be overriden if `style` supplied in [`linkProps`](#linkprops). |\n\n```js\n\u003cAutolink text={text} linkStyle={{ color: 'blue' }} /\u003e\n```\n\n### `matchers`\n\n| Type              | Required | Default | Description                                                                                     |\n| ----------------- | -------- | ------- | ----------------------------------------------------------------------------------------------- |\n| `CustomMatcher[]` | No       |         | Array of custom matcher objects with optional press handlers, styling, and text/url extraction. |\n\nSee the [Custom Matchers](#custom-matchers) section below for more information.\n\n```js\n\u003cAutolink text={text} matchers={[MyCustomMatcher]} /\u003e\n```\n\n### `mention`\n\n| Type              | Required | Default | Description                                                                                                                            |\n| ----------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| boolean or string | No       | `false` | Whether to link mentions/handles to supplied service. Possible values: `false` (disabled), `\"instagram\"`, `\"soundcloud\"`, `\"twitter\"`. |\n\n```js\n\u003cAutolink text={text} mention=\"instagram\" /\u003e\n```\n\n### `onPress`\n\n| Type     | Required | Default | Description                                                                             |\n| -------- | -------- | ------- | --------------------------------------------------------------------------------------- |\n| function | No       |         | Override default link press behavior. Signature: `(url: string, match: Match) =\u003e void`. |\n\n```js\n\u003cAutolink\n  text={text}\n  onPress={(url, match) =\u003e {\n    switch (match.getType()) {\n      case 'mention':\n        Alert.alert('Mention pressed!');\n      default:\n        Alert.alert('Link pressed!');\n    }\n  }}\n/\u003e\n```\n\n### `onLongPress`\n\n| Type     | Required | Default | Description                                                                      |\n| -------- | -------- | ------- | -------------------------------------------------------------------------------- |\n| function | No       | none    | Handle link long press events. Signature: `(url: string, match: Match) =\u003e void`. |\n\n```js\n\u003cAutolink\n  text={text}\n  onLongPress={(url, match) =\u003e {\n    switch (match.getType()) {\n      case 'mention':\n        Alert.alert('Mention long pressed!');\n      default:\n        Alert.alert('Link long pressed!');\n    }\n  }}\n/\u003e\n```\n\n### `phone`\n\n| Type              | Required | Default | Description                                                                                                                        |\n| ----------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| boolean or string | No       | `true`  | Whether to link phone numbers. Possible values: `false` (disabled), `true` (`tel:{number}`), `\"sms\"` or `\"text\"` (`sms:{number}`). |\n\n_Note:_ Currently, only US numbers are supported.\n\n```js\n\u003cAutolink text={text} phone=\"sms\" /\u003e\n```\n\n### `renderLink`\n\n| Type     | Required | Default | Description                                                                                                            |\n| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |\n| function | No       |         | Override default link rendering behavior. Signature: `(text: string, match: Match, index: number) =\u003e React.ReactNode`. |\n\n_Note:_ You'll need to handle press logic yourself when using `renderLink`.\n\n```js\n\u003cAutolink\n  text={text}\n  component={View}\n  renderLink={(text, match) =\u003e \u003cMyLinkPreviewComponent url={match.getAnchorHref()} /\u003e}\n/\u003e\n```\n\n### `renderText`\n\n| Type     | Required | Default | Description                                                                                              |\n| -------- | -------- | ------- | -------------------------------------------------------------------------------------------------------- |\n| function | No       |         | Override default text rendering behavior. Signature: `(text: string, index: number) =\u003e React.ReactNode`. |\n\n```js\n\u003cAutolink\n  text={text}\n  component={View}\n  renderText={(text) =\u003e \u003cMyTypographyComponent\u003e{text}\u003c/MyTypographyComponent\u003e}\n/\u003e\n```\n\n### `showAlert`\n\n| Type    | Required | Default | Description                                                                            |\n| ------- | -------- | ------- | -------------------------------------------------------------------------------------- |\n| boolean | No       | `false` | Whether to display an alert before leaving the app (for privacy or accidental clicks). |\n\n```js\n\u003cAutolink text={text} showAlert /\u003e\n```\n\n### `stripPrefix`\n\n| Type    | Required | Default | Description                                                                               |\n| ------- | -------- | ------- | ----------------------------------------------------------------------------------------- |\n| boolean | No       | `true`  | Whether to strip protocol from URL link text (e.g. `https://github.com` -\u003e `github.com`). |\n\n```js\n\u003cAutolink text={text} stripPrefix={false} /\u003e\n```\n\n### `stripTrailingSlash`\n\n| Type    | Required | Default | Description                                                                                |\n| ------- | -------- | ------- | ------------------------------------------------------------------------------------------ |\n| boolean | No       | `true`  | Whether to strip trailing slashes from URL link text (e.g. `github.com/` -\u003e `github.com`). |\n\n```js\n\u003cAutolink text={text} stripTrailingSlash={false} /\u003e\n```\n\n### `text`\n\n| Type   | Required | Default | Description                    |\n| ------ | -------- | ------- | ------------------------------ |\n| string | Yes      |         | The string to parse for links. |\n\n```js\n\u003cAutolink text={text} /\u003e\n```\n\n### `textProps`\n\n| Type      | Required | Default | Description                                     |\n| --------- | -------- | ------- | ----------------------------------------------- |\n| TextProps | No       | `{}`    | Attributes applied to non-link Text components. |\n\n```js\n\u003cAutolink text={text} textProps={{ selectable: false }} /\u003e\n```\n\n### `truncate`\n\n| Type   | Required | Default | Description                                                                              |\n| ------ | -------- | ------- | ---------------------------------------------------------------------------------------- |\n| number | No       | `0`     | Maximum length of URL link text. Possible values: `0` (disabled), `1+` (maximum length). |\n\n```js\n\u003cAutolink text={text} truncate={20} /\u003e\n```\n\n### `truncateChars`\n\n| Type   | Required | Default | Description                                                                             |\n| ------ | -------- | ------- | --------------------------------------------------------------------------------------- |\n| string | No       | `..`    | Characters to replace truncated URL link text segments with (e.g. `github.com/../repo`) |\n\n```js\n\u003cAutolink text={text} truncateChars=\"**\" /\u003e\n```\n\n### `truncateLocation`\n\n| Type   | Required | Default   | Description                                                                    |\n| ------ | -------- | --------- | ------------------------------------------------------------------------------ |\n| string | No       | `\"smart\"` | Override truncation location. Possible values: `\"smart\"`, `\"end\"`, `\"middle\"`. |\n\n```js\n\u003cAutolink text={text} truncateLocation=\"end\" /\u003e\n```\n\n### `url`\n\n| Type              | Required | Default | Description                                                                                 |\n| ----------------- | -------- | ------- | ------------------------------------------------------------------------------------------- |\n| boolean or object | No       | `true`  | Whether to link URLs. Possible values: `false` (disabled), `true`, `UrlConfig` (see below). |\n\n```js\ntype UrlConfig = {\n  // Whether to link URLs prefixed with a scheme (e.g. https://github.com)\n  schemeMatches?: boolean,\n  // Whether to link URLs prefix with www (e.g. www.github.com)\n  wwwMatches?: boolean,\n  // Whether to link URLs with TLDs but not scheme or www prefixs (e.g. github.com)\n  tldMatches?: boolean,\n};\n```\n\n```js\n\u003cAutolink text={text} url={false} /\u003e\n\u003cAutolink text={text} url={{ tldMatches: false }} /\u003e\n```\n\n### `useNativeSchemes`\n\n| Type    | Required | Default | Description                                                                                                                        |\n| ------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| boolean | No       | `false` | Whether to use native app schemes (e.g. `twitter://`) rather than web URLs when linking to services for hashtag and mention links. |\n\n_Note:_ Prior to v4, the `webFallback` prop enabled a check to see whether the user had a particular app installed using `Linking.canOpenUrl`, falling back to a web link if not. Due to permissions requirements on iOS and upcoming changes on Android, this feature was removed and instead, services will be linked to the web versions by default. Use the `useNativeSchemes` prop to enable native app linking or use the `onPress` and/or `matchers` props to provide your own custom logic for linking and opening apps.\n\n## Custom Matchers\n\nCustom matchers allow for complete customization of Autolink. You can match text based on a custom regular expression, supply custom `onPress` and `onLongPress` handlers, custom link styles, and even custom functions for creating the text and/or URL for the match.\n\nCustom matchers are particularly useful for matching other types of data that aren't supported out-of-the-box (e.g. international phone numbers) and for mixing internal app navigation links with standard external links within the same block of content.\n\nCheck out the section below for a few [ready-to-go custom matchers](#available-matchers).\n\n```ts\ninterface CustomMatcher {\n  /* Regular expression pattern to match/link user-specified patterns */\n  pattern: RegExp;\n  /* Custom press handler for links of this type */\n  onPress?: (match: CustomMatch) =\u003e void;\n  /* Custom long-press handler for links of this type */\n  onLongPress?: (match: CustomMatch) =\u003e void;\n  /* Custom styling for links of this type */\n  style?: StyleProp\u003cTextStyle\u003e;\n  /* Custom type/identifier for use with match.getType() */\n  type?: string;\n  /* Custom function for extracting link text using regex replacer args */\n  getLinkText?: (replacerArgs: ReplacerArgs) =\u003e string;\n  /* Custom function for extracting link URL using regex replacer args */\n  getLinkUrl?: (replacerArgs: ReplacerArgs) =\u003e string;\n  /* Custom function for rendering link - remember to attach press handlers! */\n  renderLink?: (text: string, match: CustomMatch, index: number) =\u003e React.ReactNode;\n}\n```\n\nThe `ReplacerArgs` type supplied to `getLinkText` and `getLinkUrl` is an array containing the variadic arguments passed to a replacer function as provided to `String.replace`. Essentially, element 0 is the entire matched link, and elements 1 through N are any captured subexpressions. More details can be found [in the documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_function_as_a_parameter).\n\nThe `CustomMatch` class supplied to `onPress` and `onLongPress` (or their non-custom-matcher companions above) includes a few methods that can be useful as well, e.g. `getMatcher()` to return the `CustomMatcher` object and `getReplacerArgs` to return the same array discussed above.\n\n### Custom Matcher Usage\n\nWhen using the built-in link handling, the `getLinkUrl` function can be provided to determine the URL to which the link should navigate. Alternatively the `onPress` function will bypass that entirely, allowing the user to provide custom handling specific to this link type, e.g. for navigating within the application.\n\nThe following hypothetical example handles custom @-mention links of the format `@[Name](userId)`, navigating to a user profile screen:\n\n```js\n\u003cAutolink\n  text={text}\n  matchers={[\n    {\n      pattern: /@\\[([^[]*)]\\(([^(^)]*)\\)/g,\n      style: { color: '#ff00ff' },\n      getLinkText: (replacerArgs) =\u003e `@${replacerArgs[1]}`,\n      onPress: (match) =\u003e {\n        navigate('userProfile', { userId: match.getReplacerArgs()[2] });\n      },\n    },\n  ]}\n/\u003e\n```\n\n### Available Matchers\n\nA few custom matchers (e.g. `LatLngMatcher`, `IntlPhoneMatcher`, `PhoneMatchersByCountry`) are already included and available for use. They're just objects so they're easily customizable too! PRs are welcome for additional custom matchers that could be useful to the community.\n\n```js\nimport { Autolink, LatLngMatcher } from 'react-native-autolink';\n\n\u003cAutolink text=\"Some text with locations 32.123, -117.123\" matchers={[LatLngMatcher]} /\u003e;\n\n// Or customize the matcher\nconst MyLatLngMatcher = { ...LatLngMatcher, onPress: () =\u003e alert('LatLng pressed!') };\n\n\u003cAutolink text={text} matchers={[MyLatLngMatcher]} /\u003e;\n```\n\n## Supported By\n\n\u003ca href=\"https://www.disruptivelabs.io\"\u003e\n  \u003cimg src=\"https://www.disruptivelabs.io/images/logo.png\" alt=\"Disruptive Labs\" width=\"150\" /\u003e\n\u003c/a\u003e\n\n## License\n\n```text\n Copyright (c) 2016-2023 Josh Swan\n\n Licensed under the The MIT License (MIT) (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n    https://raw.githubusercontent.com/joshswan/react-native-autolink/master/LICENSE\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n\n See the License for the specific language governing permissions and\n limitations under the License.\n```\n\n[build-image]: https://img.shields.io/circleci/build/gh/joshswan/react-native-autolink?style=flat-square\n[build-url]: https://circleci.com/gh/joshswan/react-native-autolink\n[downloads-image]: https://img.shields.io/npm/dm/react-native-autolink?style=flat-square\n[license-image]: https://img.shields.io/npm/l/react-native-autolink?color=blue\u0026style=flat-square\n[license-url]: https://github.com/joshswan/react-native-autolink/blob/master/LICENSE\n[package-url]: https://www.npmjs.com/package/react-native-autolink\n[version-image]: https://img.shields.io/npm/v/react-native-autolink?style=flat-square\n[match-url]: http://greg-jacobs.com/Autolinker.js/api/index.html#!/api/Autolinker.match.Match\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshswan%2Freact-native-autolink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshswan%2Freact-native-autolink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshswan%2Freact-native-autolink/lists"}