native animated scroll event support

Reviewed By: yungsters

Differential Revision: D4648383

fbshipit-source-id: fdb8e2deaa06b2d2f9002cee2c0b827dbd7a5570

Examples/UIExplorer/js/FlatListExample.js

@@ -26,6 +26,7 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
+  Animated,
   FlatList,
   StyleSheet,
   View,
@@ -47,6 +48,8 @@ const {
   renderSmallSwitchOption,
 } = require('./ListExampleShared');
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,
   viewAreaCoveragePercentThreshold: 100,
@@ -66,15 +69,29 @@ class FlatListExample extends React.PureComponent {
     logViewable: false,
     virtualized: true,
   };
+
   _onChangeFilterText = (filterText) => {
     this.setState({filterText});
   };
+
   _onChangeScrollToIndex = (text) => {
-    this._listRef.scrollToIndex({viewPosition: 0.5, index: Number(text)});
+    this._listRef.getNode().scrollToIndex({viewPosition: 0.5, index: Number(text)});
   };
+
+  _scrollPos = new Animated.Value(0);
+  _scrollSinkX = Animated.event(
+    [{nativeEvent: { contentOffset: { x: this._scrollPos } }}],
+    {useNativeDriver: true},
+  );
+  _scrollSinkY = Animated.event(
+    [{nativeEvent: { contentOffset: { y: this._scrollPos } }}],
+    {useNativeDriver: true},
+  );
+
   componentDidUpdate() {
-    this._listRef.recordInteraction(); // e.g. flipping logViewable switch
+    this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
   }
+
   render() {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = (item) => (
@@ -95,7 +112,6 @@ class FlatListExample extends React.PureComponent {
             <PlainInput
               onChangeText={this._onChangeScrollToIndex}
               placeholder="scrollToIndex..."
-              style={styles.searchTextInput}
             />
           </View>
           <View style={styles.options}>
@@ -104,10 +120,19 @@ class FlatListExample extends React.PureComponent {
             {renderSmallSwitchOption(this, 'fixedHeight')}
             {renderSmallSwitchOption(this, 'logViewable')}
             {renderSmallSwitchOption(this, 'debug')}
+            <Animated.View style={[styles.spindicator, {
+              transform: [
+                {rotate: this._scrollPos.interpolate({
+                  inputRange: [0, 5000],
+                  outputRange: ['0deg', '360deg'],
+                  extrapolate: 'extend',
+                })}
+              ]
+            }]} />
           </View>
         </View>
         <SeparatorComponent />
-        <FlatList
+        <AnimatedFlatList
           HeaderComponent={HeaderComponent}
           FooterComponent={FooterComponent}
           SeparatorComponent={SeparatorComponent}
@@ -125,6 +150,7 @@ class FlatListExample extends React.PureComponent {
           legacyImplementation={false}
           numColumns={1}
           onRefresh={this._onRefresh}
+          onScroll={this.state.horizontal ? this._scrollSinkX : this._scrollSinkY}
           onViewableItemsChanged={this._onViewableItemsChanged}
           ref={this._captureRef}
           refreshing={false}
@@ -180,7 +206,7 @@ class FlatListExample extends React.PureComponent {
     }
   };
   _pressItem = (key: number) => {
-    this._listRef.recordInteraction();
+    this._listRef.getNode().recordInteraction();
     pressItem(this, key);
   };
   _listRef: FlatList<*>;
@@ -196,6 +222,12 @@ const styles = StyleSheet.create({
   searchRow: {
     paddingHorizontal: 10,
   },
+  spindicator: {
+    marginLeft: 'auto',
+    width: 2,
+    height: 16,
+    backgroundColor: 'darkgray',
+  },
 });
 
 module.exports = FlatListExample;