refactor: Convert Animated directory to use ESModule imports/exports (#34539)

Summary:
This PR refactors the Animated directory to use ESModule imports/exports instead of using a mixture of the 2 module formats, as requested on https://github.com/facebook/react-native/issues/34425.

## Changelog

[Internal] [Changed] - Convert all files in the Animated directory to use ESModule imports/exports

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

Test Plan: This doesn't really add or modify any existing features so checking if CI passes should be enough

Reviewed By: yungsters

Differential Revision: D39235720

Pulled By: yungsters

fbshipit-source-id: 84b4c0a71dc9fca1ab7053263f1cf7c336df58c1

Libraries/Animated/Animated.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+export type {CompositeAnimation, Numeric} from './AnimatedImplementation';
+
 import Platform from '../Utilities/Platform';
 import typeof AnimatedFlatList from './components/AnimatedFlatList';
 import typeof AnimatedImage from './components/AnimatedImage';
@@ -16,31 +18,31 @@ import typeof AnimatedSectionList from './components/AnimatedSectionList';
 import typeof AnimatedText from './components/AnimatedText';
 import typeof AnimatedView from './components/AnimatedView';
 
-import * as AnimatedMock from './AnimatedMock';
-import * as AnimatedImplementation from './AnimatedImplementation';
+import AnimatedMock from './AnimatedMock';
+import AnimatedImplementation from './AnimatedImplementation';
 
 const Animated = ((Platform.isTesting
   ? AnimatedMock
-  : AnimatedImplementation): typeof AnimatedMock);
+  : AnimatedImplementation): typeof AnimatedImplementation);
 
