Componentize Spindicator and add to SectionListExample

Reviewed By: yungsters

Differential Revision: D4688309

fbshipit-source-id: 4e1c70039050170cc0bc2eca0bba0fd077c692d2

Examples/UIExplorer/js/FlatListExample.js

@@ -42,6 +42,7 @@ const {
   ItemComponent,
   PlainInput,
   SeparatorComponent,
+  Spindicator,
   genItemData,
   getItemLayout,
   pressItem,
@@ -120,15 +121,7 @@ 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',
-                })}
-              ]
-            }]} />
+            <Spindicator value={this._scrollPos} />
           </View>
         </View>
         <SeparatorComponent />
@@ -222,12 +215,6 @@ const styles = StyleSheet.create({
   searchRow: {
     paddingHorizontal: 10,
   },
-  spindicator: {
-    marginLeft: 'auto',
-    width: 2,
-    height: 16,
-    backgroundColor: 'darkgray',
-  },
 });
 
 module.exports = FlatListExample;

Examples/UIExplorer/js/ListExampleShared.js

@@ -26,6 +26,7 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
+  Animated,
   Image,
   Platform,
   TouchableHighlight,
@@ -129,6 +130,22 @@ class SeparatorComponent extends React.PureComponent {
   }
 }
 
+class Spindicator extends React.PureComponent {
+  render() {
+    return (
+      <Animated.View style={[styles.spindicator, {
+        transform: [
+          {rotate: this.props.value.interpolate({
+            inputRange: [0, 5000],
+            outputRange: ['0deg', '360deg'],
+            extrapolate: 'extend',
+          })}
+        ]
+      }]} />
+    );
+  }
+}
+
 const THUMB_URLS = [
   require('./Thumbnails/like.png'),
   require('./Thumbnails/dislike.png'),
@@ -266,6 +283,13 @@ const styles = StyleSheet.create({
     width: 64,
     height: 64,
   },
+  spindicator: {
+    marginLeft: 'auto',
+    marginTop: 8,
+    width: 2,
+    height: 16,
+    backgroundColor: 'darkgray',
+  },
   stackedText: {
     padding: 4,
     fontSize: 18,
@@ -281,6 +305,7 @@ module.exports = {
   ItemComponent,
   PlainInput,
   SeparatorComponent,
+  Spindicator,
   genItemData,
   getItemLayout,
   pressItem,

Examples/UIExplorer/js/SectionListExample.js

@@ -26,6 +26,7 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
+  Animated,
   SectionList,
   StyleSheet,
   Text,
@@ -42,12 +43,15 @@ const {
   ItemComponent,
   PlainInput,
   SeparatorComponent,
+  Spindicator,
   genItemData,
   pressItem,
   renderSmallSwitchOption,
   renderStackedItem,
 } = require('./ListExampleShared');
 
+const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
+
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,
   viewAreaCoveragePercentThreshold: 100,
@@ -79,6 +83,13 @@ class SectionListExample extends React.PureComponent {
     logViewable: false,
     virtualized: true,
   };
+
+  _scrollPos = new Animated.Value(0);
+  _scrollSinkY = Animated.event(
+    [{nativeEvent: { contentOffset: { y: this._scrollPos } }}],
+    {useNativeDriver: true},
+  );
+
   render() {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = (item) => (
@@ -100,10 +111,11 @@ class SectionListExample extends React.PureComponent {
           <View style={styles.optionSection}>
             {renderSmallSwitchOption(this, 'virtualized')}
             {renderSmallSwitchOption(this, 'logViewable')}
+            <Spindicator value={this._scrollPos} />
           </View>
         </View>
         <SeparatorComponent />
-        <SectionList
+        <AnimatedSectionList
           ListHeaderComponent={HeaderComponent}
           ListFooterComponent={FooterComponent}
           SectionSeparatorComponent={() =>
@@ -114,6 +126,7 @@ class SectionListExample extends React.PureComponent {
           }
           enableVirtualization={this.state.virtualized}
           onRefresh={() => alert('onRefresh: nothing to refresh :P')}
+          onScroll={this._scrollSinkY}
           onViewableItemsChanged={this._onViewableItemsChanged}
           refreshing={false}
           renderItem={this._renderItemComponent}