Fix generated types base on __typetests__ (#51383)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51383

This diff is a set of alignments/improvements in generated TS types. It includes:
- extending `AppStateStatus` with `extension` and `unknown`,
- exporting `AnimatedProps` under `Animated` namespace,
- resolving issue with discriminated unions in `ProgressBarAndroidTypes`,
- fixing `StyleSheet.create` type to accept only specified style properties,
- extending `TextProps` with `AccessibilityProps`,
extending Fn Args generic with `$ReadOnlyArray` in `ErrorUtils`,
- small `__typetests__` adjustments,
- removing type test `styleDimensionValueValidAnimated` as `DimensionValue` no longer accepts `AnimatedNode`,
- removing `styleDimensionValueInvalid` as `DimensionValue` accepts any string now - template literal types in Flow are not supported,
- changing `overlayColor` type to `ColorValue` to align with manual types,
- fixing `AnimatedPropsAllowList` type which wasn't correct in TS because index signature type was different from style type,
- using `DeviceEventEmitter` instead of `DeviceEventEmitterStatic` in type tests which is equivalent in both new and old types - `DeviceEventEmitterStatic` was only a type of `DeviceEventEmitter`,
- removing type test for checking forwarded key type - doesn't work with new types and that shouldn't be supported,
- removing `Animated.legacyRef` type test - not included in new types,
- adding `DOMRect` from "dom" lib to `globals.d.ts` to not include "dom" lib in the tsconfig - tries to compare globals with `lib.dom.d.ts` and produces many errors,
- exporting `SectionListData`,

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D74807552

fbshipit-source-id: c5254ea0f701f3602b9d716faeb50ca1ab21b013

packages/react-native/Libraries/Animated/AnimatedExports.js.flow

@@ -37,7 +37,7 @@ export type {default as AnimatedDivision} from './nodes/AnimatedDivision';
 export type {default as AnimatedModulo} from './nodes/AnimatedModulo';
 export type {default as AnimatedMultiplication} from './nodes/AnimatedMultiplication';
 export type {default as AnimatedSubtraction} from './nodes/AnimatedSubtraction';
-export type {WithAnimatedValue} from './createAnimatedComponent';
+export type {WithAnimatedValue, AnimatedProps} from './createAnimatedComponent';
 export type {AnimatedComponentType as AnimatedComponent} from './createAnimatedComponent';
 
 /**

packages/react-native/Libraries/Animated/nodes/AnimatedProps.js

@@ -22,7 +22,7 @@ import invariant from 'invariant';
 
 export type AnimatedPropsAllowlist = $ReadOnly<{
   style?: ?AnimatedStyleAllowlist,
-  [string]: true,
+  [key: string]: true | AnimatedStyleAllowlist,
 }>;
 
 type TargetView = {

packages/react-native/Libraries/AppState/AppState.js

@@ -22,7 +22,12 @@ import NativeAppState from './NativeAppState';
  *   - @platform android - on another Activity (even if it was launched by your app)
  * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
  */
-export type AppStateStatus = 'inactive' | 'background' | 'active';
+export type AppStateStatus =
+  | 'inactive'
+  | 'background'
+  | 'active'
+  | 'extension'
+  | 'unknown';
 
 /**
  * change - This even is received when the app state has changed.

packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -114,6 +114,7 @@ const ActivityIndicator: component(
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (
         // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
+        // $FlowFixMe[incompatible-type]
         <PlatformActivityIndicator {...nativeProps} {...androidProps} />
       ) : (
         /* $FlowFixMe[incompatible-type] (>=0.106.0 site=react_native_android_fb) This comment

packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -17,6 +17,12 @@ import Platform from '../../Utilities/Platform';
 
 export type {ProgressBarAndroidProps};
 
+// A utility type to preserve the semantics of the union uses in the definition
+// of ProgressBarAndroidProps. TS's Omit does not distribute over unions, so
+// we define our own version which does. This does not affect Flow.
+// $FlowExpectedError[unclear-type]
+type Omit<T, K> = T extends any ? Pick<T, Exclude<$Keys<T>, K>> : T;
+
 /**
  * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
  * It can now be installed and imported from `@react-native-community/progress-bar-android` instead of 'react-native'.
@@ -27,7 +33,7 @@ let ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<ProgressBarAndroidNativeComponentType>,
   >,
-  ...props: ProgressBarAndroidProps
+  ...props: Omit<ProgressBarAndroidProps, empty>
 );
 
 if (Platform.OS === 'android') {

packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js

@@ -17,28 +17,25 @@ import type {ViewProps} from '../View/ViewPropTypes';
  * `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
  * `progress` value.
  */
-type ProgressBarAndroidStyleAttrProp =
-  | {
-      styleAttr: 'Horizontal',
-      indeterminate: false,
-      progress: number,
-    }
-  | {
-      styleAttr:
-        | 'Horizontal'
-        | 'Normal'
-        | 'Small'
-        | 'Large'
-        | 'Inverse'
-        | 'SmallInverse'
-        | 'LargeInverse',
-      indeterminate: true,
-    };
+type DeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr: 'Horizontal',
+  indeterminate: false,
+  progress: number,
+};
 
