Eliminate $PropertyType and $ElementType in react-native (facebook#50262)

SamChou19815 · facebook-github-bot · commit cbd2ee55ef9b · 2025-03-25T14:00:17.000-07:00
Summary: Pull Request resolved: facebook#50262 Prepare for their removal in Flow Changelog: [Internal] Reviewed By: gkz Differential Revision: D71823860 fbshipit-source-id: e1e18424ae731cd323999316a7f3a5d42f4b5b91
diff --git a/packages/react-native-codegen/src/generators/components/GeneratePropsJavaPojo/PojoCollector.js b/packages/react-native-codegen/src/generators/components/GeneratePropsJavaPojo/PojoCollector.js
@@ -112,10 +112,8 @@ class PojoCollector {
       }
       case 'ArrayTypeAnnotation': {
         const arrayTypeAnnotation = typeAnnotation;
-        const elementType: $PropertyType<
-          ComponentArrayTypeAnnotation,
-          'elementType',
-        > = arrayTypeAnnotation.elementType;
+        const elementType: ComponentArrayTypeAnnotation['elementType'] =
+          arrayTypeAnnotation.elementType;
 
         const pojoElementType = (() => {
           switch (elementType.type) {
diff --git a/packages/react-native/Libraries/AppState/AppState.js b/packages/react-native/Libraries/AppState/AppState.js
@@ -107,7 +107,7 @@ class AppStateImpl {
    */
   addEventListener<K: AppStateEvent>(
     type: K,
-    handler: (...$ElementType<AppStateEventDefinitions, K>) => void,
+    handler: (...AppStateEventDefinitions[K]) => void,
   ): EventSubscription {
     const emitter = this._emitter;
     if (emitter == null) {
diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js b/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
@@ -397,7 +397,7 @@ const AccessibilityInfo = {
   addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
     eventName: K,
     // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
-    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
+    handler: (...AccessibilityEventDefinitions[K]) => void,
   ): EventSubscription {
     const deviceEventName = EventNames.get(eventName);
     return deviceEventName == null
diff --git a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js
@@ -148,7 +148,7 @@ class Keyboard {
    */
   addListener<K: $Keys<KeyboardEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
+    listener: (...KeyboardEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     return this._emitter.addListener(eventType, listener);
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -26,7 +26,7 @@ import useAndroidRippleForView, {
 import * as React from 'react';
 import {useMemo, useRef, useState} from 'react';
 
-type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
+type ViewStyleProp = React.ElementConfig<typeof View>['style'];
 
 export type PressableStateCallbackType = $ReadOnly<{
   pressed: boolean,
diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js
@@ -134,19 +134,16 @@ export interface ScrollViewScrollToOptions {
 
 // Public methods for ScrollView
 export interface ScrollViewImperativeMethods {
-  +getScrollResponder: $PropertyType<ScrollView, 'getScrollResponder'>;
-  +getScrollableNode: $PropertyType<ScrollView, 'getScrollableNode'>;
-  +getInnerViewNode: $PropertyType<ScrollView, 'getInnerViewNode'>;
-  +getInnerViewRef: $PropertyType<ScrollView, 'getInnerViewRef'>;
-  +getNativeScrollRef: $PropertyType<ScrollView, 'getNativeScrollRef'>;
-  +scrollTo: $PropertyType<ScrollView, 'scrollTo'>;
-  +scrollToEnd: $PropertyType<ScrollView, 'scrollToEnd'>;
-  +flashScrollIndicators: $PropertyType<ScrollView, 'flashScrollIndicators'>;
-  +scrollResponderZoomTo: $PropertyType<ScrollView, 'scrollResponderZoomTo'>;
-  +scrollResponderScrollNativeHandleToKeyboard: $PropertyType<
-    ScrollView,
-    'scrollResponderScrollNativeHandleToKeyboard',
-  >;
+  +getScrollResponder: ScrollView['getScrollResponder'];
+  +getScrollableNode: ScrollView['getScrollableNode'];
+  +getInnerViewNode: ScrollView['getInnerViewNode'];
+  +getInnerViewRef: ScrollView['getInnerViewRef'];
+  +getNativeScrollRef: ScrollView['getNativeScrollRef'];
+  +scrollTo: ScrollView['scrollTo'];
+  +scrollToEnd: ScrollView['scrollToEnd'];
+  +flashScrollIndicators: ScrollView['flashScrollIndicators'];
+  +scrollResponderZoomTo: ScrollView['scrollResponderZoomTo'];
+  +scrollResponderScrollNativeHandleToKeyboard: ScrollView['scrollResponderScrollNativeHandleToKeyboard'];
 }
 
 export type DecelerationRateType = 'fast' | 'normal' | number;
diff --git a/packages/react-native/Libraries/EventEmitter/NativeEventEmitter.js b/packages/react-native/Libraries/EventEmitter/NativeEventEmitter.js
@@ -80,7 +80,7 @@ export default class NativeEventEmitter<
 
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context?: mixed,
   ): EventSubscription {
     this._nativeModule?.addListener(eventType);
@@ -104,7 +104,7 @@ export default class NativeEventEmitter<
 
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void {
     // Generally, `RCTDeviceEventEmitter` is directly invoked. But this is
     // included for completeness.
diff --git a/packages/react-native/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js b/packages/react-native/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js
@@ -24,15 +24,15 @@ export default class NativeEventEmitter<
 {
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context?: mixed,
   ): EventSubscription {
     return RCTDeviceEventEmitter.addListener(eventType, listener, context);
   }
 
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void {
     RCTDeviceEventEmitter.emit(eventType, ...args);
   }
diff --git a/packages/react-native/Libraries/Interaction/PanResponder.js b/packages/react-native/Libraries/Interaction/PanResponder.js
@@ -333,7 +333,7 @@ const PanResponder = {
    */
   _updateGestureStateOnMove(
     gestureState: PanResponderGestureState,
-    touchHistory: $PropertyType<GestureResponderEvent, 'touchHistory'>,
+    touchHistory: GestureResponderEvent['touchHistory'],
   ) {
     gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
     gestureState.moveX = currentCentroidXOfTouchesChangedAfter(
diff --git a/packages/react-native/Libraries/Linking/Linking.js b/packages/react-native/Libraries/Linking/Linking.js
@@ -34,7 +34,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    */
   addEventListener<K: $Keys<LinkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<LinkingEventDefinitions, K>) => mixed,
+    listener: (...LinkingEventDefinitions[K]) => mixed,
   ): EventSubscription {
     return this.addListener(eventType, listener);
   }
diff --git a/packages/react-native/Libraries/Lists/FlatList.js b/packages/react-native/Libraries/Lists/FlatList.js
@@ -184,17 +184,14 @@ type FlatListBaseProps<ItemT> = {
 type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
 
 export type FlatListProps<ItemT> = {
-  ...$Diff<
+  ...Omit<
     VirtualizedListProps,
-    {
-      data: $PropertyType<VirtualizedListProps, 'data'>,
-      getItem: $PropertyType<VirtualizedListProps, 'getItem'>,
-      getItemCount: $PropertyType<VirtualizedListProps, 'getItemCount'>,
-      getItemLayout: $PropertyType<VirtualizedListProps, 'getItemLayout'>,
-      renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
-      keyExtractor: $PropertyType<VirtualizedListProps, 'keyExtractor'>,
-      ...
-    },
+    | 'data'
+    | 'getItem'
+    | 'getItemCount'
+    | 'getItemLayout'
+    | 'renderItem'
+    | 'keyExtractor',
   >,
   ...FlatListBaseProps<ItemT>,
   ...
diff --git a/packages/react-native/Libraries/Lists/SectionList.js b/packages/react-native/Libraries/Lists/SectionList.js
@@ -106,27 +106,9 @@ type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
 };
 
 export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
-  ...$Diff<
+  ...Omit<
     VirtualizedSectionListProps<ItemT, SectionT>,
-    {
-      getItem: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'getItem',
-      >,
-      getItemCount: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'getItemCount',
-      >,
-      renderItem: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'renderItem',
-      >,
-      keyExtractor: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'keyExtractor',
-      >,
-      ...
-    },
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
   ...RequiredProps<ItemT, SectionT>,
   ...OptionalProps<ItemT, SectionT>,
diff --git a/packages/react-native/Libraries/Lists/SectionListModern.js b/packages/react-native/Libraries/Lists/SectionListModern.js
@@ -102,27 +102,9 @@ type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
 };
 
 export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
-  ...$Diff<
+  ...Omit<
     VirtualizedSectionListProps<ItemT, SectionT>,
-    {
-      getItem: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'getItem',
-      >,
-      getItemCount: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'getItemCount',
-      >,
-      renderItem: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'renderItem',
-      >,
-      keyExtractor: $PropertyType<
-        VirtualizedSectionListProps<ItemT, SectionT>,
-        'keyExtractor',
-      >,
-      ...
-    },
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
   ...RequiredProps<ItemT, SectionT>,
   ...OptionalProps<ItemT, SectionT>,
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.android.js b/packages/react-native/Libraries/Network/RCTNetworking.android.js
@@ -50,7 +50,7 @@ const emitter = new NativeEventEmitter<$FlowFixMe>(
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     // $FlowFixMe[incompatible-call]
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.ios.js b/packages/react-native/Libraries/Network/RCTNetworking.ios.js
@@ -20,7 +20,7 @@ import {type NativeResponseType} from './XMLHttpRequest';
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     // $FlowFixMe[incompatible-call]
diff --git a/packages/react-native/Libraries/Network/RCTNetworking.js.flow b/packages/react-native/Libraries/Network/RCTNetworking.js.flow
@@ -19,7 +19,7 @@ declare const RCTNetworking: interface {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
     // $FlowFixMe[invalid-computed-prop]
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription,
 
diff --git a/packages/react-native/Libraries/Pressability/Pressability.js b/packages/react-native/Libraries/Pressability/Pressability.js
@@ -829,7 +829,7 @@ export default class Pressability {
   };
 
   _isTouchWithinResponderRegion(
-    touch: $PropertyType<GestureResponderEvent, 'nativeEvent'>,
+    touch: GestureResponderEvent['nativeEvent'],
     responderRegion: $ReadOnly<{
       bottom: number,
       left: number,
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.js b/packages/react-native/Libraries/StyleSheet/StyleSheet.js
@@ -118,7 +118,7 @@ export type DangerouslyImpreciseStyleProp =
  */
 export type TypeForStyleKey<
   +key: $Keys<____DangerouslyImpreciseStyle_Internal>,
-> = $ElementType<____DangerouslyImpreciseStyle_Internal, key>;
+> = ____DangerouslyImpreciseStyle_Internal[key];
 
 /**
  * This type is an object of the different possible style
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.js.flow b/packages/react-native/Libraries/StyleSheet/StyleSheet.js.flow
@@ -120,7 +120,7 @@ export type DangerouslyImpreciseStyleProp =
  */
 export type TypeForStyleKey<
   +key: $Keys<____DangerouslyImpreciseStyle_Internal>,
-> = $ElementType<____DangerouslyImpreciseStyle_Internal, key>;
+> = ____DangerouslyImpreciseStyle_Internal[key];
 
 /**
  * This type is an object of the different possible style
diff --git a/packages/react-native/Libraries/Utilities/ReactNativeTestTools.js b/packages/react-native/Libraries/Utilities/ReactNativeTestTools.js
@@ -22,7 +22,7 @@ const View = require('../Components/View/View').default;
 const Text = require('../Text/Text').default;
 const {VirtualizedList} = require('@react-native/virtualized-lists').default;
 
-export type ReactTestInstance = $PropertyType<ReactTestRendererType, 'root'>;
+export type ReactTestInstance = ReactTestRendererType['root'];
 export type Predicate = (node: ReactTestInstance) => boolean;
 /* $FlowFixMe[value-as-type] (>=0.125.1 site=react_native_fb) This comment
  * suppresses an error found when Flow v0.125.1 was deployed. To see the error,
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
diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js
diff --git a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
diff --git a/packages/virtualized-lists/Lists/VirtualizedSectionList.js b/packages/virtualized-lists/Lists/VirtualizedSectionList.js

Original file line number	Diff line number	Diff line change
`@@ -24,15 +24,15 @@ export default class NativeEventEmitter<`
`24`	`24`	`{`
`25`	`25`	`addListener<TEvent: $Keys<TEventToArgsMap>>(`
`26`	`26`	`eventType: TEvent,`
`27`		`- listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,`
	`27`	`+ listener: (...args: TEventToArgsMap[TEvent]) => mixed,`
`28`	`28`	`context?: mixed,`
`29`	`29`	`): EventSubscription {`
`30`	`30`	`return RCTDeviceEventEmitter.addListener(eventType, listener, context);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`emit<TEvent: $Keys<TEventToArgsMap>>(`
`34`	`34`	`eventType: TEvent,`
`35`		`- ...args: $ElementType<TEventToArgsMap, TEvent>`
	`35`	`+ ...args: TEventToArgsMap[TEvent]`
`36`	`36`	`): void {`
`37`	`37`	`RCTDeviceEventEmitter.emit(eventType, ...args);`
`38`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {`
`34`	`34`	`*/`
`35`	`35`	`addEventListener<K: $Keys<LinkingEventDefinitions>>(`
`36`	`36`	`eventType: K,`
`37`		`- listener: (...$ElementType<LinkingEventDefinitions, K>) => mixed,`
	`37`	`+ listener: (...LinkingEventDefinitions[K]) => mixed,`
`38`	`38`	`): EventSubscription {`
`39`	`39`	`return this.addListener(eventType, listener);`
`40`	`40`	`}`