react-native-windows 0.0.0-canary.577 → 0.0.0-canary.579

package/.flowconfig

@@ -31,7 +31,6 @@
 <PROJECT_ROOT>/Libraries/NewAppScreen/components/ReloadInstructions.js
 <PROJECT_ROOT>/Libraries/Pressability/Pressability.js
 <PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
-<PROJECT_ROOT>/Libraries/Lists/VirtualizedListProps.js
 
 ; Ignore react-native files in node_modules since they are copied into project root
 .*/node_modules/react-native/.*
@@ -52,7 +51,7 @@
 <PROJECT_ROOT>/template/.*
 
 ; Ignore the Dangerfile
-<PROJECT_ROOT>/bots/dangerfile.js
+<PROJECT_ROOT>/packages/react-native-bots/dangerfile.js
 
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
@@ -68,7 +67,6 @@
 [include]
 ; Need to include hoisted modules
 ../node_modules/
-../packages/@react-native-windows/virtualized-list/
 
 [libs]
 interface.js
@@ -90,7 +88,6 @@ munge_underscores=true
 
 module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/index.windows.js'
 module.name_mapper='^react-native-windows$' -> '<PROJECT_ROOT>/index.windows.js'
-module.name_mapper='^@react-native-windows/virtualized-list$' -> '<PROJECT_ROOT>/../packages/@react-native-windows/virtualized-list/src/VirtualizedList.js'
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/\1'
 module.name_mapper='^react-native-windows/\(.*\)$' -> '<PROJECT_ROOT>/\1'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'
@@ -123,4 +120,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.186.0
+^0.187.1

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

package/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};

package/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);`

package/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,

package/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 */

package/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;

package/Libraries/Animated/NativeAnimatedHelper.js

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

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

package/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;

package/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;

package/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;

package/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;

package/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);
   };
-};
+}

package/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>,

package/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>,

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -9,22 +9,117 @@
  */
 
 import * as React from 'react';
+import {useMemo} from 'react';
 
-const ScrollView = require('../../Components/ScrollView/ScrollView');
-const createAnimatedComponent = require('../createAnimatedComponent');
+import RefreshControl from '../../Components/RefreshControl/RefreshControl';
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
+import Platform from '../../Utilities/Platform';
+import useMergeRefs from '../../Utilities/useMergeRefs';
+import createAnimatedComponent from '../createAnimatedComponent';
+import useAnimatedProps from '../useAnimatedProps';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
+type Props = React.ElementConfig<typeof ScrollView>;
+type Instance = React.ElementRef<typeof ScrollView>;
+
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
-const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
-  <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
-));
-
-module.exports = (createAnimatedComponent(
-  ScrollViewWithEventThrottle,
-): AnimatedComponentType<
-  React.ElementConfig<typeof ScrollView>,
-  React.ElementRef<typeof ScrollView>,
->);
+const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
+  React.forwardRef((props, forwardedRef) => {
+    // (Android only) When a ScrollView has a RefreshControl and
+    // any `style` property set with an Animated.Value, the CSS
+    // gets incorrectly applied twice. This is because ScrollView
+    // swaps the parent/child relationship of itself and the
+    // RefreshControl component (see ScrollView.js for more details).
+    if (
+      Platform.OS === 'android' &&
+      props.refreshControl != null &&
+      props.style != null
+    ) {
+      return (
+        <AnimatedScrollViewWithInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+          refreshControl={props.refreshControl}
+        />
+      );
+    } else {
+      return (
+        <AnimatedScrollViewWithoutInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+        />
+      );
+    }
+  });
+
+const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
+  (
+    props: {
+      ...React.ElementConfig<typeof ScrollView>,
+      // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
+      refreshControl: React.Element<any>,
+    },
+    forwardedRef,
+  ) => {
+    // Split `props` into the animate-able props for the parent (RefreshControl)
+    // and child (ScrollView).
+    const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
+      useMemo(() => {
+        const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
+        return {
+          intermediatePropsForRefreshControl: {style: outer},
+          intermediatePropsForScrollView: {...props, style: inner},
+        };
+      }, [props]);
+
+    // Handle animated props on `refreshControl`.
+    const [refreshControlAnimatedProps, refreshControlRef] = useAnimatedProps(
+      intermediatePropsForRefreshControl,
+    );
+    // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
+    // safely clobbered.
+    const refreshControl: React.Element<typeof RefreshControl> =
+      React.cloneElement(props.refreshControl, {
+        ...refreshControlAnimatedProps,
+        ref: refreshControlRef,
+      });
+
+    // Handle animated props on `NativeDirectionalScrollView`.
+    const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
+      Props,
+      Instance,
+    >(intermediatePropsForScrollView);
+    const ref = useMergeRefs<Instance | null>(scrollViewRef, forwardedRef);
+
+    return (
+      // $FlowFixMe[incompatible-use] Investigate useAnimatedProps return value
+      <ScrollView
+        {...scrollViewAnimatedProps}
+        ref={ref}
+        refreshControl={refreshControl}
+        // Because `refreshControl` is a clone of `props.refreshControl` with
+        // `refreshControlAnimatedProps` added, we need to pass ScrollView.js
+        // the combined styles since it also splits the outer/inner styles for
+        // its parent/child, respectively. Without this, the refreshControl
+        // styles would be ignored.
+        style={StyleSheet.compose(
+          scrollViewAnimatedProps.style,
+          refreshControlAnimatedProps.style,
+        )}
+      />
+    );
+  },
+);
+
+const AnimatedScrollViewWithoutInvertedRefreshControl =
+  createAnimatedComponent(ScrollView);
+
+export default AnimatedScrollView;

package/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>,

package/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>,