Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, twitter handles, and hashtags with Text nodes and onPress handlers using the Autolinker.js.
npm install react-native-autolink --saveSimply 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". |
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).
You can try autolinker.js options in Live Example
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent