Browse Source

feat: implement getScrollableNode to support Animated.

Jamie Birch 4 years ago
parent
commit
9ff8b80e85
3 changed files with 44 additions and 3 deletions
  1. 13
    0
      src/WebView.android.tsx
  2. 13
    0
      src/WebView.ios.tsx
  3. 18
    3
      src/WebViewTypes.ts

+ 13
- 0
src/WebView.android.tsx View File

70
 
70
 
71
   webViewRef = React.createRef<NativeWebViewAndroid>();
71
   webViewRef = React.createRef<NativeWebViewAndroid>();
72
 
72
 
73
+  /** 
74
+   * Required to allow createAnimatedComponent() to hook up to the underlying NativeWebView rather than its wrapping View.
75
+   * @see: Discussion: https://twitter.com/LinguaBrowse/status/1211375582073761799?s=20
76
+   * @see: Implementation: https://github.com/facebook/react-native/blob/8ddf231306e3bd85be718940d04f11d23b570a62/Libraries/Lists/VirtualizedList.js#L515-L521
77
+   */
78
+  getScrollableNode = () => {
79
+    if (this.webViewRef.current && this.webViewRef.current.getScrollableNode) {
80
+      return this.webViewRef.current.getScrollableNode();
81
+    } else {
82
+      return findNodeHandle(this.webViewRef.current);
83
+    }
84
+  };
85
+
73
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
86
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
74
 
87
 
75
   goForward = () => {
88
   goForward = () => {

+ 13
- 0
src/WebView.ios.tsx View File

74
 
74
 
75
   webViewRef = React.createRef<NativeWebViewIOS>();
75
   webViewRef = React.createRef<NativeWebViewIOS>();
76
 
76
 
77
+  /** 
78
+   * Required to allow createAnimatedComponent() to hook up to the underlying NativeWebView rather than its wrapping View.
79
+   * @see: Discussion: https://twitter.com/LinguaBrowse/status/1211375582073761799?s=20
80
+   * @see: Implementation: https://github.com/facebook/react-native/blob/8ddf231306e3bd85be718940d04f11d23b570a62/Libraries/Lists/VirtualizedList.js#L515-L521
81
+   */
82
+  getScrollableNode = () => {
83
+    if (this.webViewRef.current && this.webViewRef.current.getScrollableNode) {
84
+      return this.webViewRef.current.getScrollableNode();
85
+    } else {
86
+      return findNodeHandle(this.webViewRef.current);
87
+    }
88
+  };
89
+
77
   // eslint-disable-next-line react/sort-comp
90
   // eslint-disable-next-line react/sort-comp
78
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
91
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
79
 
92
 

+ 18
- 3
src/WebViewTypes.ts View File

52
 // eslint-disable-next-line react/prefer-stateless-function
52
 // eslint-disable-next-line react/prefer-stateless-function
53
 declare class NativeWebViewIOSComponent extends Component<
53
 declare class NativeWebViewIOSComponent extends Component<
54
   IOSNativeWebViewProps
54
   IOSNativeWebViewProps
55
-> {}
55
+> {
56
+  /** 
57
+   * Required to allow createAnimatedComponent() to hook up to the underlying NativeWebView rather than its wrapping View.
58
+   * @see: Discussion: https://twitter.com/LinguaBrowse/status/1211375582073761799?s=20
59
+   * @see: Implementation: https://github.com/facebook/react-native/blob/8ddf231306e3bd85be718940d04f11d23b570a62/Libraries/Lists/VirtualizedList.js#L515-L521
60
+   */
61
+  getScrollableNode(): number | null;
62
+}
56
 declare const NativeWebViewIOSBase: Constructor<NativeMethodsMixin> &
63
 declare const NativeWebViewIOSBase: Constructor<NativeMethodsMixin> &
57
   typeof NativeWebViewIOSComponent;
64
   typeof NativeWebViewIOSComponent;
58
-export class NativeWebViewIOS extends NativeWebViewIOSBase {}
65
+export class NativeWebViewIOS extends NativeWebViewIOSBase {
66
+}
59
 
67
 
60
 // eslint-disable-next-line react/prefer-stateless-function
68
 // eslint-disable-next-line react/prefer-stateless-function
61
 declare class NativeWebViewAndroidComponent extends Component<
69
 declare class NativeWebViewAndroidComponent extends Component<
62
   AndroidNativeWebViewProps
70
   AndroidNativeWebViewProps
63
-> {}
71
+> {
72
+  /** 
73
+   * Required to allow createAnimatedComponent() to hook up to the underlying NativeWebView rather than its wrapping View.
74
+   * @see: Discussion: https://twitter.com/LinguaBrowse/status/1211375582073761799?s=20
75
+   * @see: Implementation: https://github.com/facebook/react-native/blob/8ddf231306e3bd85be718940d04f11d23b570a62/Libraries/Lists/VirtualizedList.js#L515-L521
76
+   */
77
+  getScrollableNode(): number | null;
78
+}
64
 declare const NativeWebViewAndroidBase: Constructor<NativeMethodsMixin> &
79
 declare const NativeWebViewAndroidBase: Constructor<NativeMethodsMixin> &
65
   typeof NativeWebViewAndroidComponent;
80
   typeof NativeWebViewAndroidComponent;
66
 export class NativeWebViewAndroid extends NativeWebViewAndroidBase {}
81
 export class NativeWebViewAndroid extends NativeWebViewAndroidBase {}