From 12e5a13cf2ea48ad7f527e68caf5faf8bf724c97 Mon Sep 17 00:00:00 2001 From: Eli White Date: Mon, 29 Apr 2019 14:31:16 -0700 Subject: [PATCH] [React Native] Inline calls to FabricUIManager in shared code (#15490) * [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 --- .eslintrc.js | 6 ++++++ .../react-native-renderer/src/NativeMethodsMixin.js | 11 ++++++++--- .../react-native-renderer/src/ReactNativeComponent.js | 11 ++++++++--- .../src/__tests__/ReactFabric-test.internal.js | 5 +++++ scripts/flow/react-native-host-hooks.js | 7 +++++++ scripts/rollup/validate/eslintrc.rn.js | 3 +++ 6 files changed, 37 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 51c9395f73c52..1c48ea5330a3d 100644 --- 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 index 97d659aa2b251..954003b1b6f8e 100644 --- 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 index df19c665403ef..4986c3cce5eee 100644 --- 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 index 59cf0f8bf496e..e95402967a9fa 100644 --- 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 index 414775f48f4c5..2753d1e2fdbe6 100644 --- 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 index 66c244d0fe593..8fb7666aa13de 100644 --- 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,