diff --git a/packages/react-native/Libraries/Animated/AnimatedExports.js b/packages/react-native/Libraries/Animated/AnimatedExports.js index 4cb32cf74e0..66f46476a6b 100644 --- a/packages/react-native/Libraries/Animated/AnimatedExports.js +++ b/packages/react-native/Libraries/Animated/AnimatedExports.js @@ -27,41 +27,37 @@ const Animated: typeof AnimatedImplementation = Platform.isDisableAnimations export default { /** - * FlatList and SectionList infer generic Type defined under their `data` and `section` props. + * @deprecated Use `AnimatedFlatList` instead. */ get FlatList(): AnimatedFlatList<> { return require('./components/AnimatedFlatList').default; }, /** - * Animated variants of the basic native views. Accepts Animated.Value for - * props and style. + * @deprecated Use `AnimatedImage` instead. */ get Image(): AnimatedImage { return require('./components/AnimatedImage').default; }, /** - * Animated variants of the basic native views. Accepts Animated.Value for - * props and style. + * @deprecated Use `AnimatedScrollView` instead. */ get ScrollView(): AnimatedScrollView { return require('./components/AnimatedScrollView').default; }, /** - * FlatList and SectionList infer generic Type defined under their `data` and `section` props. + * @deprecated Use `AnimatedSectionList` instead. */ get SectionList(): AnimatedSectionList<> { return require('./components/AnimatedSectionList').default; }, /** - * Animated variants of the basic native views. Accepts Animated.Value for - * props and style. + * @deprecated Use `AnimatedText` instead. */ get Text(): AnimatedText { return require('./components/AnimatedText').default; }, /** - * Animated variants of the basic native views. Accepts Animated.Value for - * props and style. + * @deprecated Use `AnimatedView` instead. */ get View(): AnimatedView { return require('./components/AnimatedView').default; diff --git a/packages/react-native/Libraries/Animated/AnimatedExports.js.flow b/packages/react-native/Libraries/Animated/AnimatedExports.js.flow index 6178617cec5..a5b56cea3ac 100644 --- a/packages/react-native/Libraries/Animated/AnimatedExports.js.flow +++ b/packages/react-native/Libraries/Animated/AnimatedExports.js.flow @@ -15,11 +15,17 @@ export type {DecayAnimationConfig} from './animations/DecayAnimation'; export type {SpringAnimationConfig} from './animations/SpringAnimation'; export type {TimingAnimationConfig} from './animations/TimingAnimation'; +/** @deprecated Use `AnimatedFlatList` instead. */ export {default as FlatList} from './components/AnimatedFlatList'; +/** @deprecated Use `AnimatedImage` instead. */ export {default as Image} from './components/AnimatedImage'; +/** @deprecated Use `AnimatedScrollView` instead. */ export {default as ScrollView} from './components/AnimatedScrollView'; +/** @deprecated Use `AnimatedSectionList` instead. */ export {default as SectionList} from './components/AnimatedSectionList'; +/** @deprecated Use `AnimatedText` instead. */ export {default as Text} from './components/AnimatedText'; +/** @deprecated Use `AnimatedView` instead. */ export {default as View} from './components/AnimatedView'; export {default as Color} from './nodes/AnimatedColor'; export {AnimatedEvent as Event} from './AnimatedEvent'; diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 9cc8048a3e7..b93600b434b 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/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<<09cb4ee90e2e29b0924c0359d0ebef39>> + * @generated SignedSource<<868e18675d8bfe557cec2b29ae506ef9>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -22,11 +22,6 @@ /* eslint-disable redundant-undefined/redundant-undefined */ import * as React from "react" -declare const $$AnimatedFlatList: typeof AnimatedFlatList_default -declare const $$AnimatedImage: AnimatedComponentType< - ImageProps, - React.ComponentRef -> declare const $$AnimatedImplementation: { add: typeof addImpl attachNativeEvent: typeof attachNativeEventImpl @@ -54,16 +49,6 @@ declare const $$AnimatedImplementation: { Value: typeof AnimatedValue_default ValueXY: typeof AnimatedValueXY_default } -declare const $$AnimatedScrollView: typeof AnimatedScrollView_default -declare const $$AnimatedSectionList: typeof AnimatedSectionList_default -declare const $$AnimatedText: AnimatedComponentType< - TextProps, - React.ComponentRef -> -declare const $$AnimatedView: AnimatedComponentType< - ViewProps, - React.ComponentRef -> declare const $$flattenStyle: typeof flattenStyle_default declare const $$index: { keyExtractor: typeof keyExtractor @@ -135,20 +120,35 @@ declare const addImpl: ( a: AnimatedNode_default | number, b: AnimatedNode_default | number, ) => AnimatedAddition_default +declare const AnimatedFlatList: typeof AnimatedFlatList_default declare const AnimatedFlatList_default: ( props: Omit>, "ref"> & { ref?: React.Ref> }, ) => React.ReactNode +declare const AnimatedImage: AnimatedComponentType< + ImageProps, + React.ComponentRef +> +declare const AnimatedScrollView: typeof AnimatedScrollView_default declare const AnimatedScrollView_default: AnimatedComponentType< ScrollViewProps, AnimatedScrollViewInstance > +declare const AnimatedSectionList: typeof AnimatedSectionList_default declare const AnimatedSectionList_default: ( props: Omit>, "ref"> & { ref?: React.Ref> }, ) => React.ReactNode +declare const AnimatedText: AnimatedComponentType< + TextProps, + React.ComponentRef +> +declare const AnimatedView: AnimatedComponentType< + ViewProps, + React.ComponentRef +> declare const AppState: typeof AppState_default declare const AppState_default: AppStateImpl declare const AssetRegistry: { @@ -906,13 +906,7 @@ declare class _TextInputInstance extends ReactNativeElement_default { isFocused(): boolean setSelection(start: number, end: number): void } -declare type $$AnimatedFlatList = typeof $$AnimatedFlatList -declare type $$AnimatedImage = typeof $$AnimatedImage declare type $$AnimatedImplementation = typeof $$AnimatedImplementation -declare type $$AnimatedScrollView = typeof $$AnimatedScrollView -declare type $$AnimatedSectionList = typeof $$AnimatedSectionList -declare type $$AnimatedText = typeof $$AnimatedText -declare type $$AnimatedView = typeof $$AnimatedView declare type $$flattenStyle = typeof $$flattenStyle declare type $$index = typeof $$index declare type $$NativeDeviceInfo = typeof $$NativeDeviceInfo @@ -1208,12 +1202,12 @@ declare namespace Animated { DecayAnimationConfig, SpringAnimationConfig, TimingAnimationConfig, - $$AnimatedFlatList as FlatList, - $$AnimatedImage as Image, - $$AnimatedScrollView as ScrollView, - $$AnimatedSectionList as SectionList, - $$AnimatedText as Text, - $$AnimatedView as View, + AnimatedFlatList as FlatList, + AnimatedImage as Image, + AnimatedScrollView as ScrollView, + AnimatedSectionList as SectionList, + AnimatedText as Text, + AnimatedView as View, AnimatedColor_default as Color, AnimatedEvent as Event, AnimatedInterpolation_default as Interpolation, @@ -1319,6 +1313,8 @@ declare class AnimatedEvent { config: EventConfig, ) } +declare type AnimatedFlatList = typeof AnimatedFlatList +declare type AnimatedImage = typeof AnimatedImage declare class AnimatedInterpolation_default< OutputT extends InterpolationConfigSupportedOutputType, > extends AnimatedWithChildren_default { @@ -1379,7 +1375,9 @@ declare type AnimatedProps = LooseOmit< "ref" > & PassThroughProps +declare type AnimatedScrollView = typeof AnimatedScrollView declare type AnimatedScrollViewInstance = React.ComponentRef +declare type AnimatedSectionList = typeof AnimatedSectionList declare class AnimatedSubtraction_default extends AnimatedWithChildren_default { constructor( a: AnimatedNode_default | number, @@ -1390,6 +1388,7 @@ declare class AnimatedSubtraction_default extends AnimatedWithChildren_default { config: InterpolationConfigType, ): AnimatedInterpolation_default } +declare type AnimatedText = typeof AnimatedText declare class AnimatedTracking_default extends AnimatedNode_default { constructor( value: AnimatedValue_default, @@ -1464,6 +1463,7 @@ declare type AnimatedValueXYConfig = Readonly< useNativeDriver: boolean } > +declare type AnimatedView = typeof AnimatedView declare class AnimatedWithChildren_default extends AnimatedNode_default {} declare class Animation_default { constructor(config: AnimationConfig) @@ -5788,7 +5788,13 @@ export { AlertOptions, // 8a116d2a AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // f6f7758c + Animated, // 6b6c8ddb + AnimatedFlatList, // a4467eeb + AnimatedImage, // f02097b9 + AnimatedScrollView, // faf0e26c + AnimatedSectionList, // 41cf38c7 + AnimatedText, // e3fc5177 + AnimatedView, // b3b343f4 AppConfig, // 35c0ca70 AppRegistry, // edec2a30 AppState, // 12012be5 diff --git a/packages/react-native/__typetests__/animated.tsx b/packages/react-native/__typetests__/animated.tsx index 4730575260e..70f2e7edc48 100644 --- a/packages/react-native/__typetests__/animated.tsx +++ b/packages/react-native/__typetests__/animated.tsx @@ -11,6 +11,10 @@ import * as React from 'react'; import { Animated, + AnimatedFlatList, + AnimatedImage, + AnimatedSectionList, + AnimatedView, View, NativeSyntheticEvent, NativeScrollEvent, @@ -163,11 +167,11 @@ function TestAnimatedAPI() { listener, }); - const AnimatedView = Animated.createAnimatedComponent(View); + const AnimatedCreatedView = Animated.createAnimatedComponent(View); const ref = React.useRef>(null); return ( - - + i has children - + - - { @@ -197,7 +201,7 @@ function TestAnimatedAPI() { }} /> ; - } @@ -207,7 +211,7 @@ function TestAnimatedAPI() { }} /> ; - ; {/* @ts-expect-error the transform object must contain only one key-value pair */} - ; + ; ); } diff --git a/packages/react-native/index.js b/packages/react-native/index.js index 79b601abb36..b523f820af6 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -221,6 +221,26 @@ module.exports = { get Animated() { return require('./Libraries/Animated/Animated').default; }, + get AnimatedFlatList() { + return require('./Libraries/Animated/components/AnimatedFlatList').default; + }, + get AnimatedImage() { + return require('./Libraries/Animated/components/AnimatedImage').default; + }, + get AnimatedScrollView() { + return require('./Libraries/Animated/components/AnimatedScrollView') + .default; + }, + get AnimatedSectionList() { + return require('./Libraries/Animated/components/AnimatedSectionList') + .default; + }, + get AnimatedText() { + return require('./Libraries/Animated/components/AnimatedText').default; + }, + get AnimatedView() { + return require('./Libraries/Animated/components/AnimatedView').default; + }, get Appearance() { return require('./Libraries/Utilities/Appearance'); }, diff --git a/packages/react-native/index.js.flow b/packages/react-native/index.js.flow index 3d015144404..0c5cb524c97 100644 --- a/packages/react-native/index.js.flow +++ b/packages/react-native/index.js.flow @@ -260,6 +260,12 @@ export type { export {default as Alert} from './Libraries/Alert/Alert'; export {default as Animated} from './Libraries/Animated/Animated'; +export {default as AnimatedFlatList} from './Libraries/Animated/components/AnimatedFlatList'; +export {default as AnimatedImage} from './Libraries/Animated/components/AnimatedImage'; +export {default as AnimatedScrollView} from './Libraries/Animated/components/AnimatedScrollView'; +export {default as AnimatedSectionList} from './Libraries/Animated/components/AnimatedSectionList'; +export {default as AnimatedText} from './Libraries/Animated/components/AnimatedText'; +export {default as AnimatedView} from './Libraries/Animated/components/AnimatedView'; export * as Appearance from './Libraries/Utilities/Appearance'; diff --git a/packages/react-native/types_DEPRECATED/Libraries/Animated/Animated.d.ts b/packages/react-native/types_DEPRECATED/Libraries/Animated/Animated.d.ts index 86f905ee696..c25a0b2c03d 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/Animated/Animated.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/Animated/Animated.d.ts @@ -597,35 +597,49 @@ export namespace Animated { options?: AnimatedComponentOptions, ): AnimatedComponent; - /** - * Animated variants of the basic native views. Accepts Animated.Value for - * props and style. - */ - export const View: AnimatedComponent; - export const Image: AnimatedComponent; - export const Text: AnimatedComponent; - export const ScrollView: AnimatedComponent; - - /** - * FlatList and SectionList infer generic Type defined under their `data` and `section` props. - */ - - export class FlatList extends FlatListComponent< - ItemT, - AnimatedProps> - > {} - - export class SectionList< + /** @deprecated Use `AnimatedView` instead. */ + export const View: typeof AnimatedView; + /** @deprecated Use `AnimatedImage` instead. */ + export const Image: typeof AnimatedImage; + /** @deprecated Use `AnimatedText` instead. */ + export const Text: typeof AnimatedText; + /** @deprecated Use `AnimatedScrollView` instead. */ + export const ScrollView: typeof AnimatedScrollView; + /** @deprecated Use `AnimatedFlatList` instead. */ + export const FlatList: typeof AnimatedFlatList; + /** @deprecated Use `AnimatedSectionList` instead. */ + export const SectionList: typeof AnimatedSectionList; + /** @deprecated Use `AnimatedFlatList` instead. */ + export type FlatList = AnimatedFlatList; + /** @deprecated Use `AnimatedSectionList` instead. */ + export type SectionList< ItemT = any, SectionT = DefaultSectionT, - > extends SectionListComponent< - AnimatedProps> - > {} + > = AnimatedSectionList; } -// We need to alias these views so we can reference them in the Animated -// namespace where their names are shadowed. -declare const _View: typeof View; -declare const _Image: typeof Image; -declare const _Text: typeof Text; -declare const _ScrollView: typeof ScrollView; +/** + * Animated variants of the basic native views. Accepts Animated.Value for + * props and style. + */ +export const AnimatedView: Animated.AnimatedComponent; +export const AnimatedImage: Animated.AnimatedComponent; +export const AnimatedText: Animated.AnimatedComponent; +export const AnimatedScrollView: Animated.AnimatedComponent; + +/** + * AnimatedFlatList and AnimatedSectionList infer generic Type defined under + * their `data` and `section` props. + */ + +export class AnimatedFlatList extends FlatListComponent< + ItemT, + Animated.AnimatedProps> +> {} + +export class AnimatedSectionList< + ItemT = any, + SectionT = DefaultSectionT, +> extends SectionListComponent< + Animated.AnimatedProps> +> {}