refactor: Convert Animated directory to use ESModule imports/exports

Libraries/Animated/Animated.js

@@ -9,38 +9,26 @@
  */
 
 import Platform from '../Utilities/Platform';
-import typeof AnimatedFlatList from './components/AnimatedFlatList';
-import typeof AnimatedImage from './components/AnimatedImage';
-import typeof AnimatedScrollView from './components/AnimatedScrollView';
-import typeof AnimatedSectionList from './components/AnimatedSectionList';
-import typeof AnimatedText from './components/AnimatedText';
-import typeof AnimatedView from './components/AnimatedView';
+import AnimatedFlatList from './components/AnimatedFlatList';
+import AnimatedImage from './components/AnimatedImage';
+import AnimatedScrollView from './components/AnimatedScrollView';
+import AnimatedSectionList from './components/AnimatedSectionList';
+import AnimatedText from './components/AnimatedText';
+import 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);
 
 module.exports = {
-  get FlatList(): AnimatedFlatList {
-    return require('./components/AnimatedFlatList');
-  },
-  get Image(): AnimatedImage {
-    return require('./components/AnimatedImage');
-  },
-  get ScrollView(): AnimatedScrollView {
-    return require('./components/AnimatedScrollView');
-  },
-  get SectionList(): AnimatedSectionList {
-    return require('./components/AnimatedSectionList');
-  },
-  get Text(): AnimatedText {
-    return require('./components/AnimatedText');
-  },
-  get View(): AnimatedView {
-    return require('./components/AnimatedView');
-  },
+  FlatList: AnimatedFlatList,
+  Image: AnimatedImage,
+  ScrollView: AnimatedScrollView,
+  SectionList: AnimatedSectionList,
+  Text: AnimatedText,
+  View: AnimatedView,
   ...Animated,
 };

Libraries/Animated/AnimatedEvent.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
-const NativeAnimatedHelper = require('./NativeAnimatedHelper');
-const ReactNative = require('../Renderer/shims/ReactNative');
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+import * as NativeAnimatedHelper from './NativeAnimatedHelper';
+import ReactNative from '../Renderer/shims/ReactNative';
 
-const invariant = require('invariant');
+import invariant from 'invariant';
 
-const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
+import {shouldUseNativeDriver} from './NativeAnimatedHelper';
 
 import type {PlatformConfig} from './AnimatedPlatformConfig';
 
@@ -31,7 +31,7 @@ export type EventConfig = {
   platformConfig?: PlatformConfig,
 };
 
-function attachNativeEvent(
+export function attachNativeEvent(
   viewRef: any,
   eventName: string,
   argMapping: $ReadOnlyArray<?Mapping>,
@@ -146,7 +146,7 @@ function validateMapping(argMapping: $ReadOnlyArray<?Mapping>, args: any) {
   });
 }
 
