# react-native-autolink: making text tappable in a React Native app

> react-native-autolink parses a string and wraps URLs, phone numbers, emails, social handles and hashtags in Text nodes with press handlers, and since version 4 it will match any pattern you supply with your own regex. It is a single component with no native code.

**joshswan/react-native-autolink** — Automatic linking of URLs, phone numbers, emails, handles, and even custom patterns in text for React Native

- Repository: https://github.com/joshswan/react-native-autolink
- Stars: 661 · Forks: 76
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/joshswan-react-native-autolink

## A component that turns a string into a tree of links

react-native-autolink is a component for React Native that parses text and wraps URLs, phone numbers, emails, social handles, hashtags and more with Text nodes and onPress handlers. The design is a single component rather than a set of functions, which is the right shape for this problem, because the whole difficulty of linking text is that the output is a mixed tree of plain text and link elements rather than a single string, and a component can return that tree while a function would have to hand you an array of nodes to splice into your own layout. The prop list in the README is long, but it splits into three groups. There are the type toggles, which are the properties you turn on to say which kinds of link you want. There are the rendering controls, including the component, the link style, the link props, the render functions and the text props. And there are the behaviour controls, the press handlers, the alert toggle, the prefix and trailing slash stripping and the truncation options.

## Installing it and turning on the link types

The package installs from npm:

```shell
npm i react-native-autolink
```

And the usage is a component with the text and the types you want. The README shows the whole surface in one snippet, with the required text prop and the optional toggles for email, hashtag, mention, phone and url, plus a matchers prop for custom patterns:

```javascript
import Autolink from 'react-native-autolink';

const MyComponent = () => (
  <Autolink
    // Required: the text to parse for links
    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)"
    // Optional: enable email linking
    email
    // Optional: enable hashtag linking to instagram
    hashtag="instagram"
    // Optional: enable @username linking to twitter
    mention="twitter"
    // Optional: enable phone linking
    phone="sms"
    // Optional: enable URL linking
    url
    // Optional: custom linking matchers
    matchers={[MyCustomTextMatcher]}
  />
);
```

Note that email is on by default while the others are off, which is the reverse of what you might guess, so the defaults are worth reading rather than assuming.

## The toggles take a service name, not just a boolean

The type props are more interesting than their names suggest, because two of them take a string rather than a boolean. The `hashtag` prop is a boolean or a string, defaulting to false, and the possible values are false to disable it, facebook, instagram or twitter, meaning whether to link hashtags to a supplied service. The `mention` prop works the same way with a different set of services, false, instagram, soundcloud or twitter. The `email` prop is a plain boolean defaulting to true and it links emails as `mailto:{email}`. The `url` prop is a plain boolean. The `phone` prop is a boolean or a string, so it can pick a scheme such as `sms` rather than defaulting to whatever the platform expects. The effect is that the component does not hardcode a service, it takes the service and builds the link, which is why the same component can point a hashtag at Instagram in one place and at Twitter in another without you writing the URL template yourself.

## Custom matchers are the v4 addition

The headline item in version 4, credited to a contributor in the README, is that you can now autolink any pattern using custom regex matchers and click handlers. The `matchers` prop takes an array of custom matcher objects with optional press handlers, styling, and text and URL extraction, and the example in the README is as simple as it gets:

```js
<Autolink text={text} matchers={[MyCustomMatcher]} />
```

The design point is the separation of extraction and behaviour. A matcher supplies the text and the URL, and the press handler and the styling are separate from that, which means the same matcher can be used with the default onPress behaviour or overridden. This is the feature that turns the component from a URL linker into a general inline linkifier, and it is what you would reach for if your app has domain specific patterns, a ticket reference, a mention of a product code, or a language tag that a general purpose autolinker would not recognise.

## Press handling, and the option to do nothing

The default press behaviour opens the link, and the README offers several ways to change it. The `onPress` prop overrides the default link press behaviour with a signature of `(url: string, match: Match) => void`, and the match object is what lets you branch on the type of thing that was pressed:

```js
<Autolink
  text={text}
  onPress={(url, match) => {
    switch (match.getType()) {
      case 'mention':
        Alert.alert('Mention pressed!');
      default:
        Alert.alert('Link pressed!');
    }
  }}
/>
```

There is an `onLongPress` prop with the same signature for long press events, and a `showAlert` prop, and a `useNativeSchemes` prop that presumably controls whether native schemes are used for the generated links, which the README lists among the props without expanding on it in the visible text. The `renderLink` and `renderText` props are there for cases where the default rendering of a link or of a plain text run is not what you want. This is a component that takes over a lot of the rendering decisions, and the escape hatches are correspondingly numerous.

