enhance example to include a window scroller

Author: Mathis Neumann

packages/examples/src/RNTester/FlatListExample.js

@@ -145,6 +145,7 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> {
             renderItem={this._renderItemComponent}
             contentContainerStyle={styles.list}
             viewabilityConfig={VIEWABILITY_CONFIG}
+            // useWindowScrolling
           />
         </View>
       </RNTesterPage>

packages/examples/src/RNTester/FlatListWindowScrollExample.js

@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @providesModule FlatListWindowScrollExample
+ */
+'use strict';
+
+const Alert = require('Alert');
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Animated,
+  FlatList,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+const RNTesterPage = require('./RNTesterPage');
+
+const infoLog = require('infoLog');
+
+const {
+  FooterComponent,
+  HeaderComponent,
+  ItemComponent,
+  ItemSeparatorComponent,
+  PlainInput,
+  SeparatorComponent,
+  Spindicator,
+  genItemData,
+  getItemLayout,
+  pressItem,
+  renderSmallSwitchOption,
+} = require('./ListExampleShared');
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
+const VIEWABILITY_CONFIG = {
+  minimumViewTime: 3000,
+  viewAreaCoveragePercentThreshold: 100,
+  waitForInteraction: true,
+};
+
+class FlatListWindowScrollExample extends React.PureComponent<{}, $FlowFixMeState> {
+  static title = '<FlatList Window Scroll>';
+  static description = 'Performant, scrollable list of data based on the browsers scroll position.';
+
+  state = {
+    data: genItemData(100),
+    debug: false,
+    horizontal: false,
+    inverted: false,
+    filterText: '',
+    fixedHeight: true,
+    logViewable: false,
+    virtualized: true,
+  };
+
+  _onChangeFilterText = (filterText) => {
+    this.setState({filterText});
+  };
+
+  _onChangeScrollToIndex = (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.getNode().recordInteraction(); // e.g. flipping logViewable switch
+  }
+
+  componentDidMount() {
+    document.body.className = document.body.className.replace('blockBodyScroll', '')
+  }
+  componentWillUnmount() {
+    document.body.className = document.body.className + ' blockBodyScroll'
+  }
+
+  render() {
+    const filterRegex = new RegExp(String(this.state.filterText), 'i');
+    const filter = (item) => (
+      filterRegex.test(item.text) || filterRegex.test(item.title)
+    );
+    const filteredData = this.state.data.filter(filter);
+    return (
+      <RNTesterPage
+        noSpacer={true}
+        noScroll={true}>
+        <View style={styles.container}>
+          <View style={styles.searchRow}>
+            <View style={styles.options}>
+              <PlainInput
+                onChangeText={this._onChangeFilterText}
+                placeholder="Search..."
+                value={this.state.filterText}
+              />
+              <PlainInput
+                onChangeText={this._onChangeScrollToIndex}
+                placeholder="scrollToIndex..."
+              />
+            </View>
+            <View style={styles.options}>
+              {renderSmallSwitchOption(this, 'virtualized')}
+              {renderSmallSwitchOption(this, 'horizontal')}
+              {renderSmallSwitchOption(this, 'fixedHeight')}
+              {renderSmallSwitchOption(this, 'logViewable')}
+              {renderSmallSwitchOption(this, 'inverted')}
+              {renderSmallSwitchOption(this, 'debug')}
+            </View>
+          </View>
+          <SeparatorComponent />
+          <AnimatedFlatList
+            ItemSeparatorComponent={ItemSeparatorComponent}
+            ListHeaderComponent={<HeaderComponent />}
+            ListFooterComponent={FooterComponent}
+            data={filteredData}
+            debug={this.state.debug}
+            disableVirtualization={!this.state.virtualized}
+            getItemLayout={this.state.fixedHeight ?
+              this._getItemLayout :
+              undefined
+            }
+            horizontal={this.state.horizontal}
+            inverted={this.state.inverted}
+            key={(this.state.horizontal ? 'h' : 'v') +
+              (this.state.fixedHeight ? 'f' : 'd')
+            }
+            keyboardShouldPersistTaps="always"
+            keyboardDismissMode="on-drag"
+            legacyImplementation={false}
+            numColumns={1}
+            onEndReached={this._onEndReached}
+            onRefresh={this._onRefresh}
+            onScroll={this.state.horizontal ? this._scrollSinkX : this._scrollSinkY}
+            onViewableItemsChanged={this._onViewableItemsChanged}
+            ref={this._captureRef}
+            refreshing={false}
+            renderItem={this._renderItemComponent}
+            contentContainerStyle={styles.list}
+            viewabilityConfig={VIEWABILITY_CONFIG}
+            useWindowScrolling
+          />
+
+          <View style={styles.spinIndicator}>
+            <Spindicator value={this._scrollPos} />
+          </View>
+        </View>
+      </RNTesterPage>
+    );
+  }
+  _captureRef = (ref) => { this._listRef = ref; };
+  _getItemLayout = (data: any, index: number) => {
+    return getItemLayout(data, index, this.state.horizontal);
+  };
+  _onEndReached = () => {
+    if (this.state.data.length >= 1000) {
+      return;
+    }
+    this.setState((state) => ({
+      data: state.data.concat(genItemData(100, state.data.length)),
+    }));
+  };
+  _onRefresh = () => Alert.alert('onRefresh: nothing to refresh :P');
+  _renderItemComponent = ({item, separators}) => {
+    return (
+      <ItemComponent
+        item={item}
+        horizontal={this.state.horizontal}
+        fixedHeight={this.state.fixedHeight}
+        onPress={this._pressItem}
+        onShowUnderlay={separators.highlight}
+        onHideUnderlay={separators.unhighlight}
+      />
+    );
+  };
+  // This is called when items change viewability by scrolling into or out of
+  // the viewable area.
+  _onViewableItemsChanged = (info: {
+      changed: Array<{
+        key: string,
+        isViewable: boolean,
+        item: any,
+        index: ?number,
+        section?: any,
+      }>
+    }
+  ) => {
+    // Impressions can be logged here
+    if (this.state.logViewable) {
+      infoLog(
+        'onViewableItemsChanged: ',
+        info.changed.map((v) => ({...v, item: '...'})),
+      );
+    }
+  };
+  _pressItem = (key: string) => {
+    this._listRef.getNode().recordInteraction();
+    pressItem(this, key);
+  };
+  _listRef: AnimatedFlatList;
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'rgb(239, 239, 244)',
+    flex: 1,
+  },
+  list: {
+    backgroundColor: 'white',
+  },
+  options: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  searchRow: {
+    paddingHorizontal: 10,
+  },
+  spinIndicator: {
+    position: 'fixed',
+    right: 25,
+    top: 25,
+    zIndex: 100,
+  }
+});
+
+module.exports = FlatListWindowScrollExample;

packages/examples/src/RNTester/RNTesterList.web.js

@@ -28,6 +28,10 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'FlatListExample',
     module: require('./FlatListExample')
   },
+  {
+    key: 'FlatListWindowScrollExample',
+    module: require('./FlatListWindowScrollExample')
+  },
   {
     key: 'MultiColumnExample',
     module: require('./MultiColumnExample')

packages/examples/src/index.html

@@ -5,12 +5,28 @@
   <title>React Native examples</title>
   <meta name="viewport" content="initial-scale=1.0,width=device-width">
   <style>
-    html, body { height: 100%; width: 100%; overflow: hidden; }
-    .root { height: 100%; overflow: hidden; }
+
+    html, body { 
+      min-height: 100%; 
+      min-width: 100%;
+    }
+    #root {
+      display: flex;
+    }
+    .blockBodyScroll { 
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+    }
+    .blockBodyScroll > #root {
+      height: 100%; 
+      width: 100%; 
+      overflow: hidden; 
+    }
   </style>
 </head>
-<body style="height:100%">
-  <div id="root" style="display:flex;height:100%"></div>
+<body class="blockBodyScroll">
+  <div id="root"></div>
   <script src="./bundle.js"></script>
 </body>
-</html>
+</html>