From 8c036ce090529dee3d44c23edf2dd965284e3df7 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Tue, 20 Feb 2018 20:13:22 -0800 Subject: [PATCH] RN: Remove Animated -> ScrollView -> Animated Cycle Reviewed By: sahrens Differential Revision: D7027223 fbshipit-source-id: 59924fada0f29a5e2ce1ae9a3694a94cfb26367c --- Libraries/Animated/src/Animated.js | 25 ++++++++----------- .../src/__tests__/AnimatedNative-test.js | 1 + Libraries/Components/ScrollView/ScrollView.js | 8 +++--- .../ScrollView/ScrollViewStickyHeader.js | 11 +++++--- 4 files changed, 22 insertions(+), 23 deletions(-) diff --git a/Libraries/Animated/src/Animated.js b/Libraries/Animated/src/Animated.js index cfe2be068..32ec9ff80 100644 --- a/Libraries/Animated/src/Animated.js +++ b/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); diff --git a/Libraries/Animated/src/__tests__/AnimatedNative-test.js b/Libraries/Animated/src/__tests__/AnimatedNative-test.js index 77306dd8f..1c6700e4d 100644 --- a/Libraries/Animated/src/__tests__/AnimatedNative-test.js +++ b/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: {}, diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 354fd952b..5d0d007fe 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/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), _headerLayoutYs: (new Map(): Map), @@ -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}}}] diff --git a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index 597bbbb43..af9dc9b8b 100644 --- a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/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, 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 { const child = React.Children.only(this.props.children); return ( - @@ -144,7 +147,7 @@ class ScrollViewStickyHeader extends React.Component { style: styles.fill, // We transfer the child style to the wrapper. onLayout: undefined, // we call this manually through our this._onLayout })} - + ); } }