## Truncation changes what gets linked

The truncation props are worth understanding, because they interact with the parsing in a way that is easy to get wrong. There is a `truncate` prop, a `truncateChars` prop and a `truncateLocation` prop, and the separate `stripPrefix` and `stripTrailingSlash` props change the link target without changing the displayed text. The practical issue is that if text is truncated after the link detection, a URL cut in half may still be detected as a URL and still become a link that points at a truncated address. If your app shows a one line preview of a comment, the truncation behaviour and the link detection are working on the same string, and the component does not document an interaction between them. The `useNativeSchemes` prop is the other one to look at before shipping, since it decides whether a generated link opens with the platform's native handler for that scheme or falls back to a browser.

## The package is small, and the parsing is not its own

The package.json is short and shows how little this component does itself. The main entry is `dist/index.js` with types at `dist/index.d.ts`, the build script is `rimraf dist && tsc`, the lint script is `tsc --noEmit && eslint .` and the test script is `jest` with the React Native jest preset. There is exactly one runtime dependency, `autolinker` at version 3.16.2 or newer, and that is the library doing the actual pattern matching for URLs, emails, phone numbers, mentions and hashtags. So the component is the React Native layer, the parsing is somebody else's problem, and the peer dependencies are React above 16.8.0 and React Native above 0.25.0. The dev dependencies show a modern toolchain, with React 19, React Native 0.87, jest 30, eslint 9 and typescript around 6.0, plus a react-test-renderer, so the tests render the component rather than testing a parser.

## Where this is the wrong choice

The limits are mostly about scope. First, it does not render your own text, it renders a string you give it, and it replaces the container with a Text by default. The `component` prop lets you override that container, and the README notes that all other props, for example `numberOfLines` or `style`, are passed through to the container component, which is either Text by default or a custom component you supply. That pass-through is the escape hatch for a lot of layout work, but it also means the component has an opinion about the shape of your output. Second, the link types are fixed. If your app needs a currency amount, a SKU, a coordinate or a licence plate to become tappable, you write a custom matcher, which is the v4 feature and a real amount of work. Third, the styling story is thin. There is a linkStyle prop and a linkProps prop, and the README notes that linkStyle will be overridden if a style is supplied in linkProps, which is the kind of precedence rule that produces surprise when you are trying to theme links. Fourth, this is a display component, and it does nothing about accessibility of the resulting links beyond what Text provides.

## Conclusion

react-native-autolink suits any React Native app that renders user generated or imported text and wants URLs, emails, phone numbers and handles to become tappable, since it handles the parsing and the press behaviour rather than leaving you to write a regex and a Text tree. It is the wrong choice for content you control and have already validated, where a plain Text with an explicit link is simpler, and the wrong choice if you need the highlighting to match your theme exactly without restyling every link, since linkStyle and linkProps are the only levers. Before you adopt it, check the peer dependency range, which asks for React above 16.8 and React Native above 0.25, and read the truncate props, because truncated text changes what gets linked. The last push was on 2026-10-03 with v4.2.3 released the same day, and the licence is MIT.

## FAQ

### How do I install react-native-autolink?

Install it with `npm i react-native-autolink`, then import the component and pass the text you want parsed along with the link types you want enabled. The peer dependencies ask for React above 16.8.0 and React Native above 0.25.0.

### Which link types does react-native-autolink detect?

URLs, phone numbers, emails, social handles and hashtags are handled out of the box, and each type is toggled with a prop. The hashtag prop accepts false, facebook, instagram or twitter, the mention prop accepts false, instagram, soundcloud or twitter, the phone prop accepts a scheme such as sms, email defaults to true and links as mailto, and url is a boolean.

### Can react-native-autolink match my own patterns?

Yes, that is the new feature in version 4. The matchers prop takes an array of custom matcher objects with optional press handlers, styling, and text and URL extraction, so you can autolink any pattern with your own regex and a custom click handler.

## Sources

- [Issues](https://github.com/joshswan/react-native-autolink/issues)
- [joshswan/react-native-autolink on GitHub](https://github.com/joshswan/react-native-autolink)
- [License: MIT](https://github.com/joshswan/react-native-autolink/blob/main/LICENSE)
- [README](https://github.com/joshswan/react-native-autolink/blob/main/README.md)
- [Releases](https://github.com/joshswan/react-native-autolink/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/joshswan-react-native-autolink