onMessage and injectJavaScript

DimitarNestorov · DimitarNestorov · commit 350177d40514 · 2020-05-21T15:36:42.000+03:00
diff --git a/.gitattributes b/.gitattributes
@@ -5,5 +5,7 @@
 babel.config.js linguist-vendored=true
 metro.config.js linguist-vendored=true
 example/transformer.js linguist-vendored=true
-example/android linguist-vendored=true
-example/ios linguist-vendored=true
+example/android/* linguist-vendored=true
+example/ios/* linguist-vendored=true
+Podfile linguist-vendored=true
+*.podspec linguist-vendored=true
diff --git a/README.md b/README.md
@@ -56,6 +56,22 @@ Called when page finishes loading.
 |----|--------|
 |function|No|
 
+### `onMessage`
+
+Called when a message is sent from the webview.
+
+#### iOS
+
+Use `webkit.messageHandlers.jsMessageHandler.postMessage(message)` to send your message. Supported types are object, string, number, and boolean. You will receive `message` as a property of `nativeEvent`.
+
+#### Android
+
+Use `JSBridge.postString(string)` to send a string. Use `JSBridge.postNumber(number)` to send a number. Use `JSBridge.postBoolean(boolean)` to send a boolean. Use `JSBridge.postNull()` to send `null`. You will receive your message as a property of `nativeEvent`.
+
+|Type|Required|
+|----|--------|
+|function|No|
+
 ### `keyboardDisplayRequiresUserAction`
 
 When set `false` allows [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus), and [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) to display the keyboard.
@@ -77,11 +93,15 @@ When set to `true` this will hide the default keyboard accessory view.
 ### `focus()`
 
 #### Android
-Calls [`requestFocus`](https://developer.android.com/reference/android/webkit/WebView#requestFocus(int,%20android.graphics.Rect)).
+Calls [`requestFocus`](https://developer.android.com/reference/android/webkit/WebView#requestFocus(int,%20android.graphics.Rect)) and shows the keyboard.
 
 #### iOS
 Calls [`HTMLElement.blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur) and [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) on [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement). It won't work if [`keyboardDisplayRequiresUserAction`](#keyboardDisplayRequiresUserAction) is `true` or if `document.activeElement` is not [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement). It is recommended to just focus your field from JavaScript instead of calling this method, calling blur beforehand may be required.
 
+### `injectJavaScript(string)`
+
+Executes the JavaScript string.
+
 ## Requirements
 
 - React Native 0.60 or later
diff --git a/android/src/main/java/com/reactnativewebviewalternative/WebViewAlternativeManager.kt b/android/src/main/java/com/reactnativewebviewalternative/WebViewAlternativeManager.kt
@@ -1,29 +1,26 @@
 package com.reactnativewebviewalternative
 
 import android.annotation.SuppressLint
-import android.content.Context
-import android.util.Log
+import android.os.Build
 import android.view.MotionEvent
 import android.view.inputmethod.InputMethodManager
+import android.webkit.JavascriptInterface
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.core.content.ContextCompat.getSystemService
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.*
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
 
-class WebViewAlternativeManager(reactContext: ReactApplicationContext): SimpleViewManager<WebView>() {
-    val reactContext = reactContext
-
+class WebViewAlternativeManager(private val reactContext: ReactApplicationContext): SimpleViewManager<WebView>() {
     enum class Command(val commandId: Int) {
         LOAD_HTML_STRING(1),
         FOCUS(2),
+        INJECT_JAVASCRIPT(3),
     }
 
     companion object {
@@ -47,6 +44,44 @@ class WebViewAlternativeManager(reactContext: ReactApplicationContext): SimpleVi
             }
         }
 
+        webView.settings.javaScriptEnabled = true
+        webView.addJavascriptInterface(object : Object() {
+            fun sendMessage(message: WritableMap) {
+                reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(
+                        webView.id,
+                        "message",
+                        message)
+            }
+
+            @JavascriptInterface
+            fun postNull() {
+                val writableMap = Arguments.createMap()
+                writableMap.putNull("message")
+                sendMessage(writableMap)
+            }
+
+            @JavascriptInterface
+            fun postString(message: String) {
+                val writableMap = Arguments.createMap()
+                writableMap.putString("message", message)
+                sendMessage(writableMap)
+            }
+
+            @JavascriptInterface
+            fun postBoolean(message: Boolean) {
+                val writableMap = Arguments.createMap()
+                writableMap.putBoolean("message", message)
+                sendMessage(writableMap)
+            }
+
+            @JavascriptInterface
+            fun postNumber(message: Double) {
+                val writableMap = Arguments.createMap()
+                writableMap.putDouble("message", message)
+                sendMessage(writableMap)
+            }
+        }, "JSBridge")
+
         return webView
     }
 
@@ -77,15 +112,22 @@ class WebViewAlternativeManager(reactContext: ReactApplicationContext): SimpleVi
                     imm != null && imm.showSoftInput(root, InputMethodManager.SHOW_IMPLICIT)
                 }
             }
+            Command.INJECT_JAVASCRIPT.commandId -> {
+                if (args != null) {
+                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+                        root.evaluateJavascript(args.getString(0), null)
+                    }
+                }
+            }
         }
     }
 
     override fun getCommandsMap(): Map<String, Int> {
-        return MapBuilder.of("loadHTMLString", Command.LOAD_HTML_STRING.commandId, "focus", Command.FOCUS.commandId)
+        return MapBuilder.of("loadHTMLString", Command.LOAD_HTML_STRING.commandId, "focus", Command.FOCUS.commandId, "injectJavaScript", Command.INJECT_JAVASCRIPT.commandId)
     }
 
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Map<String, String>> {
-        return MapBuilder.of("load", MapBuilder.of("registrationName", "onLoad"))
+        return MapBuilder.of("load", MapBuilder.of("registrationName", "onLoad"), "message", MapBuilder.of("registrationName", "onMessage"))
     }
 
 //    override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Map<String, Map<String, String>>> {
diff --git a/example/android/app/src/main/java/com/WebviewAlternativeExample/MainApplication.java b/example/android/app/src/main/java/com/WebviewAlternativeExample/MainApplication.java
@@ -2,6 +2,9 @@
 
 import android.app.Application;
 import android.content.Context;
+import android.os.Build;
+import android.webkit.WebView;
+
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
@@ -49,6 +52,9 @@ public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); // Remove this line if you don't want Flipper enabled
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+      WebView.setWebContentsDebuggingEnabled(true);
+    }
   }
 
   /**
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,21 +1,32 @@
-import React, { useRef } from 'react'
-import { StyleSheet, View, Platform } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { StyleSheet, View, Platform, Button, Text } from 'react-native'
 import WebView, { WebViewRef } from 'react-native-webview-alternative'
 
 const demo1: string = require('./demo1.html')
 
 export default function App() {
+	const [message, setMessage] = useState('')
 	const ref = useRef<WebViewRef>(null)
 
 	return (
 		<View style={styles.container}>
+			<Button
+				title="Set input text to 'Hello World'"
+				onPress={() => {
+					ref.current?.injectJavaScript('input.value = "Hello World"')
+				}}
+			/>
+			<Text>{message}</Text>
 			<WebView
 				ref={ref}
 				source={{ html: demo1 }}
 				keyboardDisplayRequiresUserAction={false}
 				style={styles.webView}
 				scrollEnabled={false}
 				hideKeyboardAccessoryView
+				onMessage={({ nativeEvent: { message } }) => (
+					setMessage(String(message)), console.log(message, typeof message)
+				)}
 				onLoad={() => Platform.OS === 'android' && ref.current?.focus()}
 			/>
 		</View>
diff --git a/example/src/demo1.html b/example/src/demo1.html
@@ -17,9 +17,11 @@
     <h6>Helloo</h6>
     <input type="text" id="asd" autofocus />
     <script type="text/javascript">
-      setTimeout(() => {
-        // document.getElementById('asd').focus();
-      }, 1000);
+      window.input = document.getElementById('asd');
+      input.addEventListener('input', () => {
+        console.log(input.value);
+        typeof webkit === "object" ? webkit.messageHandlers.jsMessageHandler.postMessage(input.value) : JSBridge.postString(input.value)
+      })
     </script>
   </body>
 </html>
diff --git a/ios/RCTWebViewAlternative.h b/ios/RCTWebViewAlternative.h
@@ -1,12 +1,13 @@
 #import <WebKit/WebKit.h>
 #import <React/RCTViewManager.h>
 
-@interface RCTWebViewAlternative : WKWebView {
+@interface RCTWebViewAlternative : WKWebView <WKScriptMessageHandler> {
     NSNumber * _Nullable _hideKeyboardAccessoryView;
     NSNumber * _Nullable _keyboardDisplayRequiresUserAction;
 }
 
 @property (nonatomic, copy) RCTDirectEventBlock _Nullable onLoad;
+@property (nonatomic, copy) RCTDirectEventBlock _Nullable onMessage;
 
 - (BOOL)scrollEnabled;
 - (void)setScrollEnabled:(BOOL)enabled;
diff --git a/ios/RCTWebViewAlternative.m b/ios/RCTWebViewAlternative.m
@@ -132,4 +132,15 @@ - (void)setHideKeyboardAccessoryView:(BOOL)hideKeyboardAccessoryView {
     method_setImplementation(method, override);
 }
 
+#pragma mark - WKScriptMessageHandler
+
+- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
+    if (!self.onMessage) return;
+    if (message.body == nil) return;
+
+    self.onMessage(@{
+        @"message": message.body,
+    });
+}
+
 @end
diff --git a/ios/WebviewAlternative.m b/ios/WebviewAlternative.m
@@ -15,6 +15,7 @@ @implementation WebViewAlternativeManager
 - (RCTWebViewAlternative *)view {
     RCTWebViewAlternative *view = [RCTWebViewAlternative new];
     view.navigationDelegate = self;
+    [view.configuration.userContentController addScriptMessageHandler:view name:@"jsMessageHandler"];
     return view;
 }
 
@@ -42,11 +43,24 @@ - (RCTWebViewAlternative *)view {
     }];
 }
 
+RCT_EXPORT_METHOD(injectJavaScript:(nonnull NSNumber *) reactTag string:(nonnull NSString *)string) {
+    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+        UIView *view = viewRegistry[reactTag];
+        if (!view || ![view isKindOfClass:RCTWebViewAlternative.class]) {
+            RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
+            return;
+        }
+
+        [(RCTWebViewAlternative *)view evaluateJavaScript:string completionHandler:nil];
+    }];
+}
+
 RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(keyboardDisplayRequiresUserAction, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL)
 
 RCT_EXPORT_VIEW_PROPERTY(onLoad, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMessage, RCTDirectEventBlock)
 
 #pragma mark - WKNavigationDelegate
 
diff --git a/src/index.tsx b/src/index.tsx
@@ -11,10 +11,12 @@ interface WebViewAlternativeProps extends ViewProps, WebViewAlternativePropsIOS
 	children?: ReactNode
 	scrollEnabled?: boolean
 	onLoad?(): void
+	onMessage?(event: { nativeEvent: { message: object | string | number | boolean } }): void
 }
 
 export interface WebViewAlternativeRef {
 	focus(): void
+	injectJavaScript(string: string): void
 }
 
 export type WebViewRef = WebViewAlternativeRef
@@ -52,6 +54,13 @@ function WebViewAlternative({ source = null, ...props }: WebViewAlternativeProps
 				undefined,
 			)
 		},
+		injectJavaScript(string: string) {
+			UIManager.dispatchViewManagerCommand(
+				findNodeHandle(nativeComponentRef.current),
+				UIManager.getViewManagerConfig('WebViewAlternative').Commands.injectJavaScript,
+				[string],
+			)
+		},
 	}))
 	return <NativeWebViewAlternative {...props} ref={nativeComponentRef} />
 }

Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,12 @@ interface WebViewAlternativeProps extends ViewProps, WebViewAlternativePropsIOS`
`11`	`11`	`children?: ReactNode`
`12`	`12`	`scrollEnabled?: boolean`
`13`	`13`	`onLoad?(): void`
	`14`	`+ onMessage?(event: { nativeEvent: { message: object \| string \| number \| boolean } }): void`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`export interface WebViewAlternativeRef {`
`17`	`18`	`focus(): void`
	`19`	`+ injectJavaScript(string: string): void`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`export type WebViewRef = WebViewAlternativeRef`
`@@ -52,6 +54,13 @@ function WebViewAlternative({ source = null, ...props }: WebViewAlternativeProps`
`52`	`54`	`undefined,`
`53`	`55`	`)`
`54`	`56`	`},`
	`57`	`+ injectJavaScript(string: string) {`
	`58`	`+ UIManager.dispatchViewManagerCommand(`
	`59`	`+ findNodeHandle(nativeComponentRef.current),`
	`60`	`+ UIManager.getViewManagerConfig('WebViewAlternative').Commands.injectJavaScript,`
	`61`	`+ [string],`
	`62`	`+ )`
	`63`	`+ },`
`55`	`64`	`}))`
`56`	`65`	`return <NativeWebViewAlternative {...props} ref={nativeComponentRef} />`
`57`	`66`	`}`