-export type ProgressBarAndroidProps = $ReadOnly<{
-  ...ViewProps,
-  ...ProgressBarAndroidStyleAttrProp,
+type IndeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr:
+    | 'Horizontal'
+    | 'Normal'
+    | 'Small'
+    | 'Large'
+    | 'Inverse'
+    | 'SmallInverse'
+    | 'LargeInverse',
+  indeterminate: true,
+};
 
+type ProgressBarAndroidBaseProps = $ReadOnly<{
   /**
    * Whether to show the ProgressBar (true, the default) or hide it (false).
    */
@@ -52,3 +49,15 @@ export type ProgressBarAndroidProps = $ReadOnly<{
    */
   testID?: ?string,
 }>;
+
+export type ProgressBarAndroidProps =
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...DeterminateProgressBarAndroidStyleAttrProp,
+    }>
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...IndeterminateProgressBarAndroidStyleAttrProp,
+    }>;

packages/react-native/Libraries/EventEmitter/NativeEventEmitter.js

@@ -52,7 +52,7 @@ export default class NativeEventEmitter<
 {
   _nativeModule: ?NativeModule;
 
-  constructor(nativeModule: ?NativeModule) {
+  constructor(nativeModule?: ?NativeModule) {
     if (Platform.OS === 'ios') {
       invariant(
         nativeModule != null,

packages/react-native/Libraries/StyleSheet/StyleSheetExports.js.flow

@@ -107,4 +107,6 @@ declare export const setStyleAttributePreprocessor: (
  * An identity function for creating style sheets.
  */
 // $FlowFixMe[unsupported-variance-annotation]
-declare export const create: <+S: ____Styles_Internal>(obj: S) => $ReadOnly<S>;
+declare export const create: <+S: ____Styles_Internal>(
+  obj: S & ____Styles_Internal,
+) => $ReadOnly<S>;

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -21,6 +21,7 @@ import type {
   ____ViewStyle_InternalOverrides,
 } from './private/_StyleSheetTypesOverrides';
 import type {____TransformStyle_Internal} from './private/_TransformStyle';
+import type {ColorValue} from './StyleSheet';
 
 export type {____TransformStyle_Internal};
 
@@ -1001,7 +1002,7 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
   overflow?: 'visible' | 'hidden',
 }>;
 
@@ -1015,7 +1016,7 @@ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
 }>;
 
 export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{

packages/react-native/Libraries/Text/TextProps.js

@@ -13,6 +13,7 @@
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
+  AccessibilityProps,
   AccessibilityRole,
   AccessibilityState,
   Role,
@@ -124,20 +125,7 @@ export type TextPropsAndroid = {
 };
 
 type TextBaseProps = $ReadOnly<{
-  /**
-   * Indicates whether the view is an accessibility element.
-   *
-   * See https://reactnative.dev/docs/text#accessible
-   */
-  accessible?: ?boolean,
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
-  accessibilityHint?: ?Stringish,
-  accessibilityLanguage?: ?Stringish,
-  accessibilityLabel?: ?Stringish,
-  accessibilityRole?: ?AccessibilityRole,
-  accessibilityState?: ?AccessibilityState,
-  'aria-label'?: ?string,
 
   /**
    * Whether fonts should scale to respect Text Size accessibility settings.
@@ -152,24 +140,6 @@ type TextBaseProps = $ReadOnly<{
    *
    */
   android_hyphenationFrequency?: ?('normal' | 'none' | 'full'),
-
-  /**
-   * alias for accessibilityState
-   *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
-   */
-  'aria-busy'?: ?boolean,
-  'aria-checked'?: ?boolean | 'mixed',
-  'aria-disabled'?: ?boolean,
-  'aria-expanded'?: ?boolean,
-  'aria-selected'?: ?boolean,
-
-  /**
-   * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   * This prop is listed for cross-platform reasons and has no real effect on Android or iOS.
-   */
-  'aria-labelledby'?: ?string,
-
   children?: ?React.Node,
 
   /**
@@ -306,4 +276,5 @@ export type TextProps = $ReadOnly<{
   ...TextPropsIOS,
   ...TextPropsAndroid,
   ...TextBaseProps,
+  ...AccessibilityProps,
 }>;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -190,7 +190,10 @@ export type { default as AnimatedDivision } from \\"./nodes/AnimatedDivision\\";
 export type { default as AnimatedModulo } from \\"./nodes/AnimatedModulo\\";
 export type { default as AnimatedMultiplication } from \\"./nodes/AnimatedMultiplication\\";
 export type { default as AnimatedSubtraction } from \\"./nodes/AnimatedSubtraction\\";
-export type { WithAnimatedValue } from \\"./createAnimatedComponent\\";
+export type {
+  WithAnimatedValue,
+  AnimatedProps,
+} from \\"./createAnimatedComponent\\";
 export type { AnimatedComponentType as AnimatedComponent } from \\"./createAnimatedComponent\\";
 declare export const add: typeof AnimatedImplementation.add;
 declare export const attachNativeEvent: typeof AnimatedImplementation.attachNativeEvent;
@@ -904,7 +907,7 @@ declare export default class AnimatedObject extends AnimatedWithChildren {
 exports[`public API should not change unintentionally Libraries/Animated/nodes/AnimatedProps.js 1`] = `
 "export type AnimatedPropsAllowlist = $ReadOnly<{
   style?: ?AnimatedStyleAllowlist,
-  [string]: true,
+  [key: string]: true | AnimatedStyleAllowlist,
 }>;
 type TargetViewInstance = React.ElementRef<React.ElementType>;
 declare export default class AnimatedProps extends AnimatedNode {
@@ -1077,7 +1080,12 @@ exports[`public API should not change unintentionally Libraries/Animated/useAnim
 `;
 
 exports[`public API should not change unintentionally Libraries/AppState/AppState.js 1`] = `
-"export type AppStateStatus = \\"inactive\\" | \\"background\\" | \\"active\\";
+"export type AppStateStatus =
+  | \\"inactive\\"
+  | \\"background\\"
+  | \\"active\\"
+  | \\"extension\\"
+  | \\"unknown\\";
 type AppStateEventDefinitions = {
   change: [AppStateStatus],
   memoryWarning: [],
@@ -1818,11 +1826,12 @@ declare export default function useAndroidRippleForView(
 
 exports[`public API should not change unintentionally Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js 1`] = `
 "export type { ProgressBarAndroidProps };
+type Omit<T, K> = T extends any ? Pick<T, Exclude<$Keys<T>, K>> : T;
 declare let ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<ProgressBarAndroidNativeComponentType>,
   >,
-  ...props: ProgressBarAndroidProps
+  ...props: Omit<ProgressBarAndroidProps, empty>
 );
 declare export default typeof ProgressBarAndroid;
 "
@@ -1835,30 +1844,38 @@ declare export default typeof ProgressBarAndroidNativeComponent;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js 1`] = `
-"type ProgressBarAndroidStyleAttrProp =
-  | {
-      styleAttr: \\"Horizontal\\",
-      indeterminate: false,
-      progress: number,
-    }
-  | {
-      styleAttr:
-        | \\"Horizontal\\"
-        | \\"Normal\\"
-        | \\"Small\\"
-        | \\"Large\\"
-        | \\"Inverse\\"
-        | \\"SmallInverse\\"
-        | \\"LargeInverse\\",
-      indeterminate: true,
-    };
-export type ProgressBarAndroidProps = $ReadOnly<{
-  ...ViewProps,
-  ...ProgressBarAndroidStyleAttrProp,
+"type DeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr: \\"Horizontal\\",
+  indeterminate: false,
+  progress: number,
+};
+type IndeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr:
+    | \\"Horizontal\\"
+    | \\"Normal\\"
+    | \\"Small\\"
+    | \\"Large\\"
+    | \\"Inverse\\"
+    | \\"SmallInverse\\"
+    | \\"LargeInverse\\",
+  indeterminate: true,
+};
+type ProgressBarAndroidBaseProps = $ReadOnly<{
   animating?: ?boolean,
   color?: ?ColorValue,
   testID?: ?string,
 }>;
+export type ProgressBarAndroidProps =
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...DeterminateProgressBarAndroidStyleAttrProp,
+    }>
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...IndeterminateProgressBarAndroidStyleAttrProp,
+    }>;
 "
 `;
 
@@ -4167,7 +4184,7 @@ declare export default class NativeEventEmitter<
   > = $ReadOnly<Record<string, $ReadOnlyArray<UnsafeObject>>>,
 > implements IEventEmitter<TEventToArgsMap>
 {
-  constructor(nativeModule: ?NativeModule): void;
+  constructor(nativeModule?: ?NativeModule): void;
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
     listener: (...args: TEventToArgsMap[TEvent]) => mixed,
@@ -7108,7 +7125,9 @@ declare export const setStyleAttributePreprocessor: (
   property: string,
   process: (nextProp: any) => any
 ) => void;
-declare export const create: <+S: ____Styles_Internal>(obj: S) => $ReadOnly<S>;
+declare export const create: <+S: ____Styles_Internal>(
+  obj: S & ____Styles_Internal
+) => $ReadOnly<S>;
 "
 `;
 
@@ -7513,7 +7532,7 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\" | \\"none\\",
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
   overflow?: \\"visible\\" | \\"hidden\\",
 }>;
 export type ____ImageStyle_Internal = $ReadOnly<{
@@ -7525,7 +7544,7 @@ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\" | \\"none\\",
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
 }>;
 export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
   ...____DangerouslyImpreciseStyle_InternalCore,
@@ -7870,23 +7889,9 @@ export type TextPropsAndroid = {
   minimumFontScale?: ?number,
 };
 type TextBaseProps = $ReadOnly<{
-  accessible?: ?boolean,
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
-  accessibilityHint?: ?Stringish,
-  accessibilityLanguage?: ?Stringish,
-  accessibilityLabel?: ?Stringish,
-  accessibilityRole?: ?AccessibilityRole,
-  accessibilityState?: ?AccessibilityState,
-  \\"aria-label\\"?: ?string,
   allowFontScaling?: ?boolean,
   android_hyphenationFrequency?: ?(\\"normal\\" | \\"none\\" | \\"full\\"),
-  \\"aria-busy\\"?: ?boolean,
-  \\"aria-checked\\"?: ?boolean | \\"mixed\\",
-  \\"aria-disabled\\"?: ?boolean,
-  \\"aria-expanded\\"?: ?boolean,
-  \\"aria-selected\\"?: ?boolean,
-  \\"aria-labelledby\\"?: ?string,
   children?: ?React.Node,
   ellipsizeMode?: ?(\\"clip\\" | \\"head\\" | \\"middle\\" | \\"tail\\"),
   id?: string,
@@ -7917,6 +7922,7 @@ export type TextProps = $ReadOnly<{
   ...TextPropsIOS,
   ...TextPropsAndroid,
   ...TextBaseProps,
+  ...AccessibilityProps,
 }>;
 "
 `;
@@ -8945,7 +8951,7 @@ declare export default typeof rejectionTrackingOptions;
 
 exports[`public API should not change unintentionally Libraries/vendor/core/ErrorUtils.js 1`] = `
 "type ErrorHandler = (error: mixed, isFatal: boolean) => void;
-type Fn<Args, Return> = (...Args) => Return;
+type Fn<Args: $ReadOnlyArray<mixed>, Return> = (...Args) => Return;
 export type ErrorUtils = {
   applyWithGuard<TArgs: $ReadOnlyArray<mixed>, TOut>(
     fun: Fn<TArgs, TOut>,
@@ -9087,6 +9093,7 @@ export type {
   SectionListProps,
   SectionListRenderItem,
   SectionListRenderItemInfo,
+  SectionListData,
 } from \\"./Libraries/Lists/SectionList\\";
 export { default as SectionList } from \\"./Libraries/Lists/SectionList\\";
 export type {

packages/react-native/Libraries/vendor/core/ErrorUtils.js

@@ -10,7 +10,7 @@
 
 // From @react-native/js-polyfills
 type ErrorHandler = (error: mixed, isFatal: boolean) => void;
-type Fn<Args, Return> = (...Args) => Return;
+type Fn<Args: $ReadOnlyArray<mixed>, Return> = (...Args) => Return;
 export type ErrorUtils = {
   applyWithGuard<TArgs: $ReadOnlyArray<mixed>, TOut>(
     fun: Fn<TArgs, TOut>,

packages/react-native/index.js.flow

@@ -106,6 +106,7 @@ export type {
   SectionListProps,
   SectionListRenderItem,
   SectionListRenderItemInfo,
+  SectionListData,
 } from './Libraries/Lists/SectionList';
 export {default as SectionList} from './Libraries/Lists/SectionList';
 

packages/react-native/src/types/globals.d.ts

@@ -57,6 +57,48 @@ declare global {
 
   const HermesInternal: null | {};
 
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) */
+  interface DOMRectReadOnly {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/bottom) */
+    readonly bottom: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/height) */
+    readonly height: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/left) */
+    readonly left: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/right) */
+    readonly right: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/top) */
+    readonly top: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/width) */
+    readonly width: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/x) */
+    readonly x: number;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/y) */
+    readonly y: number;
+    toJSON(): any;
+  }
+
+  interface DOMRect extends DOMRectReadOnly {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+  }
+
+  interface DOMRectInit {
+    height?: number | undefined;
+    width?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+  }
+
+  var DOMRect: {
+    prototype: DOMRect;
+    new (x?: number, y?: number, width?: number, height?: number): DOMRect;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/fromRect_static) */
+    fromRect(other?: DOMRectInit): DOMRect;
+  };
+
   // #region Timer Functions
 
   function clearInterval(handle: number): void;

