Migrate scrollResponderScrollNativeHandleToKeyboard function to take …

…nativeRef Summary: We need to get rid of findNodeHandle calls so migrating scrollResponderScrollNativeHandleToKeyboard to take a ref to a host component. I made this change with Flow, and tested by rendering UserJobApplicationForm Reviewed By: mdvacca Differential Revision: D17099280 fbshipit-source-id: 96af692006aace2c206f268f5416984b00f8a438
facebook · Oct 28, 2019 · 09c4e7c · 09c4e7c
1 parent 54bf3ae
commit 09c4e7c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/Libraries/Components/ScrollResponder.js b/Libraries/Components/ScrollResponder.js
@@ -10,6 +10,7 @@
 
 'use strict';
 
+const React = require('react');
 const Dimensions = require('../Utilities/Dimensions');
 const FrameRateLogger = require('../Interaction/FrameRateLogger');
 const Keyboard = require('./Keyboard/Keyboard');
@@ -551,19 +552,30 @@ const ScrollResponderMixin = {
    * @param {bool} preventNegativeScrolling Whether to allow pulling the content
    *        down to make it meet the keyboard's top. Default is false.
    */
-  scrollResponderScrollNativeHandleToKeyboard: function(
-    nodeHandle: number,
+  scrollResponderScrollNativeHandleToKeyboard: function<T>(
+    nodeHandle:
+      | number
+      | React.ElementRef<Class<ReactNative.NativeComponent<T>>>,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
   ) {
     this.additionalScrollOffset = additionalOffset || 0;
     this.preventNegativeScrollOffset = !!preventNegativeScrollOffset;
-    UIManager.measureLayout(
-      nodeHandle,
-      ReactNative.findNodeHandle(this.getInnerViewNode()),
-      this.scrollResponderTextInputFocusError,
-      this.scrollResponderInputMeasureAndScrollToKeyboard,
-    );
+
+    if (typeof nodeHandle === 'number') {
+      UIManager.measureLayout(
+        nodeHandle,
+        ReactNative.findNodeHandle(this.getInnerViewNode()),
+        this.scrollResponderTextInputFocusError,
+        this.scrollResponderInputMeasureAndScrollToKeyboard,
+      );
+    } else {
+      nodeHandle.measureLayout(
+        this.getInnerViewRef(),
+        this.scrollResponderInputMeasureAndScrollToKeyboard,
+        this.scrollResponderTextInputFocusError,
+      );
+    }
   },
 
   /**

diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
@@ -69,6 +69,7 @@ export type ScrollResponderType = {
   // issue by specifying them manually.
   getScrollableNode: $PropertyType<ScrollView, 'getScrollableNode'>,
   getInnerViewNode: $PropertyType<ScrollView, 'getInnerViewNode'>,
+  getInnerViewRef: $PropertyType<ScrollView, 'getInnerViewRef'>,
   getNativeScrollRef: $PropertyType<ScrollView, 'getNativeScrollRef'>,
 
   setNativeProps: $PropertyType<ScrollView, 'setNativeProps'>,
@@ -771,7 +772,15 @@ class ScrollView extends React.Component<Props, State> {
     return ReactNative.findNodeHandle(this._innerViewRef);
   }
 
-  getNativeScrollRef(): ?ScrollView {
+  getInnerViewRef(): ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > {
+    return this._innerViewRef;
+  }
+
+  getNativeScrollRef(): ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > {
     return this._scrollViewRef;
   }
 
@@ -944,13 +953,21 @@ class ScrollView extends React.Component<Props, State> {
       this.props.onContentSizeChange(width, height);
   };
 
-  _scrollViewRef: ?ScrollView = null;
-  _setScrollViewRef = (ref: ?ScrollView) => {
+  _scrollViewRef: ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > = null;
+  _setScrollViewRef = (
+    ref: ?React.ElementRef<Class<ReactNative.NativeComponent<mixed>>>,
+  ) => {
     this._scrollViewRef = ref;
   };
 
-  _innerViewRef: ?NativeMethodsMixinType = null;
-  _setInnerViewRef = (ref: ?NativeMethodsMixinType) => {
+  _innerViewRef: ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > = null;
+  _setInnerViewRef = (
+    ref: ?React.ElementRef<Class<ReactNative.NativeComponent<mixed>>>,
+  ) => {
     this._innerViewRef = ref;
   };
 

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -904,6 +904,12 @@ const TextInput = createReactClass({
     this._inputRef = ref;
   },
 
+  getNativeRef: function(): ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > {
+    return this._inputRef;
+  },
+
   _renderIOSLegacy: function() {
     let textContainer;
 
@@ -1227,6 +1233,10 @@ const TextInput = createReactClass({
 class InternalTextInputType extends ReactNative.NativeComponent<Props> {
   clear() {}
 
+  getNativeRef(): ?React.ElementRef<
+    Class<ReactNative.NativeComponent<mixed>>,
+  > {}
+
   // $FlowFixMe
   isFocused(): boolean {}
 }