React Native AutoLink

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 :)

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 (
        hashtag="instagram"
        mention="twitter"
      />
    );
  }
}

Props

• component?
• email?
• hashtag?
• latlng?
• linkProps?
• linkStyle?
• mention?
• onPress?
• onLongPress?
• phone?
• renderLink?
• renderText?
• showAlert?
• stripPrefix?
• stripTrailingSlash?
• text
• textProps?
• truncate?
• truncateChars?
• truncateLocation?
• url?
• webFallback?

Note: All other props (e.g. numberOfLines, style, etc.) will be passed through to the container component, which is either Text (default) or a custom component supplied to the component prop.

component

<Autolink text={text} component={View} />

email

<Autolink text={text} email={false} />

hashtag

<Autolink text={text} hashtag="facebook" />

latlng

Warning: Still experimental.

<Autolink text={text} latlng />

linkProps

<Autolink text={text} linkProps={{ suppressHighlighting: true, testID: 'link' }} />

linkStyle

<Autolink text={text} linkStyle={{ color: 'blue' }} />

mention

<Autolink text={text} mention="instagram" />

onPress

<Autolink
  text={text}
  onPress={(url, match) => {
    switch (match.getType()) {
      case 'mention':
        Alert.alert('Mention pressed!');
      default:
        Alert.alert('Link pressed!');
    }
  }}
/>

onLongPress

<Autolink
  text={text}
  onLongPress={(url, match) => {
    switch (match.getType()) {
      case 'mention':
        Alert.alert('Mention long pressed!');
      default:
        Alert.alert('Link long pressed!');
    }
  }}
/>

phone

Note: Currently, only US numbers are supported.

<Autolink text={text} phone="sms" />

renderLink

Note: You'll need to handle press logic yourself when using renderLink.

<Autolink
  text={text}
  component={View}
  renderLink={(text, match) => <MyLinkPreviewComponent url={match.getAnchorHref()} />}
/>

renderText

<Autolink
  text={text}
  component={View}
  renderText={(text) => <MyTypographyComponent>{text}</MyTypographyComponent>}
/>

showAlert

<Autolink text={text} showAlert />

stripPrefix

<Autolink text={text} stripPrefix={false} />

stripTrailingSlash

<Autolink text={text} stripTrailingSlash={false} />

text

<Autolink text={text} />

textProps

<Autolink text={text} textProps={{ selectable: false }} />

truncate

<Autolink text={text} truncate={20} />

truncateChars

<Autolink text={text} truncateChars="**" />

truncateLocation

<Autolink text={text} truncateLocation="end" />

url

type UrlConfig = {
  // Whether to link URLs prefixed with a scheme (e.g. https://github.com)
  schemeMatches?: boolean;
  // Whether to link URLs prefix with www (e.g. www.github.com)
  wwwMatches?: boolean;
  // Whether to link URLs with TLDs but not scheme or www prefixs (e.g. github.com)
  tldMatches?: boolean;
};

<Autolink text={text} url={false} />
<Autolink text={text} url={{ tldMatches: false }} />

webFallback

Note: Requires LSApplicationQueriesSchemes on iOS so it is disabled by default on iOS. See Linking docs for more info.

Supported By

License

 Copyright (c) 2016-2020 Josh Swan

 Licensed under the The MIT License (MIT) (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

    https://raw.githubusercontent.com/joshswan/react-native-autolink/master/LICENSE

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and
 limitations under the License.