Add support for web fallback URLs for Instagram/Twitter links

Author: joshswan

README.md

@@ -20,9 +20,9 @@ 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]), twitter handles (@twitter), and hashtags (#exciting)"
+        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"
-        twitter />
+        mention="twitter" />
     );
   }
 }
@@ -45,6 +45,7 @@ class MyComponent extends Component {
 | `renderLink` | `function` | | Custom render function for rendering link nodes. Arguments: `text:String`, `link:String`, `match:Object`. *See [Autolinker.js match object](http://gregjacobs.github.io/Autolinker.js/docs/#!/api/Autolinker.match.Match) for more information about the match object.* |
 | `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).**
 

src/index.js

@@ -9,7 +9,7 @@
 
 import React, {Component, PropTypes, createElement} from 'react';
 import Autolinker from 'autolinker';
-import {Linking, StyleSheet, Text} from 'react-native';
+import {Linking, Platform, StyleSheet, Text} from 'react-native';
 
 export default class Autolink extends Component {
   getURL(match) {
@@ -23,9 +23,9 @@ export default class Autolink extends Component {
 
         switch (this.props.hashtag) {
           case 'instagram':
-            return `instagram://tag?name=${tag}`;
+            return this.selectURL(`instagram://tag?name=${tag}`, `https://www.instagram.com/explore/tags/${tag}/`);
           case 'twitter':
-            return `twitter://search?query=%23${tag}`;
+            return this.selectURL(`twitter://search?query=%23${tag}`, `https://twitter.com/hashtag/${tag}`);
           default:
             return match.getMatchedText();
         }
@@ -34,9 +34,9 @@ export default class Autolink extends Component {
 
         switch (this.props.mention) {
           case 'instagram':
-            return `instagram://user?username=${mention}`;
+            return this.selectURL(`instagram://user?username=${mention}`, `https://www.instagram.com/${mention}/`);
           case 'twitter':
-            return `twitter://user?screen_name=${mention}`;
+            return this.selectURL(`twitter://user?screen_name=${mention}`, `https://twitter.com/${mention}`);
           default:
             return match.getMatchedText();
         }
@@ -49,6 +49,14 @@ export default class Autolink extends Component {
     }
   }
 
+  selectURL(url, fallback) {
+    if (this.props.webFallback) {
+      return Linking.canOpenURL(url) ? url : fallback;
+    }
+
+    return url;
+  }
+
   _onPress(url, match) {
     if (this.props.onPress) {
       this.props.onPress(url, match);
@@ -88,6 +96,7 @@ export default class Autolink extends Component {
       truncateChars,
       twitter,
       url,
+      webFallback,
       ...other,
     } = this.props;
 
@@ -170,6 +179,7 @@ Autolink.defaultProps = {
   truncateChars: '..',
   twitter: false,
   url: true,
+  webFallback: Platform.OS !== 'ios', // iOS requires LSApplicationQueriesSchemes for Linking.canOpenURL
 };
 
 Autolink.propTypes = {
@@ -187,4 +197,5 @@ Autolink.propTypes = {
   truncateChars: PropTypes.string,
   twitter: PropTypes.bool,
   url: PropTypes.bool,
+  webFallback: PropTypes.bool,
 };