Replace React.ElementConfig with React.ComponentProps in react-native (#58931)

Summary:
Pull Request resolved: #58931

The goal is to align the react types names with TS.

Changelog: [Internal]

___

Differential Revision: D123880261

fbshipit-source-id: f9dc4cbc1a3c0f155f26d4335466a3958e265c63

Author: SamChou19815

packages/react-native/Libraries/Animated/components/AnimatedImage.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ImageProps} from '../../Image/ImageProps';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import Image from '../../Image/Image';
@@ -18,6 +19,6 @@ export default createAnimatedComponent<
   $FlowFixMe,
   React.ElementRef<typeof Image>,
 >(Image as $FlowFixMe) as AnimatedComponentType<
-  React.ElementConfig<typeof Image>,
+  ImageProps,
   React.ElementRef<typeof Image>,
 >;

packages/react-native/Libraries/Animated/components/AnimatedScrollView.js

@@ -80,7 +80,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
     ...props
   }: {
     ref?: React.RefSetter<AnimatedScrollViewInstance>,
-    ...React.ElementConfig<typeof ScrollView>,
+    ...React.ComponentProps<typeof ScrollView>,
     // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
     refreshControl: React.MixedElement,
   }) {

packages/react-native/Libraries/Animated/createAnimatedComponent.js

@@ -30,6 +30,8 @@ import {useMemo} from 'react';
 type Nullable = void | null;
 type Primitive = string | number | boolean | symbol | void;
 type Builtin = (...ReadonlyArray<empty>) => unknown | Date | Error | RegExp;
+type ComponentProps<T> =
+  T extends React.ComponentType<infer Props> ? Props : empty;
 
 export type WithAnimatedValue<out T> = T extends Builtin | Nullable
   ? T
@@ -98,7 +100,7 @@ export default function createAnimatedComponent<
 >(
   Component: TInstance,
 ): AnimatedComponentType<
-  Readonly<React.ElementConfig<TInstance>>,
+  Readonly<ComponentProps<TInstance>>,
   React.ElementRef<TInstance>,
 > {
   return unstable_createAnimatedComponentWithAllowlist(Component, null);

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

@@ -270,7 +270,7 @@ function Pressable({
     ariaLive === 'off' ? 'none' : (ariaLive ?? props.accessibilityLiveRegion);
 
   const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
-  const restPropsWithDefaults: React.ElementConfig<typeof View> = {
+  const restPropsWithDefaults: React.ComponentProps<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,

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

@@ -898,7 +898,7 @@ const autoCompleteWebToTextContentTypeMap = {
  */
 const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
-  ...props: React.ElementConfig<typeof InternalTextInput>
+  ...props: React.ComponentProps<typeof InternalTextInput>
 ) = function TextInput({
   ref: forwardedRef,
   allowFontScaling = true,
@@ -916,7 +916,7 @@ const TextInput: component(
   ...restProps
 }: {
   ref?: React.RefSetter<TextInputInstance>,
-  ...React.ElementConfig<typeof InternalTextInput>,
+  ...React.ComponentProps<typeof InternalTextInput>,
 }) {
   return (
     <InternalTextInput

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<3ce9599aceb36dd1f09ded3db3332daa>>
+ * @generated SignedSource<<83faf91fab56f9b954a3bb7cfdef59e1>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -24,10 +24,7 @@
 import * as React from "react"
 declare const $$AnimatedFlatList: typeof AnimatedFlatList_default
 declare const $$AnimatedImage: AnimatedComponentType<
-  React.JSX.LibraryManagedAttributes<
-    typeof Image,
-    React.ComponentProps<typeof Image>
-  >,
+  ImageProps,
   React.ComponentRef<typeof Image>
 >
 declare const $$AnimatedImplementation: {
@@ -1748,6 +1745,8 @@ declare type ColorListenerCallback = (value: ColorValue) => unknown
 declare type ColorSchemeName = "dark" | "light"
 declare type ColorSchemeOverride = "auto" | "dark" | "light" | "unspecified"
 declare type ColorValue = ____ColorValue_Internal
+declare type ComponentProps<T> =
+  T extends React.ComponentType<infer Props> ? Props : never
 declare type ComponentProvider = () => React.ComponentType<any>
 declare type ComponentProviderInstrumentationHook = (
   component_: ComponentProvider,
@@ -1799,12 +1798,7 @@ declare function createAnimatedComponent_default<
 >(
   Component: TInstance,
 ): AnimatedComponentType<
-  Readonly<
-    React.JSX.LibraryManagedAttributes<
-      TInstance,
-      React.ComponentProps<TInstance>
-    >
-  >,
+  Readonly<ComponentProps<TInstance>>,
   React.ComponentRef<TInstance>
 >
 declare function createLayoutAnimation(
@@ -5771,7 +5765,7 @@ export {
   AlertOptions, // 8a116d2a
   AlertType, // 5ab91217
   AndroidKeyboardEvent, // e03becc8
-  Animated, // 990adcb6
+  Animated, // ed4648e6
   AppConfig, // 35c0ca70
   AppRegistry, // edec2a30
   AppState, // 12012be5

packages/rn-tester/js/components/RNTPressableRow.js

@@ -14,7 +14,7 @@ import * as React from 'react';
 import {useContext} from 'react';
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 
-type ViewStyleProp = React.ElementConfig<typeof View>['style'];
+type ViewStyleProp = React.ComponentProps<typeof View>['style'];
 type Props = {
   accessibilityLabel?: ?string,
   testID?: ?string,

packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js

@@ -13,11 +13,11 @@ import * as React from 'react';
 import {useContext} from 'react';
 import {StyleSheet, Switch, Text, View} from 'react-native';
 
-type ViewStyleProp = React.ElementConfig<typeof View>['style'];
+type ViewStyleProp = React.ComponentProps<typeof View>['style'];
 
 type Props = {
   value: boolean,
-  onValueChange: React.ElementConfig<typeof Switch>['onValueChange'],
+  onValueChange: React.ComponentProps<typeof Switch>['onValueChange'],
   style?: ?ViewStyleProp,
 };
 

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -60,7 +60,7 @@ const Item = ({item, separators}: ListRenderItemInfo<string>) => {
 };
 
 type Props = Readonly<{
-  exampleProps: Partial<React.ElementConfig<typeof FlatList>>,
+  exampleProps: Partial<React.ComponentProps<typeof FlatList>>,
   exampleTestID?: ?string,
   onTest?: ?() => void,
   testLabel?: ?string,

packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js

@@ -66,7 +66,7 @@ const Item = ({item, section, separators}) => {
 
 type Props = Readonly<{
   // $FlowFixMe[unclear-type]
-  exampleProps: Partial<React.ElementConfig<typeof SectionList<any>>>,
+  exampleProps: Partial<React.ComponentProps<typeof SectionList<any>>>,
   exampleTestID?: ?string,
   onTest?: ?() => void,
   testLabel?: ?string,