Nightingale Posing Mischievously
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


1.4.0 • Public • Published

React Native AutoLink

NPM Version Build Status Dependency Status Dev Dependency Status

Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, and hashtags with Text nodes and onPress handlers using the Autolinker.js.


npm install react-native-autolink --save


Simply import the library and pass desired props:

import Autolink from 'react-native-autolink';
class MyComponent extends Component {
  render() {
    return (
        text="This is the string to parse for urls (, phone numbers (415-555-5555), emails (, mentions/handles (@twitter), and hashtags (#exciting)"
        mention="twitter" />


Prop Type Default Description
text String Required. The string to parse for links.
email Boolean true Enable email linking (mailto:{email}).
hashtag Boolean/String false Enable hashtag linking to supplied service. Possible values: false, "instagram", "twitter".
latlng Boolean false Experimental Enable latitude, longitude linking to maps.
mention Boolean/String false Enable mention/handle linking to supplied service. Possible values: false, "instagram", "twitter".
phone Boolean/String true Enable phone linking (tel:{number}, sms:{number}) for calling/texting. Possible values: false, "text"
twitter Boolean false DEPRECATED. Use mention prop. Enable Twitter handle linking (twitter://user?screen_name={handle}).
url Boolean/Object true Enable url linking (https://{url}). Possible values: true, false, { schemeMatches: true/false, wwwMatches: true/false, tldMatches: true/false }
stripPrefix Boolean true Enable stripping of protocol from link text (https://url -> url).
linkStyle TextStyle Custom styling to apply to Text nodes of links.
onPress function Custom function handler for link press events. Arguments: url:String, match:Object.
onLongPress function Function handler for long press events. Arguments: url:String, match:Object
renderLink function Custom render function for rendering link nodes. Arguments: text:String, match:Object, index:Number.
showAlert Boolean false Displays an alert before leaving the app to help with accidental clicks. Possible values: true, false
truncate Number 32 Truncate long link text for display (e.g. Possible values: 0 to disable, 1+ to truncate to that maximum length.
truncateChars String .. Characters to replace truncated url segments with, if enabled.
webFallback Boolean Android: true iOS: false Link to web versions of Instagram/Twitter for hashtag and mention links when users don't have the respective app installed. Requires LSApplicationQueriesSchemes on iOS. See:

Any other props will be passed through to the main Text node (e.g. style, numberOfLines).

Live Example

You can try autolinker.js options in Live Example


npm i react-native-autolink

Downloadsweekly downloads








last publish


  • avatar