From 71e9039e9ff196598992b73d6fe0ee0e27566a18 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Mon, 21 Oct 2024 18:15:34 -0700 Subject: [PATCH] Prepare typing changes for HostComponent (#47150) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/47150 In https://github.com/facebook/react/pull/31314, I will change the host component type that will be synced to react-native. Notably, it will expose the issue where all the `HostComponent` types are wrong, since it doesn't make sense to write `React.AbstractComponent`. This diff fixes the existing usages first in prep for that typing change. Changelog: [Internal] Reviewed By: alexmckenley Differential Revision: D64722939 fbshipit-source-id: 14e1477090128205d8be8fc7b135a8478f94b790 --- .../ActivityIndicator/ActivityIndicator.js | 2 +- .../__mocks__/RefreshControlMock.js | 5 ++-- .../ScrollView/ScrollViewCommands.js | 2 +- .../RCTMultilineTextInputNativeComponent.js | 8 +++--- .../RCTSingelineTextInputNativeComponent.js | 10 ++++--- .../NativeComponentRegistry.js | 4 +-- .../ReactNative/RendererImplementation.js | 4 +-- .../ReactNative/requireNativeComponent.js | 4 ++- .../Utilities/codegenNativeComponent.js | 2 +- .../ReactNativeTypes-flowtest.js | 2 +- .../__snapshots__/public-api-test.js.snap | 26 +++++++++---------- packages/react-native/index.js | 2 +- 12 files changed, 38 insertions(+), 33 deletions(-) diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js index 8cdceda9e9a8af..2855cf47ffd6ae 100644 --- a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js @@ -154,7 +154,7 @@ const ActivityIndicator = ( */ const ActivityIndicatorWithRef: component( - ref: React.RefSetter>, + ref: React.RefSetter>, ...props: Props ) = React.forwardRef(ActivityIndicator); ActivityIndicatorWithRef.displayName = 'ActivityIndicator'; diff --git a/packages/react-native/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js b/packages/react-native/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js index d69f981ea47108..f806848bbc7f7f 100644 --- a/packages/react-native/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js +++ b/packages/react-native/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js @@ -14,8 +14,9 @@ import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes'; import requireNativeComponent from '../../../ReactNative/requireNativeComponent'; import * as React from 'react'; -const RCTRefreshControl: HostComponent = - requireNativeComponent('RCTRefreshControl'); +const RCTRefreshControl: HostComponent<{}> = requireNativeComponent<{}>( + 'RCTRefreshControl', +); class RefreshControlMock extends React.Component<{...}> { static latestRef: ?RefreshControlMock; diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewCommands.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewCommands.js index 6ff89b42017f40..2e5385d25abe6c 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewCommands.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollViewCommands.js @@ -14,7 +14,7 @@ import type {Double} from '../../Types/CodegenTypes'; import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; import * as React from 'react'; -type ScrollViewNativeComponentType = HostComponent; +type ScrollViewNativeComponentType = HostComponent<{...}>; interface NativeCommands { +flashScrollIndicators: ( viewRef: React.ElementRef, diff --git a/packages/react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js b/packages/react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js index ccccc928a05c19..595006b1c40287 100644 --- a/packages/react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js +++ b/packages/react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js @@ -18,7 +18,7 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; import RCTTextInputViewConfig from './RCTTextInputViewConfig'; -type NativeType = HostComponent; +type NativeType = HostComponent<{...}>; type NativeCommands = TextInputNativeCommands; @@ -35,11 +35,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = { }, }; -const MultilineTextInputNativeComponent: HostComponent = - NativeComponentRegistry.get( +const MultilineTextInputNativeComponent: HostComponent<{...}> = + NativeComponentRegistry.get<{...}>( 'RCTMultilineTextInputView', () => __INTERNAL_VIEW_CONFIG, ); // flowlint-next-line unclear-type:off -export default ((MultilineTextInputNativeComponent: any): HostComponent); +export default ((MultilineTextInputNativeComponent: any): HostComponent<{...}>); diff --git a/packages/react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js b/packages/react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js index 8ec1f49441c4b5..306b30bde4d3f2 100644 --- a/packages/react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js +++ b/packages/react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js @@ -18,7 +18,7 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; import RCTTextInputViewConfig from './RCTTextInputViewConfig'; -type NativeType = HostComponent; +type NativeType = HostComponent<{...}>; type NativeCommands = TextInputNativeCommands; @@ -31,11 +31,13 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = { ...RCTTextInputViewConfig, }; -const SinglelineTextInputNativeComponent: HostComponent = - NativeComponentRegistry.get( +const SinglelineTextInputNativeComponent: HostComponent<{...}> = + NativeComponentRegistry.get<{...}>( 'RCTSinglelineTextInputView', () => __INTERNAL_VIEW_CONFIG, ); // flowlint-next-line unclear-type:off -export default ((SinglelineTextInputNativeComponent: any): HostComponent); +export default ((SinglelineTextInputNativeComponent: any): HostComponent<{ + ... +}>); diff --git a/packages/react-native/Libraries/NativeComponent/NativeComponentRegistry.js b/packages/react-native/Libraries/NativeComponent/NativeComponentRegistry.js index fcb263653e3f53..a8842884bf6807 100644 --- a/packages/react-native/Libraries/NativeComponent/NativeComponentRegistry.js +++ b/packages/react-native/Libraries/NativeComponent/NativeComponentRegistry.js @@ -48,7 +48,7 @@ export function setRuntimeConfigProvider( * The supplied `viewConfigProvider` may or may not be invoked and utilized, * depending on how `setRuntimeConfigProvider` is configured. */ -export function get( +export function get( name: string, viewConfigProvider: () => PartialViewConfig, ): HostComponent { @@ -121,7 +121,7 @@ export function get( * that the return value of this is not `HostComponent` because the returned * component instance is not guaranteed to have native methods. */ -export function getWithFallback_DEPRECATED( +export function getWithFallback_DEPRECATED( name: string, viewConfigProvider: () => PartialViewConfig, ): React.ComponentType { diff --git a/packages/react-native/Libraries/ReactNative/RendererImplementation.js b/packages/react-native/Libraries/ReactNative/RendererImplementation.js index 0938d89db4c7c0..1ca9a011515d4c 100644 --- a/packages/react-native/Libraries/ReactNative/RendererImplementation.js +++ b/packages/react-native/Libraries/ReactNative/RendererImplementation.js @@ -136,8 +136,8 @@ export function isProfilingRenderer(): boolean { } export function isChildPublicInstance( - parentInstance: ReactFabricHostComponent | HostComponent, - childInstance: ReactFabricHostComponent | HostComponent, + parentInstance: ReactFabricHostComponent | HostComponent, + childInstance: ReactFabricHostComponent | HostComponent, ): boolean { return require('../Renderer/shims/ReactNative').isChildPublicInstance( parentInstance, diff --git a/packages/react-native/Libraries/ReactNative/requireNativeComponent.js b/packages/react-native/Libraries/ReactNative/requireNativeComponent.js index e9be731df0a181..42592b75d5953e 100644 --- a/packages/react-native/Libraries/ReactNative/requireNativeComponent.js +++ b/packages/react-native/Libraries/ReactNative/requireNativeComponent.js @@ -24,7 +24,9 @@ const getNativeComponentAttributes = require('./getNativeComponentAttributes'); * */ -const requireNativeComponent = (uiViewClassName: string): HostComponent => +const requireNativeComponent = ( + uiViewClassName: string, +): HostComponent => ((createReactNativeComponentClass(uiViewClassName, () => getNativeComponentAttributes(uiViewClassName), ): any): HostComponent); diff --git a/packages/react-native/Libraries/Utilities/codegenNativeComponent.js b/packages/react-native/Libraries/Utilities/codegenNativeComponent.js index 3f9187f8fe173a..cd2d9ee5998fa2 100644 --- a/packages/react-native/Libraries/Utilities/codegenNativeComponent.js +++ b/packages/react-native/Libraries/Utilities/codegenNativeComponent.js @@ -31,7 +31,7 @@ export type NativeComponentType = HostComponent; // `requireNativeComponent` is not available in Bridgeless mode. // e.g. This function runs at runtime if `codegenNativeComponent` was not called // from a file suffixed with NativeComponent.js. -function codegenNativeComponent( +function codegenNativeComponent( componentName: string, options?: Options, ): NativeComponentType { diff --git a/packages/react-native/Libraries/__flowtests__/ReactNativeTypes-flowtest.js b/packages/react-native/Libraries/__flowtests__/ReactNativeTypes-flowtest.js index a6fdb2d1cd8ea0..18b72069229db7 100644 --- a/packages/react-native/Libraries/__flowtests__/ReactNativeTypes-flowtest.js +++ b/packages/react-native/Libraries/__flowtests__/ReactNativeTypes-flowtest.js @@ -17,7 +17,7 @@ import * as React from 'react'; function takesHostComponentInstance(instance: HostInstance | null): void {} -const MyHostComponent = (('Host': any): HostComponent); +const MyHostComponent = (('Host': any): HostComponent<{...}>); { diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index ce5edc6a072493..8e7ddf433140fb 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -1658,7 +1658,7 @@ type Props = $ReadOnly<{| size?: ?IndicatorSize, |}>; declare const ActivityIndicatorWithRef: component( - ref: React.RefSetter>, + ref: React.RefSetter>, ...props: Props ); declare export default typeof ActivityIndicatorWithRef; @@ -2269,7 +2269,7 @@ declare module.exports: typeof Wrapper & ScrollViewComponentStatics; `; exports[`public API should not change unintentionally Libraries/Components/ScrollView/ScrollViewCommands.js 1`] = ` -"type ScrollViewNativeComponentType = HostComponent; +"type ScrollViewNativeComponentType = HostComponent<{ ... }>; interface NativeCommands { +flashScrollIndicators: ( viewRef: React.ElementRef @@ -2765,20 +2765,20 @@ declare export default typeof RCTInputAccessoryViewNativeComponent; `; exports[`public API should not change unintentionally Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js 1`] = ` -"type NativeType = HostComponent; +"type NativeType = HostComponent<{ ... }>; type NativeCommands = TextInputNativeCommands; declare export const Commands: NativeCommands; declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig; -declare export default HostComponent; +declare export default HostComponent<{ ... }>; " `; exports[`public API should not change unintentionally Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js 1`] = ` -"type NativeType = HostComponent; +"type NativeType = HostComponent<{ ... }>; type NativeCommands = TextInputNativeCommands; declare export const Commands: NativeCommands; declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig; -declare export default HostComponent; +declare export default HostComponent<{ ... }>; " `; @@ -6479,11 +6479,11 @@ exports[`public API should not change unintentionally Libraries/NativeComponent/ verify: boolean, } ): void; -declare export function get( +declare export function get( name: string, viewConfigProvider: () => PartialViewConfig ): HostComponent; -declare export function getWithFallback_DEPRECATED( +declare export function getWithFallback_DEPRECATED( name: string, viewConfigProvider: () => PartialViewConfig ): React.ComponentType; @@ -7659,8 +7659,8 @@ declare export function unstable_batchedUpdates( ): void; declare export function isProfilingRenderer(): boolean; declare export function isChildPublicInstance( - parentInstance: ReactFabricHostComponent | HostComponent, - childInstance: ReactFabricHostComponent | HostComponent + parentInstance: ReactFabricHostComponent | HostComponent, + childInstance: ReactFabricHostComponent | HostComponent ): boolean; declare export function getNodeFromInternalInstanceHandle( internalInstanceHandle: InternalInstanceHandle @@ -7727,7 +7727,7 @@ exports[`public API should not change unintentionally Libraries/ReactNative/rend `; exports[`public API should not change unintentionally Libraries/ReactNative/requireNativeComponent.js 1`] = ` -"declare const requireNativeComponent: ( +"declare const requireNativeComponent: ( uiViewClassName: string ) => HostComponent; declare export default typeof requireNativeComponent; @@ -9280,7 +9280,7 @@ exports[`public API should not change unintentionally Libraries/Utilities/codege excludedPlatforms?: $ReadOnlyArray<\\"iOS\\" | \\"android\\">, |}>; export type NativeComponentType = HostComponent; -declare function codegenNativeComponent( +declare function codegenNativeComponent( componentName: string, options?: Options ): NativeComponentType; @@ -9702,7 +9702,7 @@ declare module.exports: { get Platform(): Platform, get PlatformColor(): PlatformColor, get processColor(): processColor, - get requireNativeComponent(): ( + get requireNativeComponent(): ( uiViewClassName: string ) => HostComponent, get RootTagContext(): RootTagContext, diff --git a/packages/react-native/index.js b/packages/react-native/index.js index ae0c7bf97f2e43..99a5a5ee17bda2 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -375,7 +375,7 @@ module.exports = { get processColor(): processColor { return require('./Libraries/StyleSheet/processColor').default; }, - get requireNativeComponent(): ( + get requireNativeComponent(): ( uiViewClassName: string, ) => HostComponent { return require('./Libraries/ReactNative/requireNativeComponent').default;