Prepare typing changes for HostComponent (#47150)

Summary: Pull Request resolved: #47150 In facebook/react#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<mixed>` types are wrong, since it doesn't make sense to write `React.AbstractComponent<mixed>`. 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
facebook · Oct 22, 2024 · 71e9039 · 71e9039
1 parent 4c37431
commit 71e9039
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 33 deletions.
diff --git 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<HostComponent<mixed>>,
+  ref: React.RefSetter<HostComponent<empty>>,
   ...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
@@ -14,8 +14,9 @@ import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 import * as React from 'react';
 
-const RCTRefreshControl: HostComponent<mixed> =
-  requireNativeComponent<mixed>('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
@@ -14,7 +14,7 @@ import type {Double} from '../../Types/CodegenTypes';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import * as React from 'react';
 
-type ScrollViewNativeComponentType = HostComponent<mixed>;
+type ScrollViewNativeComponentType = HostComponent<{...}>;
 interface NativeCommands {
   +flashScrollIndicators: (
     viewRef: React.ElementRef<ScrollViewNativeComponentType>,

diff --git 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<mixed>;
+type NativeType = HostComponent<{...}>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -35,11 +35,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   },
 };
 
-const MultilineTextInputNativeComponent: HostComponent<mixed> =
-  NativeComponentRegistry.get<mixed>(
+const MultilineTextInputNativeComponent: HostComponent<{...}> =
+  NativeComponentRegistry.get<{...}>(
     'RCTMultilineTextInputView',
     () => __INTERNAL_VIEW_CONFIG,
   );
 
 // flowlint-next-line unclear-type:off
-export default ((MultilineTextInputNativeComponent: any): HostComponent<mixed>);
+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
@@ -18,7 +18,7 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import RCTTextInputViewConfig from './RCTTextInputViewConfig';
 
-type NativeType = HostComponent<mixed>;
+type NativeType = HostComponent<{...}>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -31,11 +31,13 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   ...RCTTextInputViewConfig,
 };
 
-const SinglelineTextInputNativeComponent: HostComponent<mixed> =
-  NativeComponentRegistry.get<mixed>(
+const SinglelineTextInputNativeComponent: HostComponent<{...}> =
+  NativeComponentRegistry.get<{...}>(
     'RCTSinglelineTextInputView',
     () => __INTERNAL_VIEW_CONFIG,
   );
 
 // flowlint-next-line unclear-type:off
-export default ((SinglelineTextInputNativeComponent: any): HostComponent<mixed>);
+export default ((SinglelineTextInputNativeComponent: any): HostComponent<{
+  ...
+}>);
diff --git 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<Config>(
+export function get<Config: {...}>(
   name: string,
   viewConfigProvider: () => PartialViewConfig,
 ): HostComponent<Config> {
@@ -121,7 +121,7 @@ export function get<Config>(
  * 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<Config>(
+export function getWithFallback_DEPRECATED<Config: {...}>(
   name: string,
   viewConfigProvider: () => PartialViewConfig,
 ): React.ComponentType<Config> {

diff --git 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<mixed>,
-  childInstance: ReactFabricHostComponent | HostComponent<mixed>,
+  parentInstance: ReactFabricHostComponent | HostComponent<empty>,
+  childInstance: ReactFabricHostComponent | HostComponent<empty>,
 ): 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
@@ -24,7 +24,9 @@ const getNativeComponentAttributes = require('./getNativeComponentAttributes');
  *
  */
 
-const requireNativeComponent = <T>(uiViewClassName: string): HostComponent<T> =>
+const requireNativeComponent = <T: {...}>(
+  uiViewClassName: string,
+): HostComponent<T> =>
   ((createReactNativeComponentClass(uiViewClassName, () =>
     getNativeComponentAttributes(uiViewClassName),
   ): any): HostComponent<T>);

diff --git a/packages/react-native/Libraries/Utilities/codegenNativeComponent.js b/packages/react-native/Libraries/Utilities/codegenNativeComponent.js
@@ -31,7 +31,7 @@ export type NativeComponentType<T> = HostComponent<T>;
 // `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<Props>(
+function codegenNativeComponent<Props: {...}>(
   componentName: string,
   options?: Options,
 ): NativeComponentType<Props> {

diff --git 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<mixed>);
+const MyHostComponent = (('Host': any): HostComponent<{...}>);
 
 <MyHostComponent
   ref={hostComponentRef => {

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
@@ -1658,7 +1658,7 @@ type Props = $ReadOnly<{|
   size?: ?IndicatorSize,
 |}>;
 declare const ActivityIndicatorWithRef: component(
-  ref: React.RefSetter<HostComponent<mixed>>,
+  ref: React.RefSetter<HostComponent<empty>>,
   ...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<mixed>;
+"type ScrollViewNativeComponentType = HostComponent<{ ... }>;
 interface NativeCommands {
   +flashScrollIndicators: (
     viewRef: React.ElementRef<ScrollViewNativeComponentType>
@@ -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<mixed>;
+"type NativeType = HostComponent<{ ... }>;
 type NativeCommands = TextInputNativeCommands<NativeType>;
 declare export const Commands: NativeCommands;
 declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig;
-declare export default HostComponent<mixed>;
+declare export default HostComponent<{ ... }>;
 "
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js 1`] = `
-"type NativeType = HostComponent<mixed>;
+"type NativeType = HostComponent<{ ... }>;
 type NativeCommands = TextInputNativeCommands<NativeType>;
 declare export const Commands: NativeCommands;
 declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig;
-declare export default HostComponent<mixed>;
+declare export default HostComponent<{ ... }>;
 "
 `;
 
@@ -6479,11 +6479,11 @@ exports[`public API should not change unintentionally Libraries/NativeComponent/
     verify: boolean,
   }
 ): void;
-declare export function get<Config>(
+declare export function get<Config: { ... }>(
   name: string,
   viewConfigProvider: () => PartialViewConfig
 ): HostComponent<Config>;
-declare export function getWithFallback_DEPRECATED<Config>(
+declare export function getWithFallback_DEPRECATED<Config: { ... }>(
   name: string,
   viewConfigProvider: () => PartialViewConfig
 ): React.ComponentType<Config>;
@@ -7659,8 +7659,8 @@ declare export function unstable_batchedUpdates<T>(
 ): void;
 declare export function isProfilingRenderer(): boolean;
 declare export function isChildPublicInstance(
-  parentInstance: ReactFabricHostComponent | HostComponent<mixed>,
-  childInstance: ReactFabricHostComponent | HostComponent<mixed>
+  parentInstance: ReactFabricHostComponent | HostComponent<empty>,
+  childInstance: ReactFabricHostComponent | HostComponent<empty>
 ): 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: <T>(
+"declare const requireNativeComponent: <T: { ... }>(
   uiViewClassName: string
 ) => HostComponent<T>;
 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<T> = HostComponent<T>;
-declare function codegenNativeComponent<Props>(
+declare function codegenNativeComponent<Props: { ... }>(
   componentName: string,
   options?: Options
 ): NativeComponentType<Props>;
@@ -9702,7 +9702,7 @@ declare module.exports: {
   get Platform(): Platform,
   get PlatformColor(): PlatformColor,
   get processColor(): processColor,
-  get requireNativeComponent(): <T>(
+  get requireNativeComponent(): <T: { ... }>(
     uiViewClassName: string
   ) => HostComponent<T>,
   get RootTagContext(): RootTagContext,

diff --git 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(): <T>(
+  get requireNativeComponent(): <T: {...}>(
     uiViewClassName: string,
   ) => HostComponent<T> {
     return require('./Libraries/ReactNative/requireNativeComponent').default;