FormidableLabs/react-native-autolink

Name: react-native-autolink

Owner: Formidable

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

Forked from: joshswan/react-native-autolink

Created: 2018-04-12 14:07:01.0

Updated: 2018-04-23 08:01:32.0

Pushed: 2018-04-07 06:11:24.0

Homepage:

Size: 174

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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 Autolinker.js.

Installation

install react-native-autolink --save

Usage

Simply import the library and pass desired props:

rt Autolink from 'react-native-autolink';

s MyComponent extends Component {
nder() {
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