[React Native] Inline calls to FabricUIManager in shared code (#15490)

elicwhite · web-flow · commit 12e5a13cf2ea · 2019-04-29T14:31:16.000-07:00
* [React Native] Inline calls to FabricUIManager in shared code

* Call global.nativeFabricUIManager directly as short term fix

* Add flow types

* Add nativeFabricUIManager global to eslint config

* Adding eslint global to bundle validation script
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -125,6 +125,12 @@ module.exports = {
         // https://github.com/jest-community/eslint-plugin-jest
         'jest/no-focused-tests': ERROR,
       }
+    },
+    {
+      files: ['packages/react-native-renderer/**/*.js'],
+      globals: {
+        nativeFabricUIManager: true,
+      }
     }
   ],
 
diff --git a/packages/react-native-renderer/src/NativeMethodsMixin.js b/packages/react-native-renderer/src/NativeMethodsMixin.js
@@ -18,7 +18,6 @@ import type {
 import invariant from 'shared/invariant';
 // Modules provided by RN:
 import TextInputState from 'TextInputState';
-import * as FabricUIManager from 'FabricUIManager';
 import UIManager from 'UIManager';
 
 import {create} from './ReactNativeAttributePayload';
@@ -86,7 +85,10 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        FabricUIManager.measure(
+        // We can't call FabricUIManager here because it won't be loaded in paper
+        // at initialization time. See https://github.com/facebook/react/pull/15490
+        // for more info.
+        nativeFabricUIManager.measure(
           maybeInstance.node,
           mountSafeCallback_NOT_REALLY_SAFE(this, callback),
         );
@@ -131,7 +133,10 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        FabricUIManager.measureInWindow(
+        // We can't call FabricUIManager here because it won't be loaded in paper
+        // at initialization time. See https://github.com/facebook/react/pull/15490
+        // for more info.
+        nativeFabricUIManager.measureInWindow(
           maybeInstance.node,
           mountSafeCallback_NOT_REALLY_SAFE(this, callback),
         );
diff --git a/packages/react-native-renderer/src/ReactNativeComponent.js b/packages/react-native-renderer/src/ReactNativeComponent.js
@@ -19,7 +19,6 @@ import type {
 import React from 'react';
 // Modules provided by RN:
 import TextInputState from 'TextInputState';
-import * as FabricUIManager from 'FabricUIManager';
 import UIManager from 'UIManager';
 
 import {create} from './ReactNativeAttributePayload';
@@ -101,7 +100,10 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        FabricUIManager.measure(
+        // We can't call FabricUIManager here because it won't be loaded in paper
+        // at initialization time. See https://github.com/facebook/react/pull/15490
+        // for more info.
+        nativeFabricUIManager.measure(
           maybeInstance.node,
           mountSafeCallback_NOT_REALLY_SAFE(this, callback),
         );
@@ -144,7 +146,10 @@ export default function(
       }
 
       if (maybeInstance.canonical) {
-        FabricUIManager.measureInWindow(
+        // We can't call FabricUIManager here because it won't be loaded in paper
+        // at initialization time. See https://github.com/facebook/react/pull/15490
+        // for more info.
+        nativeFabricUIManager.measureInWindow(
           maybeInstance.node,
           mountSafeCallback_NOT_REALLY_SAFE(this, callback),
         );
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -48,6 +48,11 @@ describe('ReactFabric', () => {
     NativeMethodsMixin =
       ReactFabric.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .NativeMethodsMixin;
+
+    global.nativeFabricUIManager = {
+      measure: FabricUIManager.measure,
+      measureInWindow: FabricUIManager.measureInWindow,
+    };
   });
 
   it('should be able to create and render a native component', () => {
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
@@ -144,6 +144,13 @@ declare module 'FabricUIManager' {
   ): void;
 }
 
+// This is needed for a short term solution.
+// See https://github.com/facebook/react/pull/15490 for more info
+declare var nativeFabricUIManager: {
+  measure(node: Node, callback: MeasureOnSuccessCallback): void,
+  measureInWindow(node: Node, callback: MeasureInWindowOnSuccessCallback): void,
+};
+
 declare module 'View' {
   declare module.exports: typeof React$Component;
 }
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
@@ -18,6 +18,9 @@ module.exports = {
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
     // FB
     __DEV__: true,
+    // Fabric. See https://github.com/facebook/react/pull/15490
+    // for more information
+    nativeFabricUIManager: true,
   },
   parserOptions: {
     ecmaVersion: 5,
