From 3daa28d084cd93595cffb6453170954827f12cd4 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Wed, 7 Oct 2026 10:26:53 -0700 Subject: [PATCH] Replace React.ElementConfig with React.ComponentProps in react-native Summary: The goal is to align the react types names with TS. Changelog: [Internal] Differential Revision: D123880261 --- .../Animated/components/AnimatedImage.js | 3 ++- .../Animated/components/AnimatedScrollView.js | 2 +- .../Animated/createAnimatedComponent.js | 4 +++- .../Components/Pressable/Pressable.js | 2 +- .../Components/TextInput/TextInput.js | 4 ++-- packages/react-native/ReactNativeApi.d.ts | 18 ++++++------------ .../rn-tester/js/components/RNTPressableRow.js | 2 +- .../Animated/utils/ToggleNativeDriver.js | 4 ++-- .../examples/FlatList/BaseFlatListExample.js | 2 +- .../SectionList/SectionListBaseExample.js | 2 +- .../js/examples/TextInput/ExampleTextInput.js | 4 ++-- .../TextInput/TextInputSharedExamples.js | 2 +- 12 files changed, 23 insertions(+), 26 deletions(-) diff --git a/packages/react-native/Libraries/Animated/components/AnimatedImage.js b/packages/react-native/Libraries/Animated/components/AnimatedImage.js index 8353148d8fa7..66ad6dfac6ab 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedImage.js +++ b/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, >(Image as $FlowFixMe) as AnimatedComponentType< - React.ElementConfig, + ImageProps, React.ElementRef, >; diff --git a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js index 798d09f971e5..1607ebf96b34 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js +++ b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js @@ -80,7 +80,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = ...props }: { ref?: React.RefSetter, - ...React.ElementConfig, + ...React.ComponentProps, // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView refreshControl: React.MixedElement, }) { diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js index 2d8374973e34..f7173d8915f9 100644 --- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js +++ b/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) => unknown | Date | Error | RegExp; +type ComponentProps = + T extends React.ComponentType ? Props : empty; export type WithAnimatedValue = T extends Builtin | Nullable ? T @@ -98,7 +100,7 @@ export default function createAnimatedComponent< >( Component: TInstance, ): AnimatedComponentType< - Readonly>, + Readonly>, React.ElementRef, > { return unstable_createAnimatedComponentWithAllowlist(Component, null); diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index ba26272d9304..9523947d6159 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/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 = { + const restPropsWithDefaults: React.ComponentProps = { ...restProps, ...android_rippleConfig?.viewProps, accessible: accessible !== false, diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 39bb6e8e1ee0..8db8192da372 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -898,7 +898,7 @@ const autoCompleteWebToTextContentTypeMap = { */ const TextInput: component( ref?: React.RefSetter, - ...props: React.ElementConfig + ...props: React.ComponentProps ) = function TextInput({ ref: forwardedRef, allowFontScaling = true, @@ -916,7 +916,7 @@ const TextInput: component( ...restProps }: { ref?: React.RefSetter, - ...React.ElementConfig, + ...React.ComponentProps, }) { return ( > + * @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 - >, + ImageProps, React.ComponentRef > 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 extends React.ComponentType ? Props : never declare type ComponentProvider = () => React.ComponentType declare type ComponentProviderInstrumentationHook = ( component_: ComponentProvider, @@ -1799,12 +1798,7 @@ declare function createAnimatedComponent_default< >( Component: TInstance, ): AnimatedComponentType< - Readonly< - React.JSX.LibraryManagedAttributes< - TInstance, - React.ComponentProps - > - >, + Readonly>, React.ComponentRef > declare function createLayoutAnimation( @@ -5771,7 +5765,7 @@ export { AlertOptions, // 8a116d2a AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // 990adcb6 + Animated, // ed4648e6 AppConfig, // 35c0ca70 AppRegistry, // edec2a30 AppState, // 12012be5 diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js index a6598baea65f..2eebe58c943a 100644 --- a/packages/rn-tester/js/components/RNTPressableRow.js +++ b/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['style']; +type ViewStyleProp = React.ComponentProps['style']; type Props = { accessibilityLabel?: ?string, testID?: ?string, diff --git a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js index 3aa434688824..09f66ab1508f 100644 --- a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js +++ b/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['style']; +type ViewStyleProp = React.ComponentProps['style']; type Props = { value: boolean, - onValueChange: React.ElementConfig['onValueChange'], + onValueChange: React.ComponentProps['onValueChange'], style?: ?ViewStyleProp, }; diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js index 1c77581facfd..56c4418f7494 100644 --- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js @@ -60,7 +60,7 @@ const Item = ({item, separators}: ListRenderItemInfo) => { }; type Props = Readonly<{ - exampleProps: Partial>, + exampleProps: Partial>, exampleTestID?: ?string, onTest?: ?() => void, testLabel?: ?string, diff --git a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js index 21c42c0ca641..f2034f7cbccc 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js +++ b/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>>, + exampleProps: Partial>>, exampleTestID?: ?string, onTest?: ?() => void, testLabel?: ?string, diff --git a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js index 39873af45f31..5d89bd5ffca7 100644 --- a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js +++ b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js @@ -15,13 +15,13 @@ import {StyleSheet, TextInput} from 'react-native'; const ExampleTextInput: component( ref?: React.RefSetter>, - ...props: Omit, 'ref'> + ...props: Omit, 'ref'> ) = ({ ref, ...props }: { ref?: React.RefSetter>, - ...React.ElementConfig, + ...React.ComponentProps, }) => { const theme = useContext(RNTesterThemeContext); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index fd9e8f1c1b05..9bd1123f0648 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -804,7 +804,7 @@ function DynamicContentWidth() { function AutogrowingTextInputExample({ style, ...props -}: React.ElementConfig) { +}: React.ComponentProps) { const [multiline, setMultiline] = useState(true); const [fullWidth, setFullWidth] = useState(true); const [text, setText] = useState('');