RN: Remove Animated -> ScrollView -> Animated Cycle

Reviewed By: sahrens

Differential Revision: D7027223

fbshipit-source-id: 59924fada0f29a5e2ce1ae9a3694a94cfb26367c

Libraries/Animated/src/Animated.js

@@ -6,30 +6,25 @@
  *
  * @providesModule Animated
  * @flow
+ * @format
  */
+
 'use strict';
 
-
-var AnimatedImplementation = require('AnimatedImplementation');
-var Image = require('Image');
-var Text = require('Text');
-var View = require('View');
-
-let AnimatedScrollView;
+const AnimatedImplementation = require('AnimatedImplementation');
+const Image = require('Image');
+const ScrollView = require('ScrollView');
+const Text = require('Text');
+const View = require('View');
 
 const Animated = {
   View: AnimatedImplementation.createAnimatedComponent(View),
   Text: AnimatedImplementation.createAnimatedComponent(Text),
   Image: AnimatedImplementation.createAnimatedComponent(Image),
-  get ScrollView() {
-    // Make this lazy to avoid circular reference.
-    if (!AnimatedScrollView) {
-      AnimatedScrollView = AnimatedImplementation.createAnimatedComponent(require('ScrollView'));
-    }
-    return AnimatedScrollView;
-  },
+  ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),
 };
 
 Object.assign((Animated: Object), AnimatedImplementation);
 
-module.exports = ((Animated: any): (typeof AnimatedImplementation) & typeof Animated);
+module.exports = ((Animated: any): typeof AnimatedImplementation &
+  typeof Animated);

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -16,6 +16,7 @@ jest
   .setMock('Text', ClassComponentMock)
   .setMock('View', ClassComponentMock)
   .setMock('Image', ClassComponentMock)
+  .setMock('ScrollView', ClassComponentMock)
   .setMock('React', {Component: class {}})
   .setMock('NativeModules', {
     NativeAnimatedModule: {},

Libraries/Components/ScrollView/ScrollView.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const Animated = require('Animated');
+const AnimatedImplementation = require('AnimatedImplementation');
 const ColorPropType = require('ColorPropType');
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const Platform = require('Platform');
@@ -497,7 +497,7 @@ const ScrollView = createReactClass({
 
   mixins: [ScrollResponder.Mixin],
 
-  _scrollAnimatedValue: (new Animated.Value(0): Animated.Value),
+  _scrollAnimatedValue: (new AnimatedImplementation.Value(0): AnimatedImplementation.Value),
   _scrollAnimatedValueAttachment: (null: ?{detach: () => void}),
   _stickyHeaderRefs: (new Map(): Map<number, ScrollViewStickyHeader>),
   _headerLayoutYs: (new Map(): Map<string, number>),
@@ -509,7 +509,7 @@ const ScrollView = createReactClass({
   },
 
   UNSAFE_componentWillMount: function() {
-    this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
+    this._scrollAnimatedValue = new AnimatedImplementation.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
     this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
     this._stickyHeaderRefs = new Map();
     this._headerLayoutYs = new Map();
@@ -623,7 +623,7 @@ const ScrollView = createReactClass({
       this._scrollAnimatedValueAttachment.detach();
     }
     if (this.props.stickyHeaderIndices && this.props.stickyHeaderIndices.length > 0) {
-      this._scrollAnimatedValueAttachment = Animated.attachNativeEvent(
+      this._scrollAnimatedValueAttachment = AnimatedImplementation.attachNativeEvent(
         this._scrollViewRef,
         'onScroll',
         [{nativeEvent: {contentOffset: {y: this._scrollAnimatedValue}}}]

Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -10,17 +10,20 @@
  */
 'use strict';
 
-const Animated = require('Animated');
+const AnimatedImplementation = require('AnimatedImplementation');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
+const View = require('View');
 
 import type {LayoutEvent} from 'CoreEventTypes';
 
+const AnimatedView = AnimatedImplementation.createAnimatedComponent(View);
+
 type Props = {
   children?: React.Element<any>,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
-  scrollAnimatedValue: Animated.Value,
+  scrollAnimatedValue: AnimatedImplementation.Value,
   // Will cause sticky headers to stick at the bottom of the ScrollView instead
   // of the top.
   inverted: ?boolean,
@@ -136,7 +139,7 @@ class ScrollViewStickyHeader extends React.Component<Props, State> {
     const child = React.Children.only(this.props.children);
 
     return (
-      <Animated.View
+      <AnimatedView
         collapsable={false}
         onLayout={this._onLayout}
         style={[child.props.style, styles.header, {transform: [{translateY}]}]}>
@@ -144,7 +147,7 @@ class ScrollViewStickyHeader extends React.Component<Props, State> {
           style: styles.fill, // We transfer the child style to the wrapper.
           onLayout: undefined, // we call this manually through our this._onLayout
         })}
-      </Animated.View>
+      </AnimatedView>
     );
   }
 }