Export Animated components as named exports

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;

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';

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<typeof Image>
->
 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<typeof Text>
->
-declare const $$AnimatedView: AnimatedComponentType<
-  ViewProps,
-  React.ComponentRef<typeof View>
->
 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: <ItemT = any>(
   props: Omit<AnimatedProps<FlatListProps<ItemT>>, "ref"> & {
     ref?: React.Ref<FlatList<ItemT>>
   },
 ) => React.ReactNode
+declare const AnimatedImage: AnimatedComponentType<
+  ImageProps,
+  React.ComponentRef<typeof Image>
+>
+declare const AnimatedScrollView: typeof AnimatedScrollView_default
 declare const AnimatedScrollView_default: AnimatedComponentType<
   ScrollViewProps,
   AnimatedScrollViewInstance
 >
+declare const AnimatedSectionList: typeof AnimatedSectionList_default
 declare const AnimatedSectionList_default: <ItemT = any, SectionT = any>(
   props: Omit<AnimatedProps<SectionListProps<ItemT, SectionT>>, "ref"> & {
     ref?: React.Ref<SectionList<ItemT, SectionT>>
   },
 ) => React.ReactNode
+declare const AnimatedText: AnimatedComponentType<
+  TextProps,
+  React.ComponentRef<typeof Text>
+>
+declare const AnimatedView: AnimatedComponentType<
+  ViewProps,
+  React.ComponentRef<typeof View>
+>
 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<any>,
   )
 }
+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<Props extends {}> = LooseOmit<
   "ref"
 > &
   PassThroughProps
+declare type AnimatedScrollView = typeof AnimatedScrollView
 declare type AnimatedScrollViewInstance = React.ComponentRef<typeof ScrollView>
+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<OutputT>,
   ): AnimatedInterpolation_default<OutputT>
 }
+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

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<React.ComponentRef<typeof View>>(null);
   return (
     <View ref={ref}>
-      <Animated.View
+      <AnimatedView
         ref={ref}
         style={[
           position.getLayout(),
@@ -176,17 +180,17 @@ function TestAnimatedAPI() {
           },
         ]}
       />
-      <AnimatedView ref={ref} style={{top: 3}}>
+      <AnimatedCreatedView ref={ref} style={{top: 3}}>
         i has children
-      </AnimatedView>
+      </AnimatedCreatedView>
       <AnimatedComp ref={AnimatedCompRef} width={v1} />
       <ForwardComp ref={ForwardCompRef} width={1} />
       <AnimatedForwardComp ref={AnimatedForwardCompRef} width={10} />
-      <Animated.Image
+      <AnimatedImage
         style={{transform: position.getTranslateTransform()}}
         source={{uri: 'https://picsum.photos/200'}}
       />
-      <Animated.View
+      <AnimatedView
         testID="expect-type-animated-view"
         style={{opacity: v1}}
         onLayout={event => {
@@ -197,7 +201,7 @@ function TestAnimatedAPI() {
         }}
       />
       ;
-      <Animated.FlatList
+      <AnimatedFlatList
         testID="expect-type-animated-flatlist"
         style={{opacity: v1}}
         data={[1] as ReadonlyArray<number>}
@@ -207,7 +211,7 @@ function TestAnimatedAPI() {
         }}
       />
       ;
-      <Animated.SectionList
+      <AnimatedSectionList
         testID="expect-type-animated-sectionlist"
         style={{opacity: v1}}
         sections={
@@ -230,7 +234,7 @@ function TestAnimatedAPI() {
       />
       ;
       {/* @ts-expect-error the transform object must contain only one key-value pair */}
-      <Animated.View style={{transform: [{scale: 1, translateX: 20}]}} />;
+      <AnimatedView style={{transform: [{scale: 1, translateX: 20}]}} />;
     </View>
   );
 }

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');
   },

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';