-class AnimatedEvent {
+export class AnimatedEvent {
   _argMapping: $ReadOnlyArray<?Mapping>;
   _listeners: Array<Function> = [];
   _attachedEvent: ?{detach: () => void, ...};
@@ -257,5 +257,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');
-
-const createAnimatedComponent = require('./createAnimatedComponent');
+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';
+
+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

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import _bezier from './bezier';
+
 let ease;
 
 /**
@@ -214,7 +216,6 @@ const Easing = {
     x2: number,
     y2: number,
   ): (t: number) => number {
-    const _bezier = require('./bezier');
     return _bezier(x1, y1, x2, y2);
   },
 

Libraries/Animated/NativeAnimatedHelper.js

@@ -34,7 +34,7 @@ const NativeAnimatedModule =
 let __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
 let __nativeAnimationIdCount = 1; /* used for started animations */
 
-let nativeEventEmitter;
+let internalNativeEventEmitter;
 
 let waitingForQueuedOperations = new Set();
 let queueOperations = false;
@@ -91,7 +91,7 @@ const nativeOps: ?typeof NativeAnimatedModule = useSingleOpBatching
  * Wrappers around NativeAnimatedModule to provide flow and autocomplete support for
  * the native module methods, and automatic queue management on Android
  */
-const API = {
+export const API = {
   getValue: function (
     tag: number,
     saveValueCallback: (value: number) => void,
@@ -419,35 +419,35 @@ const SUPPORTED_INTERPOLATION_PARAMS = {
   extrapolateLeft: true,
 };
 
-function addWhitelistedStyleProp(prop: string): void {
+export function addWhitelistedStyleProp(prop: string): void {
   SUPPORTED_STYLES[prop] = true;
 }
 
-function addWhitelistedTransformProp(prop: string): void {
+export function addWhitelistedTransformProp(prop: string): void {
   SUPPORTED_TRANSFORMS[prop] = true;
 }
 
-function addWhitelistedInterpolationParam(param: string): void {
+export function addWhitelistedInterpolationParam(param: string): void {
   SUPPORTED_INTERPOLATION_PARAMS[param] = true;
 }
 
-function isSupportedColorStyleProp(prop: string): boolean {
+export function isSupportedColorStyleProp(prop: string): boolean {
   return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
 }
 
-function isSupportedStyleProp(prop: string): boolean {
+export function isSupportedStyleProp(prop: string): boolean {
   return SUPPORTED_STYLES.hasOwnProperty(prop);
 }
 
-function isSupportedTransformProp(prop: string): boolean {
+export function isSupportedTransformProp(prop: string): boolean {
   return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
 }
 
-function isSupportedInterpolationParam(param: string): boolean {
+export function isSupportedInterpolationParam(param: string): boolean {
   return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
 }
 
-function validateTransform(
+export function validateTransform(
   configs: Array<
     | {
         type: 'animated',
@@ -472,7 +472,7 @@ function validateTransform(
   });
 }
 
-function validateStyles(styles: {[key: string]: ?number, ...}): void {
+export function validateStyles(styles: {[key: string]: ?number, ...}): void {
   for (const key in styles) {
     if (!isSupportedStyleProp(key)) {
       throw new Error(
@@ -482,7 +482,7 @@ function validateStyles(styles: {[key: string]: ?number, ...}): void {
   }
 }
 
-function validateInterpolation<OutputT: number | string>(
+export function validateInterpolation<OutputT: number | string>(
   config: InterpolationConfigType<OutputT>,
 ): void {
   for (const key in config) {
@@ -494,21 +494,21 @@ function validateInterpolation<OutputT: number | string>(
   }
 }
 
-function generateNewNodeTag(): number {
+export function generateNewNodeTag(): number {
   return __nativeAnimatedNodeTagCount++;
 }
 
-function generateNewAnimationId(): number {
+export function generateNewAnimationId(): number {
   return __nativeAnimationIdCount++;
 }
 
-function assertNativeAnimatedModule(): void {
+export function assertNativeAnimatedModule(): void {
   invariant(NativeAnimatedModule, 'Native animated module is not available');
 }
 
 let _warnedMissingNativeAnimated = false;
 
-function shouldUseNativeDriver(
+export function shouldUseNativeDriver(
   config: $ReadOnly<{...AnimationConfig, ...}> | EventConfig,
 ): boolean {
   if (config.useNativeDriver == null) {
@@ -535,7 +535,7 @@ function shouldUseNativeDriver(
   return config.useNativeDriver || false;
 }
 
-function transformDataType(value: number | string): number | string {
+export function transformDataType(value: number | string): number | string {
   // Change the string type to number type so we can reuse the same logic in
   // iOS and Android platform
   if (typeof value !== 'string') {
@@ -550,33 +550,14 @@ function transformDataType(value: number | string): number | string {
   }
 }
 
-module.exports = {
-  API,
-  isSupportedColorStyleProp,
-  isSupportedStyleProp,
-  isSupportedTransformProp,
-  isSupportedInterpolationParam,
-  addWhitelistedStyleProp,
-  addWhitelistedTransformProp,
-  addWhitelistedInterpolationParam,
-  validateStyles,
-  validateTransform,
-  validateInterpolation,
-  generateNewNodeTag,
-  generateNewAnimationId,
-  assertNativeAnimatedModule,
-  shouldUseNativeDriver,
-  transformDataType,
-  // $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppresion
-  // $FlowExpectedError[missing-type-arg] - unsafe getter lint suppresion
-  get nativeEventEmitter(): NativeEventEmitter {
-    if (!nativeEventEmitter) {
-      nativeEventEmitter = new NativeEventEmitter(
-        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
-        // If you want to use the native module on other platforms, please remove this condition and test its behavior
-        Platform.OS !== 'ios' ? null : NativeAnimatedModule,
-      );
-    }
-    return nativeEventEmitter;
-  },
-};
+// $FlowExpectedError[missing-type-arg] - unsafe getter lint suppresion
+export function nativeEventEmitter(): NativeEventEmitter {
+  if (!internalNativeEventEmitter) {
+    internalNativeEventEmitter = new NativeEventEmitter(
+      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+      // If you want to use the native module on other platforms, please remove this condition and test its behavior
+      Platform.OS !== 'ios' ? null : NativeAnimatedModule,
+    );
+  }
+  return internalNativeEventEmitter;
+}

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