packages/react-native/types/__typetests__/animated.tsx

@@ -14,7 +14,6 @@ import {
   View,
   NativeSyntheticEvent,
   NativeScrollEvent,
-  StyleProp,
   SectionListData,
 } from 'react-native';
 
@@ -44,12 +43,6 @@ const ForwardComp = React.forwardRef<
 
 type X = React.PropsWithoutRef<React.ComponentProps<typeof ForwardComp>>;
 
-type Props = React.ComponentPropsWithRef<typeof Animated.Text>;
-const AnimatedWrapperComponent: React.FunctionComponent<Props> = ({
-  key, // $ExpectType string | number | null | undefined || Key | null | undefined
-  ...props
-}) => <Animated.Text {...props} />;
-
 function TestAnimatedAPI() {
   // Value
   const v1 = new Animated.Value(0);
@@ -172,9 +165,6 @@ function TestAnimatedAPI() {
 
   const AnimatedView = Animated.createAnimatedComponent(View);
   const ref = React.useRef<React.ComponentRef<typeof View>>(null);
-  const legacyRef =
-    React.useRef<Animated.LegacyRef<React.ComponentRef<typeof View>>>(null);
-
   return (
     <View ref={ref}>
       <Animated.View
@@ -189,8 +179,6 @@ function TestAnimatedAPI() {
       <AnimatedView ref={ref} style={{top: 3}}>
         i has children
       </AnimatedView>
-      <Animated.View ref={legacyRef} />
-      <AnimatedView ref={legacyRef} />
       <AnimatedComp ref={AnimatedCompRef} width={v1} />
       <ForwardComp ref={ForwardCompRef} width={1} />
       <AnimatedForwardComp ref={AnimatedForwardCompRef} width={10} />

packages/react-native/types/__typetests__/index.tsx

@@ -34,7 +34,6 @@ import {
   ColorValue,
   DevSettings,
   DeviceEventEmitter,
-  DeviceEventEmitterStatic,
   Dimensions,
   DrawerLayoutAndroid,
   DrawerSlideEvent,
@@ -50,6 +49,7 @@ import {
   ImageBackground,
   ImageErrorEvent,
   ImageLoadEvent,
+  // @ts-ignore
   ImageResizeMode,
   ImageResolvedAssetSource,
   ImageStyle,
@@ -64,6 +64,7 @@ import {
   Modal,
   MouseEvent,
   NativeEventEmitter,
+  // @ts-ignore
   NativeModule, // Not actually exported, not sure why
   NativeModules,
   NativeScrollEvent,
@@ -75,6 +76,7 @@ import {
   ProgressBarAndroid,
   PushNotificationIOS,
   RefreshControl,
+  // @ts-ignore
   RegisteredStyle,
   ScaledSize,
   ScrollView,
@@ -97,6 +99,7 @@ import {
   TextInputEndEditingEvent,
   TextInputFocusEvent,
   TextInputKeyPressEvent,
+  // @ts-ignore
   TextInputScrollEvent,
   TextInputSelectionChangeEvent,
   TextInputSubmitEditingEvent,
@@ -116,12 +119,14 @@ import {
   requireNativeComponent,
   useColorScheme,
   useWindowDimensions,
+  // @ts-ignore
   SectionListData,
   ToastAndroid,
   Touchable,
   LayoutAnimation,
   processColor,
   experimental_LayoutConformance as LayoutConformance,
+  ViewProps,
 } from 'react-native';
 
 declare module 'react-native' {
@@ -233,10 +238,10 @@ const fontVariantStyle: StyleProp<TextStyle> = {
   fontVariant: ['tabular-nums'],
 };
 
-const viewProperty = StyleSheet.flatten(viewStyle).backgroundColor;
-const textProperty = StyleSheet.flatten(textStyle).fontSize;
-const imageProperty = StyleSheet.flatten(imageStyle).resizeMode;
-const fontVariantProperty = StyleSheet.flatten(fontVariantStyle).fontVariant;
+const viewProperty = StyleSheet.flatten(viewStyle)?.backgroundColor;
+const textProperty = StyleSheet.flatten(textStyle)?.fontSize;
+const imageProperty = StyleSheet.flatten(imageStyle)?.resizeMode;
+const fontVariantProperty = StyleSheet.flatten(fontVariantStyle)?.fontVariant;
 
 // correct use of the StyleSheet.flatten
 const styleArray: StyleProp<ViewStyle>[] = [];
@@ -263,25 +268,6 @@ const styleDimensionValueValidPct: ViewStyle = {
   width: '5%',
 };
 
-const styleDimensionValueValidAnimated: ViewStyle = {
-  width: new Animated.Value(5),
-};
-
-const styleDimensionValueInvalid1: ViewStyle = {
-  // @ts-expect-error
-  width: '5',
-};
-
-const styleDimensionValueInvalid2: ViewStyle = {
-  // @ts-expect-error
-  width: '5px',
-};
-
-const styleDimensionValueInvalid3: ViewStyle = {
-  // @ts-expect-error
-  width: 'A%',
-};
-
 // StyleSheet.compose
 // It creates a new style object by composing two existing styles
 const composeTextStyle: StyleProp<TextStyle> = {
@@ -401,10 +387,13 @@ const testNativeSyntheticEvent = <T extends {}>(
   e.isTrusted;
   e.nativeEvent;
   e.target;
-  e.target.measure(() => {});
   e.timeStamp;
   e.type;
   e.nativeEvent;
+
+  if (typeof e.target !== 'number') {
+    e.target?.measure(() => {});
+  }
 };
 
 function eventHandler<T extends React.BaseSyntheticEvent>(e: T) {}
@@ -427,7 +416,7 @@ class CustomView extends React.Component {
 }
 
 class Welcome extends React.Component<
-  ElementProps<View> & {color: string; bgColor?: null | undefined | string}
+  ViewProps & {color: string; bgColor?: null | undefined | string}
 > {
   rootViewRef = React.createRef<React.ComponentRef<typeof View>>();
   customViewRef = React.createRef<React.ComponentRef<typeof CustomView>>();
@@ -637,7 +626,9 @@ export class TouchableNativeFeedbackTest extends React.Component {
 
 // PressableTest
 export class PressableTest extends React.Component<{}> {
-  private readonly myRef: React.RefObject<View | null> = React.createRef();
+  private readonly myRef: React.RefObject<React.ComponentRef<
+    typeof View
+  > | null> = React.createRef();
 
   onPressButton = (e: GestureResponderEvent) => {
     e.persist();
@@ -747,7 +738,7 @@ const AppStateExample = () => {
   React.useEffect(() => {
     const subscription = AppState.addEventListener('change', nextAppState => {
       if (
-        appState.current.match(/inactive|background/) &&
+        appState.current?.match(/inactive|background/) &&
         nextAppState === 'active'
       ) {
         console.log('App has come to the foreground!');
@@ -1155,10 +1146,10 @@ class InputAccessoryViewTest extends React.Component {
   }
 }
 
-// DeviceEventEmitterStatic
-const deviceEventEmitterStatic: DeviceEventEmitterStatic = DeviceEventEmitter;
-deviceEventEmitterStatic.addListener('keyboardWillShow', data => true);
-deviceEventEmitterStatic.addListener('keyboardWillShow', data => true, {});
+// DeviceEventEmitter
+const deviceEventEmitter: typeof DeviceEventEmitter = DeviceEventEmitter;
+deviceEventEmitter.addListener('keyboardWillShow', data => true);
+deviceEventEmitter.addListener('keyboardWillShow', data => true, {});
 
 // NativeEventEmitter - Android
 const androidEventEmitter = new NativeEventEmitter();
@@ -1322,7 +1313,6 @@ class TextTest extends React.Component {
       <Text
         allowFontScaling={false}
         ellipsizeMode="head"
-        lineBreakMode="clip"
         numberOfLines={2}
         onLayout={this.handleOnLayout}
         onTextLayout={this.handleOnTextLayout}
@@ -1423,9 +1413,9 @@ export class ImageTest extends React.Component {
 }
 
 export class ImageBackgroundProps extends React.Component {
-  private _imageRef: Image | null = null;
+  private _imageRef: React.ComponentRef<typeof Image> | null = null;
 
-  setImageRef = (image: Image) => {
+  setImageRef = (image: React.ComponentRef<typeof Image>) => {
     this._imageRef = image;
   };
 
@@ -1854,7 +1844,9 @@ const PlatformTest = () => {
 };
 
 const PlatformConstantsTest = () => {
-  const testing: boolean = Platform.constants.isTesting;
+  if (Platform.OS !== 'web') {
+    const testing: boolean = Platform.constants.isTesting;
+  }
   if (Platform.OS === 'ios') {
     const hasForceTouch: boolean = Platform.constants.forceTouchAvailable;
   } else if (Platform.OS === 'android') {
@@ -1993,6 +1985,7 @@ const ProgressBarAndroidTest = () => {
     color="white"
     styleAttr="Horizontal"
     progress={0.42}
+    indeterminate={false}
   />;
 };
 
@@ -2011,7 +2004,7 @@ const PushNotificationTest = () => {
     alertTitle: 'Hello!',
     applicationIconBadgeNumber: 999,
     category: 'engagement',
-    fireDate: new Date().toISOString(),
+    fireDate: +new Date(),
     isSilent: false,
     repeatInterval: 'minute',
     userInfo: {

packages/react-native/types/__typetests__/legacy-properties.tsx

@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+// @ts-ignore
 import {TextInputProperties} from 'react-native';
 
 class Test extends React.Component<TextInputProperties> {}

packages/react-native/types/__typetests__/stylesheet-create.tsx

@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+// @ts-ignore
 import {View, StyleSheet, type ShadowStyleIOS} from 'react-native';
 
 export function App() {

packages/virtualized-lists/Lists/VirtualizedSectionList.js

@@ -17,6 +17,7 @@ import invariant from 'invariant';
 import * as React from 'react';
 
 type DefaultSectionT = {
+  data: any,
   [key: string]: any,
 };