Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, hashtags, and more with Text nodes and onPress handlers. And it's all fully customizable :)
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 (
<Autolink
text="This is the string to parse for urls (https://github.com/joshswan/react-native-autolink), phone numbers (415-555-5555), emails ([email protected]), mentions/handles (@twitter), and hashtags (#exciting)"
hashtag="instagram"
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. 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).