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 {