Replace ElementConfig with directly imported props (#51971)

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

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D76502294

fbshipit-source-id: ed98c5e6d9ef5fd6a4d1adbd6a88ce8cda52b969

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

@@ -15,7 +15,9 @@ import type {
 } from '../createAnimatedComponent';
 
 import RefreshControl from '../../Components/RefreshControl/RefreshControl';
-import ScrollView from '../../Components/ScrollView/ScrollView';
+import ScrollView, {
+  type ScrollViewProps,
+} from '../../Components/ScrollView/ScrollView';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -26,21 +28,20 @@ import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
 import {cloneElement, useMemo} from 'react';
 
-type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
 type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
 const AnimatedScrollView: AnimatedComponentType<
-  AnimatedScrollViewProps,
+  ScrollViewProps,
   AnimatedScrollViewInstance,
 > = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
   ref: forwardedRef,
   ...props
 }: {
   ref?: React.RefSetter<AnimatedScrollViewInstance>,
-  ...AnimatedProps<AnimatedScrollViewProps>,
+  ...AnimatedProps<ScrollViewProps>,
 }) {
   // (Android only) When a ScrollView has a RefreshControl and
   // any `style` property set with an Animated.Value, the CSS
@@ -111,7 +112,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
 
     // Handle animated props on `NativeDirectionalScrollView`.
     const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
-      AnimatedScrollViewProps,
+      ScrollViewProps,
       AnimatedScrollViewInstance,
     >(intermediatePropsForScrollView);
     const ref = useMergeRefs<AnimatedScrollViewInstance>(

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

@@ -10,13 +10,10 @@
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-import Text from '../../Text/Text';
+import Text, {type TextProps} from '../../Text/Text';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(
   (Text: $FlowFixMe),
-): AnimatedComponentType<
-  React.ElementConfig<typeof Text>,
-  React.ElementRef<typeof Text>,
->);
+): AnimatedComponentType<TextProps, React.ElementRef<typeof Text>>);

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

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import View from '../../Components/View/View';
@@ -15,6 +16,6 @@ import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
 export default (createAnimatedComponent(View): AnimatedComponentType<
-  React.ElementConfig<typeof View>,
+  ViewProps,
   React.ElementRef<typeof View>,
 >);

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

@@ -21,7 +21,7 @@ import type AnimatedValue from './nodes/AnimatedValue';
 
 import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 import composeStyles from '../../src/private/styles/composeStyles';
-import View from '../Components/View/View';
+import {type ViewProps} from '../Components/View/ViewPropTypes';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useMemo} from 'react';
@@ -60,9 +60,7 @@ type NonAnimatedProps =
   | 'disabled'
   | 'accessibilityLabel';
 type PassThroughProps = $ReadOnly<{
-  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-    typeof View,
-  > | null,
+  passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 
 export type AnimatedProps<Props: {...}> = {

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

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   GestureResponderEvent,
   LayoutChangeEvent,
@@ -26,8 +27,6 @@ import useAndroidRippleForView, {
 import * as React from 'react';
 import {memo, useMemo, useRef, useState} from 'react';
 
-type ViewStyleProp = React.ElementConfig<typeof View>['style'];
-
 export type {PressableAndroidRippleConfig};
 
 export type PressableStateCallbackType = $ReadOnly<{

packages/react-native/Libraries/Lists/FlatList.js

@@ -20,7 +20,9 @@ import type {
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import View from '../Components/View/View';
-import VirtualizedLists from '@react-native/virtualized-lists';
+import VirtualizedLists, {
+  type VirtualizedListProps,
+} from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
 import * as React from 'react';
 
@@ -181,8 +183,6 @@ type FlatListBaseProps<ItemT> = {
   ...OptionalProps<ItemT>,
 };
 
-type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
-
 export type FlatListProps<ItemT> = {
   ...Omit<
     VirtualizedListProps,

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

@@ -628,10 +628,9 @@ exports[`public API should not change unintentionally Libraries/Animated/compone
 `;
 
 exports[`public API should not change unintentionally Libraries/Animated/components/AnimatedScrollView.js 1`] = `
-"type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
-type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
+"type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
 declare const AnimatedScrollView: AnimatedComponentType<
-  AnimatedScrollViewProps,
+  ScrollViewProps,
   AnimatedScrollViewInstance,
 >;
 declare export default typeof AnimatedScrollView;
@@ -648,7 +647,7 @@ exports[`public API should not change unintentionally Libraries/Animated/compone
 
 exports[`public API should not change unintentionally Libraries/Animated/components/AnimatedText.js 1`] = `
 "declare export default AnimatedComponentType<
-  React.ElementConfig<typeof Text>,
+  TextProps,
   React.ElementRef<typeof Text>,
 >;
 "
@@ -656,7 +655,7 @@ exports[`public API should not change unintentionally Libraries/Animated/compone
 
 exports[`public API should not change unintentionally Libraries/Animated/components/AnimatedView.js 1`] = `
 "declare export default AnimatedComponentType<
-  React.ElementConfig<typeof View>,
+  ViewProps,
   React.ElementRef<typeof View>,
 >;
 "
@@ -695,9 +694,7 @@ type NonAnimatedProps =
   | \\"disabled\\"
   | \\"accessibilityLabel\\";
 type PassThroughProps = $ReadOnly<{
-  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-    typeof View,
-  > | null,
+  passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 export type AnimatedProps<Props: { ... }> = {
   [K in keyof Props]: K extends NonAnimatedProps
@@ -1757,8 +1754,7 @@ declare export default typeof LayoutConformanceNativeComponent;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/Pressable/Pressable.js 1`] = `
-"type ViewStyleProp = React.ElementConfig<typeof View>[\\"style\\"];
-export type { PressableAndroidRippleConfig };
+"export type { PressableAndroidRippleConfig };
 export type PressableStateCallbackType = $ReadOnly<{
   pressed: boolean,
 }>;
@@ -4940,8 +4936,7 @@ declare export default typeof FillRateHelper;
 `;
 
 exports[`public API should not change unintentionally Libraries/Lists/FlatList.js 1`] = `
-"declare const VirtualizedList: typeof VirtualizedLists.VirtualizedList;
-type RequiredProps<ItemT> = {
+"type RequiredProps<ItemT> = {
   data: ?$ReadOnly<$ArrayLike<ItemT>>,
 };
 type OptionalProps<ItemT> = {
@@ -4971,7 +4966,6 @@ type FlatListBaseProps<ItemT> = {
   ...RequiredProps<ItemT>,
   ...OptionalProps<ItemT>,
 };
-type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
 export type FlatListProps<ItemT> = {
   ...Omit<
     VirtualizedListProps,