diff --git a/App.js b/App.js
index 19cf752..b29083a 100644
--- a/App.js
+++ b/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 {