From afea7107e1ec3339550d1fce342713c07c221ede Mon Sep 17 00:00:00 2001 From: Eli White Date: Wed, 25 Sep 2019 15:16:56 -0700 Subject: [PATCH 1/3] Add HostComponent type to ReactNative --- .../src/NativeMethodsMixin.js | 2 +- .../src/ReactFabricHostConfig.js | 8 ++++---- .../src/ReactNativeComponent.js | 6 +++--- .../src/ReactNativeFiberHostComponent.js | 14 +++++++++----- .../src/ReactNativeTypes.js | 19 +++++++++++++++---- 5 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/react-native-renderer/src/NativeMethodsMixin.js b/packages/react-native-renderer/src/NativeMethodsMixin.js index a42bf0a0342c..04f425fa839a 100644 --- a/packages/react-native-renderer/src/NativeMethodsMixin.js +++ b/packages/react-native-renderer/src/NativeMethodsMixin.js @@ -161,7 +161,7 @@ export default function( measureLayout: function( relativeToNativeNode: number | Object, onSuccess: MeasureLayoutOnSuccessCallback, - onFail: () => void /* currently unused */, + onFail?: () => void /* currently unused */, ) { let maybeInstance; diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 977abafa9b49..4a66a4a21612 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -11,7 +11,7 @@ import type { MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, - NativeMethodsMixinType, + NativeMethods, ReactNativeBaseComponentViewConfig, ReactNativeResponderEvent, ReactNativeResponderContext, @@ -151,9 +151,9 @@ class ReactFabricHostComponent { } measureLayout( - relativeToNativeNode: number | Object, + relativeToNativeNode: number | ReactFabricHostComponent, onSuccess: MeasureLayoutOnSuccessCallback, - onFail: () => void /* currently unused */, + onFail?: () => void /* currently unused */, ) { if ( typeof relativeToNativeNode === 'number' || @@ -186,7 +186,7 @@ class ReactFabricHostComponent { } // eslint-disable-next-line no-unused-expressions -(ReactFabricHostComponent.prototype: NativeMethodsMixinType); +(ReactFabricHostComponent.prototype: NativeMethods); export * from 'shared/HostConfigWithNoMutation'; export * from 'shared/HostConfigWithNoHydration'; diff --git a/packages/react-native-renderer/src/ReactNativeComponent.js b/packages/react-native-renderer/src/ReactNativeComponent.js index b6c3dfb59dee..8ac04ffea193 100644 --- a/packages/react-native-renderer/src/ReactNativeComponent.js +++ b/packages/react-native-renderer/src/ReactNativeComponent.js @@ -12,7 +12,7 @@ import type { MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, - NativeMethodsMixinType, + NativeMethods, ReactNativeBaseComponentViewConfig, } from './ReactNativeTypes'; @@ -172,7 +172,7 @@ export default function( measureLayout( relativeToNativeNode: number | Object, onSuccess: MeasureLayoutOnSuccessCallback, - onFail: () => void /* currently unused */, + onFail?: () => void /* currently unused */, ): void { let maybeInstance; @@ -295,7 +295,7 @@ export default function( } // eslint-disable-next-line no-unused-expressions - (ReactNativeComponent.prototype: NativeMethodsMixinType); + (ReactNativeComponent.prototype: NativeMethods); return ReactNativeComponent; } diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js index 02d47c84c030..3b3b901f95af 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js +++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js @@ -11,7 +11,7 @@ import type { MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, - NativeMethodsMixinType, + NativeMethods, ReactNativeBaseComponentViewConfig, } from './ReactNativeTypes'; import type {Instance} from './ReactNativeHostConfig'; @@ -72,11 +72,11 @@ class ReactNativeFiberHostComponent { } measureLayout( - relativeToNativeNode: number | Object, + relativeToNativeNode: number | ReactNativeFiberHostComponent, onSuccess: MeasureLayoutOnSuccessCallback, - onFail: () => void /* currently unused */, + onFail?: () => void /* currently unused */, ) { - let relativeNode; + let relativeNode: ?number; if (typeof relativeToNativeNode === 'number') { // Already a node handle @@ -84,9 +84,13 @@ class ReactNativeFiberHostComponent { } else if (relativeToNativeNode._nativeTag) { relativeNode = relativeToNativeNode._nativeTag; } else if ( + /* $FlowFixMe canonical doesn't exist on the node. + I think this branch is dead and will remove it in a followup */ relativeToNativeNode.canonical && relativeToNativeNode.canonical._nativeTag ) { + /* $FlowFixMe canonical doesn't exist on the node. + I think this branch is dead and will remove it in a followup */ relativeNode = relativeToNativeNode.canonical._nativeTag; } @@ -137,6 +141,6 @@ class ReactNativeFiberHostComponent { } // eslint-disable-next-line no-unused-expressions -(ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType); +(ReactNativeFiberHostComponent.prototype: NativeMethods); export default ReactNativeFiberHostComponent; diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index 85a57f5f1018..b642fd7bc555 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -8,7 +8,7 @@ * @flow */ -import React from 'react'; +import * as React from 'react'; export type MeasureOnSuccessCallback = ( x: number, @@ -96,23 +96,34 @@ class ReactNativeComponent extends React.Component { setNativeProps(nativeProps: Object): void {} } +// This type is only used for FlowTests. It shouldn't be imported directly +export type _InternalReactNativeComponentClass = Class< + ReactNativeComponent, +>; + /** * This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync. * It can also provide types for ReactNative applications that use NMM or refs. */ -export type NativeMethodsMixinType = { +export type NativeMethods = { blur(): void, focus(): void, measure(callback: MeasureOnSuccessCallback): void, measureInWindow(callback: MeasureInWindowOnSuccessCallback): void, measureLayout( - relativeToNativeNode: number | Object, + relativeToNativeNode: number | React.ElementRef>, onSuccess: MeasureLayoutOnSuccessCallback, - onFail: () => void, + onFail?: () => void, ): void, setNativeProps(nativeProps: Object): void, }; +export type NativeMethodsMixinType = NativeMethods; +export type HostComponent = React.AbstractComponent< + T, + $ReadOnly<$Exact>, +>; + type SecretInternalsType = { NativeMethodsMixin: NativeMethodsMixinType, computeComponentStackForErrorReporting(tag: number): string, From e99175b672261d05976900d5615c2da63b50e234 Mon Sep 17 00:00:00 2001 From: Eli White Date: Wed, 25 Sep 2019 15:33:17 -0700 Subject: [PATCH 2/3] Use type alias imports instead of wildcard --- packages/react-native-renderer/src/ReactNativeTypes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index b642fd7bc555..895b08c2602a 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -8,7 +8,7 @@ * @flow */ -import * as React from 'react'; +import React, {type ElementRef, type AbstractComponent} from 'react'; export type MeasureOnSuccessCallback = ( x: number, @@ -111,7 +111,7 @@ export type NativeMethods = { measure(callback: MeasureOnSuccessCallback): void, measureInWindow(callback: MeasureInWindowOnSuccessCallback): void, measureLayout( - relativeToNativeNode: number | React.ElementRef>, + relativeToNativeNode: number | ElementRef>, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void, ): void, @@ -119,7 +119,7 @@ export type NativeMethods = { }; export type NativeMethodsMixinType = NativeMethods; -export type HostComponent = React.AbstractComponent< +export type HostComponent = AbstractComponent< T, $ReadOnly<$Exact>, >; From db60405a81e034e3abc0736956b6eb00123f200b Mon Sep 17 00:00:00 2001 From: Eli White Date: Wed, 25 Sep 2019 18:03:19 -0700 Subject: [PATCH 3/3] Fix forgotten Object in measureLayout type --- packages/react-native-renderer/src/ReactNativeTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index 895b08c2602a..1a7b69deb8ec 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -89,7 +89,7 @@ class ReactNativeComponent extends React.Component { measure(callback: MeasureOnSuccessCallback): void {} measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {} measureLayout( - relativeToNativeNode: number | Object, + relativeToNativeNode: number | ElementRef>, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void, ): void {}