Add showAlert prop for displaying an alert before leaving app (#13)

Author: nmquebb

README.md

@@ -46,6 +46,7 @@ class MyComponent extends Component {
 | `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* |
+| `showAlert` | `Boolean` | `false` | Displays an alert before leaving the app to help with accidental clicks. Possible values: `true`, `false` |
 
 **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, Platform, StyleSheet, Text} from 'react-native';
+import {Alert, Linking, Platform, StyleSheet, Text} from 'react-native';
 
 export default class Autolink extends Component {
   getURL(match) {
@@ -73,14 +73,29 @@ export default class Autolink extends Component {
     }
   }
 
+  _handlePress(url, match) {
+    if (this.props.showAlert) {
+      Alert.alert(
+        'Leaving App',
+        'Do you want to continue?',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'OK', onPress: () => this._onPress(url, match)},
+        ]
+      )
+    } else {
+      this._onPress(url, match)
+    }
+  }
+
   renderLink(text, url, match, index) {
     let truncated = (this.props.truncate > 0) ? Autolinker.truncate.TruncateSmart(text, this.props.truncate, this.props.truncateChars) : text;
 
     return (
       <Text
         key={index}
         style={[styles.link, this.props.linkStyle]}
-        onPress={this._onPress.bind(this, url, match)}>
+        onPress={this._handlePress.bind(this, url, match)}>
           {truncated}
       </Text>
     );
@@ -188,6 +203,7 @@ Autolink.defaultProps = {
   twitter: false,
   url: true,
   webFallback: Platform.OS !== 'ios', // iOS requires LSApplicationQueriesSchemes for Linking.canOpenURL
+  showAlert: false,
 };
 
 Autolink.propTypes = {
@@ -206,4 +222,5 @@ Autolink.propTypes = {
   twitter: PropTypes.bool,
   url: PropTypes.bool,
   webFallback: PropTypes.bool,
+  showAlert: PropTypes.bool,
 };