joaopiopedreira/react-native-autolink

Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native

React Native AutoLink

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.

Installation

npm install react-native-autolink --save

Usage

Simply import the library and pass desired props:

import Autolink from 'react-native-autolink';

class MyComponent extends Component {
  render() {
    return (
      <Autolink
        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)"
        hashtag="instagram"
        mention="twitter" />
    );
  }
}

Props

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. https://www.google.com/../something.html). 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: https://facebook.github.io/react-native/docs/linking.html

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