scrollTo()

DimitarNestorov · DimitarNestorov · commit 146b04f8cc4a · 2020-05-22T16:26:45.000+03:00
diff --git a/README.md b/README.md
@@ -92,16 +92,33 @@ When set to `true` this will hide the default keyboard accessory view.
 
 ### `focus()`
 
+```javascript
+focus(string: string)
+```
+
 #### Android
-Calls [`requestFocus`](https://developer.android.com/reference/android/webkit/WebView#requestFocus(int,%20android.graphics.Rect)) and shows the keyboard.
+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`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement) is not focusable. It is recommended to just focus your field from JavaScript instead of calling this method, calling blur beforehand may be required.
 
-### `injectJavaScript(string)`
+### `injectJavaScript()`
+
+```javascript
+injectJavaScript(string: string)
+```
 
 Executes the JavaScript string.
 
+### `scrollTo()`
+
+```javascript
+scrollTo(options?: {x?: number, y?: number, animated?: boolean})
+```
+
+Scrolls to a given x, y offset, either immediately or with a smooth animation.
+
+By default x and y are `0`, animated is `true`.
 ## 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,6 +1,11 @@
 package com.reactnativewebviewalternative
 
+import android.R.attr.x
+import android.R.attr.y
+import android.animation.ObjectAnimator
+import android.animation.PropertyValuesHolder
 import android.annotation.SuppressLint
+import android.content.res.Resources
 import android.os.Build
 import android.view.MotionEvent
 import android.view.inputmethod.InputMethodManager
@@ -21,6 +26,7 @@ class WebViewAlternativeManager(private val reactContext: ReactApplicationContex
         LOAD_HTML_STRING(1),
         FOCUS(2),
         INJECT_JAVASCRIPT(3),
+        SCROLL_TO(4),
     }
 
     companion object {
@@ -119,11 +125,29 @@ class WebViewAlternativeManager(private val reactContext: ReactApplicationContex
                     }
                 }
             }
+            Command.SCROLL_TO.commandId -> {
+                if (args != null) {
+                    val density = Resources.getSystem().displayMetrics.density
+                    val x = (args.getDouble(0) * density).toInt()
+                    val y = (args.getDouble(1) * density).toInt()
+                    if (args.getBoolean(2)) {
+                        val scrollX = PropertyValuesHolder.ofInt("scrollX", root.scrollX, x)
+                        val scrollY = PropertyValuesHolder.ofInt("scrollY", root.scrollY, y)
+                        ObjectAnimator.ofPropertyValuesHolder(root, scrollX, scrollY).start()
+                    } else {
+                        root.scrollTo(x, y)
+                    }
+                }
+            }
         }
     }
 
     override fun getCommandsMap(): Map<String, Int> {
-        return MapBuilder.of("loadHTMLString", Command.LOAD_HTML_STRING.commandId, "focus", Command.FOCUS.commandId, "injectJavaScript", Command.INJECT_JAVASCRIPT.commandId)
+        return MapBuilder.of("loadHTMLString", Command.LOAD_HTML_STRING.commandId,
+                "focus", Command.FOCUS.commandId,
+                "injectJavaScript", Command.INJECT_JAVASCRIPT.commandId,
+                "scrollTo", Command.SCROLL_TO.commandId
+        )
     }
 
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Map<String, String>> {
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { StyleSheet, View, Platform, Button, Text } from 'react-native'
+import { StyleSheet, Platform, Button, Text, SafeAreaView } from 'react-native'
 import WebView, { WebViewRef } from 'react-native-webview-alternative'
 
 const demo1: string = require('./demo1.html')
@@ -9,35 +9,46 @@ export default function App() {
 	const ref = useRef<WebViewRef>(null)
 
 	return (
-		<View style={styles.container}>
+		<SafeAreaView style={styles.container}>
 			<Button
 				title="Set input text to 'Hello World'"
 				onPress={() => {
 					ref.current?.injectJavaScript('input.value = "Hello World"')
 				}}
 			/>
+			<Button
+				title="Scroll to 4th section"
+				onPress={() => {
+					ref.current?.scrollTo({ y: 400, animated: false })
+				}}
+			/>
+			<Button
+				title="Scroll to top"
+				onPress={() => {
+					ref.current?.scrollTo({ animated: false })
+				}}
+			/>
 			<Text>{message}</Text>
 			<WebView
 				ref={ref}
 				source={{ html: demo1 }}
-				keyboardDisplayRequiresUserAction={false}
+				// keyboardDisplayRequiresUserAction={false}
 				style={styles.webView}
-				scrollEnabled={false}
+				// scrollEnabled={false}
 				hideKeyboardAccessoryView
 				onMessage={({ nativeEvent: { message } }) => (
 					setMessage(String(message)), console.log(message, typeof message)
 				)}
 				onLoad={() => Platform.OS === 'android' && ref.current?.focus()}
 			/>
-		</View>
+		</SafeAreaView>
 	)
 }
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		alignItems: 'center',
-		justifyContent: 'center',
 	},
 	webView: {
 		width: '100%',
diff --git a/example/src/demo1.html b/example/src/demo1.html
@@ -11,11 +11,28 @@
       body {
         margin: 0;
       }
+
+      h6 {
+        margin: 0;
+      }
+
+      .tall-div {
+        height: 100px;
+      }
     </style>
   </head>
   <body>
-    <h6>Helloo</h6>
-    <input type="text" id="asd" autofocus />
+    <div class="tall-div">
+      <h6>Helloo</h6>
+      <input type="text" id="asd" autofocus />
+    </div>
+    <div class="tall-div" style="background-color: #10a6c9"></div>
+    <div class="tall-div" style="background-color: #a35dda"></div>
+    <div class="tall-div" style="background-color: #37357c"></div>
+    <div class="tall-div" style="background-color: #118d7d"></div>
+    <div class="tall-div" style="background-color: #5f74dc"></div>
+    <div class="tall-div" style="background-color: #0f9775"></div>
+    <div class="tall-div" style="background-color: #92bec1"></div>
     <script type="text/javascript">
       window.input = document.getElementById('asd');
       input.addEventListener('input', () => {
diff --git a/ios/RCTWebViewAlternative.m b/ios/RCTWebViewAlternative.m
@@ -14,7 +14,10 @@ @implementation RCTWebViewAlternativeContentViewHelper
 - (BOOL)keyboardDisplayRequiresUserAction {
     if (_webView == nil) return YES;
 
-    if ([_webView respondsToSelector:sel_getUid("keyboardDisplayRequiresUserAction")]) {
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+    if ([_webView respondsToSelector:@selector(keyboardDisplayRequiresUserAction)]) {
+#pragma clang diagnostic pop
         return [(RCTWebViewAlternative *)_webView keyboardDisplayRequiresUserAction];
     }
 
@@ -24,7 +27,10 @@ - (BOOL)keyboardDisplayRequiresUserAction {
 - (BOOL)hideKeyboardAccessoryView {
     if (_webView == nil) return YES;
 
-    if ([_webView respondsToSelector:sel_getUid("hideKeyboardAccessoryView")]) {
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+    if ([_webView respondsToSelector:@selector(hideKeyboardAccessoryView)]) {
+#pragma clang diagnostic pop
         return [(RCTWebViewAlternative *)_webView hideKeyboardAccessoryView];
     }
 
@@ -68,34 +74,49 @@ - (void)setKeyboardDisplayRequiresUserAction:(BOOL)keyboardDisplayRequiresUserAc
     Class contentViewClass = objc_lookUpClass("WKContentView");
     IMP override;
 
-    SEL keyboardDisplayRequiresUserActionSelector = sel_getUid("keyboardDisplayRequiresUserAction");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+    SEL keyboardDisplayRequiresUserActionSelector = @selector(keyboardDisplayRequiresUserAction);
+#pragma clang diagnostic pop
     BOOL (* getKeyboardDisplayRequiresUserAction)(id, SEL) = (BOOL (*)(id, SEL))method_getImplementation(class_getInstanceMethod(RCTWebViewAlternativeContentViewHelper.class, keyboardDisplayRequiresUserActionSelector));
     if (@available(iOS 13.0.0, *)) {
-        SEL selector = sel_getUid("_elementDidFocus:userIsInteracting:blurPreviousNode:activityStateChanges:userObject:");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+        SEL selector = @selector(_elementDidFocus:userIsInteracting:blurPreviousNode:activityStateChanges:userObject:);
+#pragma clang diagnostic pop
         method = class_getInstanceMethod(contentViewClass, selector);
         IMP original = method_getImplementation(method);
         override = imp_implementationWithBlock(^void(UIView *this, void *information, BOOL userIsInteracting, BOOL blurPreviousNode, uint activityStateChanges, id userObject) {
             if (!getKeyboardDisplayRequiresUserAction(this, keyboardDisplayRequiresUserActionSelector)) userIsInteracting = YES;
             ((void (*)(id, SEL, void*, BOOL, BOOL, uint, id))original)(this, selector, information, TRUE, blurPreviousNode, activityStateChanges, userObject);
         });
     } else if (@available(iOS 12.2.0, *)) {
-        SEL selector = sel_getUid("_elementDidFocus:userIsInteracting:blurPreviousNode:changingActivityState:userObject:");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+        SEL selector = @selector(_elementDidFocus:userIsInteracting:blurPreviousNode:changingActivityState:userObject:);
+#pragma clang diagnostic pop
         method = class_getInstanceMethod(contentViewClass, selector);
         IMP original = method_getImplementation(method);
         override = imp_implementationWithBlock(^void(UIView *this, void* arg0, BOOL userIsInteracting, BOOL arg2, BOOL arg3, id arg4) {
             if (!getKeyboardDisplayRequiresUserAction(this, keyboardDisplayRequiresUserActionSelector)) userIsInteracting = YES;
             ((void (*)(id, SEL, void*, BOOL, BOOL, BOOL, id))original)(this, selector, arg0, TRUE, arg2, arg3, arg4);
         });
     } else if (@available(iOS 11.3.0, *)) {
-        SEL selector = sel_getUid("_startAssistingNode:userIsInteracting:blurPreviousNode:changingActivityState:userObject:");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+        SEL selector = @selector(_startAssistingNode:userIsInteracting:blurPreviousNode:changingActivityState:userObject:);
+#pragma clang diagnostic pop
         method = class_getInstanceMethod(contentViewClass, selector);
         IMP original = method_getImplementation(method);
         override = imp_implementationWithBlock(^void(UIView *this, void *arg0, BOOL userIsInteracting, BOOL arg2, BOOL arg3, id arg4) {
             if (!getKeyboardDisplayRequiresUserAction(this, keyboardDisplayRequiresUserActionSelector)) userIsInteracting = YES;
             ((void (*)(id, SEL, void *, BOOL, BOOL, BOOL, id))original)(this, selector, arg0, TRUE, arg2, arg3, arg4);
         });
     } else {
-        SEL selector = sel_getUid("_startAssistingNode:userIsInteracting:blurPreviousNode:userObject:");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+        SEL selector = @selector(_startAssistingNode:userIsInteracting:blurPreviousNode:userObject:);
+#pragma clang diagnostic pop
         method = class_getInstanceMethod(contentViewClass, selector);
         IMP original = method_getImplementation(method);
         override = imp_implementationWithBlock(^void(UIView *this, void *arg0, BOOL userIsInteracting, BOOL arg2, id arg3) {
@@ -120,8 +141,11 @@ - (void)setHideKeyboardAccessoryView:(BOOL)hideKeyboardAccessoryView {
     if (method != nil) return; // Already swizzled
 
     Class contentViewClass = objc_lookUpClass("WKContentView");
-    SEL inputAccessoryViewSelector = sel_getUid("inputAccessoryView");
-    SEL hideKeyboardAccessoryViewSelector = sel_getUid("hideKeyboardAccessoryView");
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wundeclared-selector"
+    SEL inputAccessoryViewSelector = @selector(inputAccessoryView);
+    SEL hideKeyboardAccessoryViewSelector = @selector(hideKeyboardAccessoryView);
+#pragma clang diagnostic pop
     BOOL (* getHideKeyboardAccessoryViewSelector)(id, SEL) = (BOOL (*)(id, SEL))method_getImplementation(class_getInstanceMethod(RCTWebViewAlternativeContentViewHelper.class, hideKeyboardAccessoryViewSelector));
     method = class_getInstanceMethod(contentViewClass, inputAccessoryViewSelector);
     IMP original = method_getImplementation(method);
diff --git a/ios/WebViewAlternative.m b/ios/WebViewAlternative.m
@@ -55,6 +55,18 @@ - (RCTWebViewAlternative *)view {
     }];
 }
 
+RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *) reactTag offsetX:(CGFloat)x offsetY:(CGFloat)y animated:(BOOL)animated) {
+    [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).scrollView setContentOffset:(CGPoint){x, y} animated:animated];
+    }];
+}
+
 RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(keyboardDisplayRequiresUserAction, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-webview-alternative",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Alternative to react-native-webview",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
diff --git a/src/index.tsx b/src/index.tsx
@@ -6,16 +6,27 @@ interface WebViewAlternativePropsIOS {
 	hideKeyboardAccessoryView?: boolean
 }
 
+export interface WebViewMessageEvent {
+	nativeEvent: { message: object | string | number | boolean }
+}
+
 interface WebViewAlternativeProps extends ViewProps, WebViewAlternativePropsIOS {
 	source?: { html: string; baseURL?: string } | null
 	children?: ReactNode
 	scrollEnabled?: boolean
 	onLoad?(): void
-	onMessage?(event: { nativeEvent: { message: object | string | number | boolean } }): void
+	onMessage?(event: WebViewMessageEvent): void
+}
+
+export interface ScrollToOptions {
+	x?: number
+	y?: number
+	animated?: boolean
 }
 
 export interface WebViewAlternativeRef {
 	focus(): void
+	scrollTo(options?: ScrollToOptions): void
 	injectJavaScript(string: string): void
 }
 
@@ -54,6 +65,13 @@ function WebViewAlternative({ source = null, ...props }: WebViewAlternativeProps
 				undefined,
 			)
 		},
+		scrollTo({ x = 0, y = 0, animated = true }: ScrollToOptions = {}) {
+			UIManager.dispatchViewManagerCommand(
+				findNodeHandle(nativeComponentRef.current),
+				UIManager.getViewManagerConfig('WebViewAlternative').Commands.scrollTo,
+				[x, y, animated],
+			)
+		},
 		injectJavaScript(string: string) {
 			UIManager.dispatchViewManagerCommand(
 				findNodeHandle(nativeComponentRef.current),

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-webview-alternative",`
`3`		`- "version": "0.0.1",`
	`3`	`+ "version": "0.0.2",`
`4`	`4`	`"description": "Alternative to react-native-webview",`
`5`	`5`	`"main": "lib/commonjs/index.js",`
`6`	`6`	`"module": "lib/module/index.js",`