[WIP] Open external links in external browser

App.js

@@ -8,16 +8,8 @@
 
 // External dependencies
 import React from 'react';
-import {
-  Alert,
-  BackHandler,
-  Linking,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  View,
-  WebView,
-} from 'react-native';
+import { Alert, BackHandler, Linking, Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
 import Constants from 'expo-constants';
 import { Notifications } from 'expo';
 
@@ -78,8 +70,42 @@ export default class App extends React.Component {
   });
 
   // JS injected to `WebView`
-  // Embedded website will change its functionality based on this.
-  appInfoJavaScript = 'window.trMobileApp=' + JSON.stringify(this.appInfo) + ';';
+  injectedJavaScript = `
+    function postMessage(message) {
+      if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage == 'function') {
+        window.ReactNativeWebView.postMessage(JSON.stringify(message));
+      } else {
+        console.error("'window.ReactNativeWebView.postMessage' is not a function");
+      }
+    }
+
+    // This is needed because we want to subscribe notifications only
+    // if user is authenticated window.ReactNativeWebView.postMessage
+    // accepts one argument, data, which will be available on the event
+    // object, event.nativeEvent.data. data must be a string.
+    if (window.user && window.user._id) {
+      postMessage({ "action": "authenticated" });
+    }
+
+    // Embedded website will change its functionality based on this.
+    window.trMobileApp = ${JSON.stringify(this.appInfo)};
+
+    // Open external websites in browser, not WebView
+    Array.from(document.querySelectorAll("a[href]")).forEach(link => {
+      if (link.origin === "${Settings.BASE_URL}") {
+        // Don't alter links on the Trustroots website
+        return;
+      }
+
+      link.addEventListener("click", event => {
+        // Prevent opening link in current WebView
+        event.preventDefault();
+
+        // Message React Native, where we open it externally
+        postMessage({ action: "openUrl", url: link.href });
+      });
+    });
+  `;
 
   componentWillMount() {
     // Subscribe to push notifications
@@ -274,18 +300,7 @@ export default class App extends React.Component {
   // I.e. on each URL change
   _handleLoadEnd = () => {
     console.log('handleLoadEnd');
-    this.webView.injectJavaScript(
-      //   This is needed because we want to subscribe notifications only
-      //   if user is authenticated window.postMessage accepts one
-      //   argument, data, which will be available on the event object,
-      //   event.nativeEvent.data. data must be a string.
-      `
-        if (window.user && window.user._id && typeof window.postMessage === 'function') {
-          window.postMessage('{ "action": "authenticated" }');
-        }
-        ${this.appInfoJavaScript}
-      `
-    );
+    this.webView.injectJavaScript(this.injectedJavaScript);
   };
 
   _handleError = error => {
@@ -311,7 +326,7 @@ export default class App extends React.Component {
         <StatusBar backgroundColor={this.styles.statusBar.backgroundColor} barStyle="default" />
         <WebView
           domStorageEnabled
-          injectedJavaScript={this.appInfoJavaScript}
+          injectedJavaScript={this.injectedJavaScript}
           onError={this._handleError}
           onLoadEnd={this._handleLoadEnd}
           onMessage={this.appInfo.os === 'ios' ? null : this._handleMessage}

package.json

@@ -20,7 +20,8 @@
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-web": "^0.11.4"
+    "react-native-web": "^0.11.4",
+    "react-native-webview": "^5.8.2"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.1.1",