-module.exports = {
+export default {
   get FlatList(): AnimatedFlatList {
-    return require('./components/AnimatedFlatList');
+    return require('./components/AnimatedFlatList').default;
   },
   get Image(): AnimatedImage {
-    return require('./components/AnimatedImage');
+    return require('./components/AnimatedImage').default;
   },
   get ScrollView(): AnimatedScrollView {
-    return require('./components/AnimatedScrollView');
+    return require('./components/AnimatedScrollView').default;
   },
   get SectionList(): AnimatedSectionList {
-    return require('./components/AnimatedSectionList');
+    return require('./components/AnimatedSectionList').default;
   },
   get Text(): AnimatedText {
-    return require('./components/AnimatedText');
+    return require('./components/AnimatedText').default;
   },
   get View(): AnimatedView {
-    return require('./components/AnimatedView');
+    return require('./components/AnimatedView').default;
   },
   ...Animated,
 };

Libraries/Animated/AnimatedEvent.js

@@ -10,14 +10,12 @@
 
 'use strict';
 
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
-const NativeAnimatedHelper = require('./NativeAnimatedHelper');
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {findNodeHandle} from '../ReactNative/RendererProxy';
 
-const invariant = require('invariant');
-
-const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
+import invariant from 'invariant';
 
 import type {PlatformConfig} from './AnimatedPlatformConfig';
 
@@ -31,7 +29,7 @@ export type EventConfig = {
   platformConfig?: PlatformConfig,
 };
 
-function attachNativeEvent(
+export function attachNativeEvent(
   viewRef: any,
   eventName: string,
   argMapping: $ReadOnlyArray<?Mapping>,
@@ -146,7 +144,7 @@ function validateMapping(argMapping: $ReadOnlyArray<?Mapping>, args: any) {
   });
 }
 
-class AnimatedEvent {
+export class AnimatedEvent {
   _argMapping: $ReadOnlyArray<?Mapping>;
   _listeners: Array<Function> = [];
   _attachedEvent: ?{detach: () => void, ...};
@@ -165,7 +163,7 @@ class AnimatedEvent {
       this.__addListener(config.listener);
     }
     this._attachedEvent = null;
-    this.__isNative = shouldUseNativeDriver(config);
+    this.__isNative = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this.__platformConfig = config.platformConfig;
   }
 
@@ -257,5 +255,3 @@ class AnimatedEvent {
     this._listeners.forEach(listener => listener(...args));
   };
 }
-
-module.exports = {AnimatedEvent, attachNativeEvent};

Libraries/Animated/AnimatedImplementation.js

@@ -10,23 +10,23 @@
 
 'use strict';
 
-const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
-const AnimatedAddition = require('./nodes/AnimatedAddition');
-const AnimatedDiffClamp = require('./nodes/AnimatedDiffClamp');
-const AnimatedDivision = require('./nodes/AnimatedDivision');
-const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
-const AnimatedModulo = require('./nodes/AnimatedModulo');
-const AnimatedMultiplication = require('./nodes/AnimatedMultiplication');
-const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedSubtraction = require('./nodes/AnimatedSubtraction');
-const AnimatedTracking = require('./nodes/AnimatedTracking');
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
-const DecayAnimation = require('./animations/DecayAnimation');
-const SpringAnimation = require('./animations/SpringAnimation');
-const TimingAnimation = require('./animations/TimingAnimation');
+import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import AnimatedAddition from './nodes/AnimatedAddition';
+import AnimatedDiffClamp from './nodes/AnimatedDiffClamp';
+import AnimatedDivision from './nodes/AnimatedDivision';
+import AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import AnimatedModulo from './nodes/AnimatedModulo';
+import AnimatedMultiplication from './nodes/AnimatedMultiplication';
+import AnimatedNode from './nodes/AnimatedNode';
+import AnimatedSubtraction from './nodes/AnimatedSubtraction';
+import AnimatedTracking from './nodes/AnimatedTracking';
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+import DecayAnimation from './animations/DecayAnimation';
+import SpringAnimation from './animations/SpringAnimation';
+import TimingAnimation from './animations/TimingAnimation';
 
-const createAnimatedComponent = require('./createAnimatedComponent');
+import createAnimatedComponent from './createAnimatedComponent';
 
 import type {
   AnimationConfig,
@@ -575,7 +575,7 @@ export type {AnimatedNumeric as Numeric};
  *
  * See https://reactnative.dev/docs/animated
  */
-module.exports = {
+export default {
   /**
    * Standard value class for driving animations.  Typically initialized with
    * `new Animated.Value(0);`

Libraries/Animated/AnimatedMock.js

@@ -12,14 +12,14 @@
 
 import type {EndResult} from './animations/Animation';
 
-const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
-const AnimatedImplementation = require('./AnimatedImplementation');
-const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
-const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
+import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import AnimatedImplementation from './AnimatedImplementation';
+import AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import AnimatedNode from './nodes/AnimatedNode';
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
 
-const createAnimatedComponent = require('./createAnimatedComponent');
+import createAnimatedComponent from './createAnimatedComponent';
 
 import type {EndCallback} from './animations/Animation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
@@ -168,7 +168,7 @@ const loop = function (
 
 export type {AnimatedNumeric as Numeric};
 
-module.exports = {
+export default {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
   Color: AnimatedColor,

Libraries/Animated/AnimatedWeb.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const AnimatedImplementation = require('./AnimatedImplementation');
+import AnimatedImplementation from './AnimatedImplementation';
 
-module.exports = {
+export default {
   ...AnimatedImplementation,
   /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
    * types. Plain intrinsic components can't be typed like this */

Libraries/Animated/Easing.js

@@ -214,7 +214,7 @@ const Easing = {
     x2: number,
     y2: number,
   ): (t: number) => number {
-    const _bezier = require('./bezier');
+    const _bezier = require('./bezier').default;
     return _bezier(x1, y1, x2, y2);
   },
 
@@ -247,4 +247,4 @@ const Easing = {
   },
 };
 
-module.exports = Easing;
+export default Easing;

Libraries/Animated/NativeAnimatedHelper.js

@@ -550,7 +550,7 @@ function transformDataType(value: number | string): number | string {
   }
 }
 
-module.exports = {
+export default {
   API,
   isSupportedColorStyleProp,
   isSupportedStyleProp,

Libraries/Animated/SpringConfig.js

@@ -24,7 +24,7 @@ function dampingFromOrigamiValue(oValue: number) {
   return (oValue - 8) * 3 + 25;
 }
 
-function fromOrigamiTensionAndFriction(
+export function fromOrigamiTensionAndFriction(
   tension: number,
   friction: number,
 ): SpringConfigType {
@@ -34,7 +34,7 @@ function fromOrigamiTensionAndFriction(
   };
 }
 
-function fromBouncinessAndSpeed(
+export function fromBouncinessAndSpeed(
   bounciness: number,
   speed: number,
 ): SpringConfigType {
@@ -96,8 +96,3 @@ function fromBouncinessAndSpeed(
     damping: dampingFromOrigamiValue(bouncyFriction),
   };
 }
-
-module.exports = {
-  fromOrigamiTensionAndFriction,
-  fromBouncinessAndSpeed,
-};

Libraries/Animated/__tests__/Animated-test.js

@@ -8,7 +8,6 @@
  * @oncall react_native
  */
 
-import AnimatedProps from '../nodes/AnimatedProps';
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';
 
@@ -21,7 +20,8 @@ jest.mock('../../BatchedBridge/NativeModules', () => ({
   },
 }));
 
-let Animated = require('../Animated');
+let AnimatedProps = require('../nodes/AnimatedProps').default;
+let Animated = require('../Animated').default;
 
 describe('Animated tests', () => {
   beforeEach(() => {
@@ -692,7 +692,7 @@ describe('Animated tests', () => {
 
     beforeEach(() => {
       jest.mock('../../Interaction/InteractionManager');
-      Animated = require('../Animated');
+      Animated = require('../Animated').default;
       InteractionManager = require('../../Interaction/InteractionManager');
     });
 

Libraries/Animated/__tests__/AnimatedMock-test.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const AnimatedMock = require('../AnimatedMock');
-const AnimatedImplementation = require('../AnimatedImplementation');
+import AnimatedMock from '../AnimatedMock';
+import AnimatedImplementation from '../AnimatedImplementation';
 
 describe('Animated Mock', () => {
   it('matches implementation keys', () => {

Libraries/Animated/__tests__/AnimatedNative-test.js

@@ -26,8 +26,8 @@ jest
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';
 
-const Animated = require('../Animated');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+const Animated = require('../Animated').default;
+const NativeAnimatedHelper = require('../NativeAnimatedHelper').default;
 
 describe('Native Animated', () => {
   const NativeAnimatedModule = require('../NativeAnimatedModule').default;

Libraries/Animated/__tests__/Easing-test.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const Easing = require('../Easing');
+import Easing from '../Easing';
 describe('Easing', () => {
   it('should work with linear', () => {
     const easing = Easing.linear;

Libraries/Animated/__tests__/Interpolation-test.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const AnimatedInterpolation = require('../nodes/AnimatedInterpolation');
-const Easing = require('../Easing');
+import AnimatedInterpolation from '../nodes/AnimatedInterpolation';
+import Easing from '../Easing';
 
 describe('Interpolation', () => {
   it('should work with defaults', () => {

Libraries/Animated/__tests__/TimingAnimation-test.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const TimingAnimation = require('../animations/TimingAnimation');
+import TimingAnimation from '../animations/TimingAnimation';
 
 describe('Timing Animation', () => {
   it('should return array of 61 items', () => {

Libraries/Animated/__tests__/bezier-test.js

@@ -17,7 +17,7 @@
 
 'use strict';
 
-const bezier = require('../bezier');
+import bezier from '../bezier';
 
 const identity = function (x: number) {
   return x;

Libraries/Animated/__tests__/createAnimatedComponentInjection-test.js

@@ -11,9 +11,9 @@
 
 'use strict';
 
-const createAnimatedComponent = require('../createAnimatedComponent');
+const createAnimatedComponent = require('../createAnimatedComponent').default;
 const createAnimatedComponentInjection = require('../createAnimatedComponentInjection');
-const React = require('react');
+import * as React from 'react';
 
 function injected<TProps: {...}, TInstance>(
   Component: React.AbstractComponent<TProps, TInstance>,

Libraries/Animated/animations/Animation.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
@@ -30,7 +30,7 @@ let startNativeAnimationNextId = 1;
 // Important note: start() and stop() will only be called at most once.
 // Once an animation has been stopped or finished its course, it will
 // not be reused.
-class Animation {
+export default class Animation {
   __active: boolean;
   __isInteraction: boolean;
   __nativeId: number;
@@ -85,5 +85,3 @@ class Animation {
     }
   }
 }
-
-module.exports = Animation;

Libraries/Animated/animations/DecayAnimation.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const Animation = require('./Animation');
+import Animation from './Animation';
 
-const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedValue from '../nodes/AnimatedValue';
@@ -36,7 +36,7 @@ export type DecayAnimationConfigSingle = {
   deceleration?: number,
 };
 
-class DecayAnimation extends Animation {
+export default class DecayAnimation extends Animation {
   _startTime: number;
   _lastValue: number;
   _fromValue: number;
@@ -51,7 +51,7 @@ class DecayAnimation extends Animation {
     super();
     this._deceleration = config.deceleration ?? 0.998;
     this._velocity = config.velocity;
-    this._useNativeDriver = shouldUseNativeDriver(config);
+    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
     this.__iterations = config.iterations ?? 1;
@@ -123,5 +123,3 @@ class DecayAnimation extends Animation {
     this.__debouncedOnEnd({finished: false});
   }
 }
-
-module.exports = DecayAnimation;

Libraries/Animated/animations/SpringAnimation.js

@@ -14,12 +14,12 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
 
-const Animation = require('./Animation');
-const SpringConfig = require('../SpringConfig');
+import Animation from './Animation';
+import * as SpringConfig from '../SpringConfig';
 
-const invariant = require('invariant');
+import invariant from 'invariant';
 
-const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
@@ -83,7 +83,7 @@ export type SpringAnimationConfigSingle = {
   delay?: number,
 };
 
-class SpringAnimation extends Animation {
+export default class SpringAnimation extends Animation {
   _overshootClamping: boolean;
   _restDisplacementThreshold: number;
   _restSpeedThreshold: number;
@@ -116,7 +116,7 @@ class SpringAnimation extends Animation {
     this._lastVelocity = config.velocity ?? 0;
     this._toValue = config.toValue;
     this._delay = config.delay ?? 0;
-    this._useNativeDriver = shouldUseNativeDriver(config);
+    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
     this.__iterations = config.iterations ?? 1;
@@ -372,5 +372,3 @@ class SpringAnimation extends Animation {
     this.__debouncedOnEnd({finished: false});
   }
 }
-
-module.exports = SpringAnimation;

Libraries/Animated/animations/TimingAnimation.js

@@ -14,9 +14,9 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
 
-const Animation = require('./Animation');
+import Animation from './Animation';
 
-const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
@@ -54,13 +54,13 @@ export type TimingAnimationConfigSingle = $ReadOnly<{
 let _easeInOut;
 function easeInOut() {
   if (!_easeInOut) {
-    const Easing = require('../Easing');
+    const Easing = require('../Easing').default;
     _easeInOut = Easing.inOut(Easing.ease);
   }
   return _easeInOut;
 }
 
-class TimingAnimation extends Animation {
+export default class TimingAnimation extends Animation {
   _startTime: number;
   _fromValue: number;
   _toValue: number;
@@ -80,7 +80,7 @@ class TimingAnimation extends Animation {
     this._duration = config.duration ?? 500;
     this._delay = config.delay ?? 0;
     this.__iterations = config.iterations ?? 1;
-    this._useNativeDriver = shouldUseNativeDriver(config);
+    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
   }
@@ -173,5 +173,3 @@ class TimingAnimation extends Animation {
     this.__debouncedOnEnd({finished: false});
   }
 }
-
-module.exports = TimingAnimation;

Libraries/Animated/bezier.js

@@ -92,7 +92,7 @@ function newtonRaphsonIterate(
   return aGuessT;
 }
 
-module.exports = function bezier(
+export default function bezier(
   mX1: number,
   mY1: number,
   mX2: number,
@@ -161,4 +161,4 @@ module.exports = function bezier(
     }
     return calcBezier(getTForX(x), mY1, mY2);
   };
-};
+}

Libraries/Animated/components/AnimatedFlatList.js

@@ -10,8 +10,8 @@
 
 import * as React from 'react';
 
-const FlatList = require('../../Lists/FlatList');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import FlatList from '../../Lists/FlatList';
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
@@ -22,7 +22,7 @@ const FlatListWithEventThrottle = React.forwardRef((props, ref) => (
   <FlatList scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(
+export default (createAnimatedComponent(
   FlatListWithEventThrottle,
 ): AnimatedComponentType<
   React.ElementConfig<typeof FlatList>,

Libraries/Animated/components/AnimatedImage.js

@@ -10,12 +10,12 @@
 
 import * as React from 'react';
 
-const Image = require('../../Image/Image');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import Image from '../../Image/Image';
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
+export default (createAnimatedComponent(
   (Image: $FlowFixMe),
 ): AnimatedComponentType<
   React.ElementConfig<typeof Image>,

Libraries/Animated/components/AnimatedScrollView.js

@@ -10,8 +10,8 @@
 
 import * as React from 'react';
 
-const ScrollView = require('../../Components/ScrollView/ScrollView');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
@@ -22,7 +22,7 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(
+export default (createAnimatedComponent(
   ScrollViewWithEventThrottle,
 ): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,

Libraries/Animated/components/AnimatedSectionList.js

@@ -11,7 +11,7 @@
 import * as React from 'react';
 
 import SectionList from '../../Lists/SectionList';
-const createAnimatedComponent = require('../createAnimatedComponent');
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
@@ -22,7 +22,7 @@ const SectionListWithEventThrottle = React.forwardRef((props, ref) => (
   <SectionList scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(
+export default (createAnimatedComponent(
   SectionListWithEventThrottle,
 ): AnimatedComponentType<
   React.ElementConfig<typeof SectionList>,

Libraries/Animated/components/AnimatedText.js

@@ -10,12 +10,12 @@
 
 import * as React from 'react';
 
-const Text = require('../../Text/Text');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import Text from '../../Text/Text';
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
+export default (createAnimatedComponent(
   (Text: $FlowFixMe),
 ): AnimatedComponentType<
   React.ElementConfig<typeof Text>,

Libraries/Animated/components/AnimatedView.js

@@ -10,12 +10,12 @@
 
 import * as React from 'react';
 
-const View = require('../../Components/View/View');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import View from '../../Components/View/View';
+import createAnimatedComponent from '../createAnimatedComponent';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View): AnimatedComponentType<
+export default (createAnimatedComponent(View): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);

Libraries/Animated/createAnimatedComponent.js

@@ -12,14 +12,14 @@
 
 import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
 
-const View = require('../Components/View/View');
-const {AnimatedEvent} = require('./AnimatedEvent');
-const AnimatedProps = require('./nodes/AnimatedProps');
-const React = require('react');
-const NativeAnimatedHelper = require('./NativeAnimatedHelper');
+import View from '../Components/View/View';
+import {AnimatedEvent} from './AnimatedEvent';
+import AnimatedProps from './nodes/AnimatedProps';
+import * as React from 'react';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
 
-const invariant = require('invariant');
-const setAndForwardRef = require('../Utilities/setAndForwardRef');
+import invariant from 'invariant';
+import setAndForwardRef from '../Utilities/setAndForwardRef';
 
 let animatedComponentNextId = 1;
 
@@ -277,5 +277,5 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
 }
 
 // $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
-module.exports = (createAnimatedComponentInjection.recordAndRetrieve() ??
+export default (createAnimatedComponentInjection.recordAndRetrieve() ??
   createAnimatedComponent: typeof createAnimatedComponent);

Libraries/Animated/nodes/AnimatedAddition.js

@@ -12,14 +12,14 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 
-class AnimatedAddition extends AnimatedWithChildren {
+export default class AnimatedAddition extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
@@ -63,5 +63,3 @@ class AnimatedAddition extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedAddition;

Libraries/Animated/nodes/AnimatedDiffClamp.js

@@ -12,13 +12,13 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedDiffClamp extends AnimatedWithChildren {
+export default class AnimatedDiffClamp extends AnimatedWithChildren {
   _a: AnimatedNode;
   _min: number;
   _max: number;
@@ -71,5 +71,3 @@ class AnimatedDiffClamp extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedDiffClamp;

Libraries/Animated/nodes/AnimatedDivision.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedNode from './AnimatedNode';
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedDivision extends AnimatedWithChildren {
+export default class AnimatedDivision extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
   _warnedAboutDivideByZero: boolean = false;
@@ -78,5 +78,3 @@ class AnimatedDivision extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedDivision;

Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -14,11 +14,11 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedWithChildren = require('./AnimatedWithChildren');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import AnimatedWithChildren from './AnimatedWithChildren';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
-const invariant = require('invariant');
-const normalizeColor = require('../../StyleSheet/normalizeColor');
+import invariant from 'invariant';
+import normalizeColor from '../../StyleSheet/normalizeColor';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
@@ -300,7 +300,7 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
   );
 }
 
-class AnimatedInterpolation<
+export default class AnimatedInterpolation<
   OutputT: number | string,
 > extends AnimatedWithChildren {
   // Export for testing.
@@ -369,5 +369,3 @@ class AnimatedInterpolation<
     };
   }
 }
-
-module.exports = AnimatedInterpolation;

Libraries/Animated/nodes/AnimatedModulo.js

@@ -12,13 +12,13 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedModulo extends AnimatedWithChildren {
+export default class AnimatedModulo extends AnimatedWithChildren {
   _a: AnimatedNode;
   _modulus: number;
 
@@ -62,5 +62,3 @@ class AnimatedModulo extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedModulo;

Libraries/Animated/nodes/AnimatedMultiplication.js

@@ -12,14 +12,14 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedMultiplication extends AnimatedWithChildren {
+export default class AnimatedMultiplication extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
@@ -62,5 +62,3 @@ class AnimatedMultiplication extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedMultiplication;

Libraries/Animated/nodes/AnimatedNode.js

@@ -10,20 +10,21 @@
 
 'use strict';
 
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
-const NativeAnimatedAPI = NativeAnimatedHelper.API;
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+const NativeAnimatedAPI = NativeAnimatedHelper.API;
+
 type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
 let _uniqueId = 1;
 
 // Note(vjeux): this would be better as an interface but flow doesn't
 // support them yet
-class AnimatedNode {
+export default class AnimatedNode {
   _listeners: {[key: string]: ValueListenerCallback, ...};
   _platformConfig: ?PlatformConfig;
   __nativeAnimatedValueListener: ?any;
@@ -193,5 +194,3 @@ class AnimatedNode {
     this._platformConfig = platformConfig;
   }
 }
-
-module.exports = AnimatedNode;

Libraries/Animated/nodes/AnimatedProps.js

@@ -12,14 +12,15 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const {findNodeHandle} = require('../../ReactNative/RendererProxy');
-const {AnimatedEvent} = require('../AnimatedEvent');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedStyle = require('./AnimatedStyle');
-const invariant = require('invariant');
+import {AnimatedEvent} from '../AnimatedEvent';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import invariant from 'invariant';
 
-class AnimatedProps extends AnimatedNode {
+import AnimatedNode from './AnimatedNode';
+import AnimatedStyle from './AnimatedStyle';
+
+export default class AnimatedProps extends AnimatedNode {
   _props: Object;
   _animatedView: any;
   _callback: () => void;
@@ -183,5 +184,3 @@ class AnimatedProps extends AnimatedNode {
     };
   }
 }
-
-module.exports = AnimatedProps;

Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,13 +12,13 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const flattenStyle = require('../../StyleSheet/flattenStyle');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedTransform = require('./AnimatedTransform');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedTransform from './AnimatedTransform';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
-class AnimatedStyle extends AnimatedWithChildren {
+export default class AnimatedStyle extends AnimatedWithChildren {
   _style: Object;
 
   constructor(style: any) {
@@ -131,5 +131,3 @@ class AnimatedStyle extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedStyle;

Libraries/Animated/nodes/AnimatedSubtraction.js

@@ -12,14 +12,14 @@
 
 import type AnimatedNode from './AnimatedNode';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedSubtraction extends AnimatedWithChildren {
+export default class AnimatedSubtraction extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
@@ -63,5 +63,3 @@ class AnimatedSubtraction extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedSubtraction;

Libraries/Animated/nodes/AnimatedTracking.js

@@ -12,16 +12,13 @@
 
 import type AnimatedValue from './AnimatedValue';
 
-const AnimatedNode = require('./AnimatedNode');
-const {
-  generateNewAnimationId,
-  shouldUseNativeDriver,
-} = require('../NativeAnimatedHelper');
+import AnimatedNode from './AnimatedNode';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
 
-class AnimatedTracking extends AnimatedNode {
+export default class AnimatedTracking extends AnimatedNode {
   _value: AnimatedValue;
   _parent: AnimatedNode;
   _callback: ?EndCallback;
@@ -41,7 +38,8 @@ class AnimatedTracking extends AnimatedNode {
     this._parent = parent;
     this._animationClass = animationClass;
     this._animationConfig = animationConfig;
-    this._useNativeDriver = shouldUseNativeDriver(animationConfig);
+    this._useNativeDriver =
+      NativeAnimatedHelper.shouldUseNativeDriver(animationConfig);
     this._callback = callback;
     this.__attach();
   }
@@ -94,12 +92,10 @@ class AnimatedTracking extends AnimatedNode {
     const animationConfig = animation.__getNativeAnimationConfig();
     return {
       type: 'tracking',
-      animationId: generateNewAnimationId(),
+      animationId: NativeAnimatedHelper.generateNewAnimationId(),
       animationConfig,
       toValue: this._parent.__getNativeTag(),
       value: this._value.__getNativeTag(),
     };
   }
 }
-
-module.exports = AnimatedTracking;

Libraries/Animated/nodes/AnimatedTransform.js

@@ -12,11 +12,11 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
-class AnimatedTransform extends AnimatedWithChildren {
+export default class AnimatedTransform extends AnimatedWithChildren {
   _transforms: $ReadOnlyArray<Object>;
 
   constructor(transforms: $ReadOnlyArray<Object>) {
@@ -119,5 +119,3 @@ class AnimatedTransform extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedTransform;

Libraries/Animated/nodes/AnimatedValue.js

@@ -10,10 +10,10 @@
 
 'use strict';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
-const InteractionManager = require('../../Interaction/InteractionManager');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedWithChildren from './AnimatedWithChildren';
+import InteractionManager from '../../Interaction/InteractionManager';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type AnimatedNode from './AnimatedNode';
 import type Animation, {EndCallback} from '../animations/Animation';
@@ -84,7 +84,7 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  *
  * See https://reactnative.dev/docs/animatedvalue
  */
-class AnimatedValue extends AnimatedWithChildren {
+export default class AnimatedValue extends AnimatedWithChildren {
   _value: number;
   _startingValue: number;
   _offset: number;
@@ -304,5 +304,3 @@ class AnimatedValue extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedValue;

Libraries/Animated/nodes/AnimatedValueXY.js

@@ -12,10 +12,10 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 export type AnimatedValueXYConfig = $ReadOnly<{
   useNativeDriver: boolean,
@@ -34,7 +34,7 @@ let _uniqueId = 1;
  *
  * See https://reactnative.dev/docs/animatedvaluexy
  */
-class AnimatedValueXY extends AnimatedWithChildren {
+export default class AnimatedValueXY extends AnimatedWithChildren {
   x: AnimatedValue;
   y: AnimatedValue;
   _listeners: {
@@ -249,5 +249,3 @@ class AnimatedValueXY extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 }
-
-module.exports = AnimatedValueXY;

Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -11,10 +11,10 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
-const AnimatedNode = require('./AnimatedNode');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import AnimatedNode from './AnimatedNode';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
-class AnimatedWithChildren extends AnimatedNode {
+export default class AnimatedWithChildren extends AnimatedNode {
   _children: Array<AnimatedNode>;
 
   constructor() {
@@ -85,5 +85,3 @@ class AnimatedWithChildren extends AnimatedNode {
     }
   }
 }
-
-module.exports = AnimatedWithChildren;

index.js

@@ -47,6 +47,7 @@ import typeof VirtualizedSectionList from './Libraries/Lists/VirtualizedSectionL
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';
 import typeof Alert from './Libraries/Alert/Alert';
 import typeof Animated from './Libraries/Animated/Animated';
+import typeof * as AnimatedModule from './Libraries/Animated/Animated';
 import typeof Appearance from './Libraries/Utilities/Appearance';
 import typeof AppRegistry from './Libraries/ReactNative/AppRegistry';
 import typeof AppState from './Libraries/AppState/AppState';
@@ -235,8 +236,11 @@ module.exports = {
   get Alert(): Alert {
     return require('./Libraries/Alert/Alert');
   },
-  get Animated(): Animated {
-    return require('./Libraries/Animated/Animated');
+  // Include any types exported in the Animated module together with its default export, so
+  // you can references types such as Animated.Numeric
+  get Animated(): {...$Diff<AnimatedModule, {default: any}>, ...Animated} {
+    // $FlowExpectedError[prop-missing]: we only return the default export, all other exports are types
+    return require('./Libraries/Animated/Animated').default;
   },
   get Appearance(): Appearance {
     return require('./Libraries/Utilities/Appearance');
@@ -279,7 +283,7 @@ module.exports = {
     return require('./Libraries/Utilities/Dimensions');
   },
   get Easing(): Easing {
-    return require('./Libraries/Animated/Easing');
+    return require('./Libraries/Animated/Easing').default;
   },
   get findNodeHandle(): $PropertyType<ReactNative, 'findNodeHandle'> {
     return require('./Libraries/ReactNative/RendererProxy').findNodeHandle;