feat: GridView: ListView upgraded to VirtualizedList (callstack#150)

* feat(gridView): use VirtualizedList

* feat(gridView): orientation should work. start with public API.

* feat(gridView): polished code, added public API

* fix(gridView): removed comments which broke the CI

* docs(gridView): updated documentation

* refactor(gridView): better distinguish between private / public method in the example

* docs(gridView): fixed comments

* fix(gridView): round the layout width

* chore(docs): fixed docs generation. When you use flow you have to use named arguments of function

* refactor(gridView): renderItem shoud return valid react element

* BREAKING: migrate GridView to use VirtualizedList

* fix(gridView): we can use flewWrap. YEY!

* feat(gridView): use Animated.Value

* fix(gridView): polished code

* refactor(gridViewExample): polished code

* fix(gridView): unused variable

Author: jukben

example/src/GridViewExample.js

@@ -1,19 +1,15 @@
-/* @flow */
+// @flow
 
 import React, { Component } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Colors, Card, Text, GridView } from 'react-native-paper';
-
 const CARD_SIZE = 160;
 
 export default class GridViewExample extends Component {
   static title = 'GridView';
 
   state = {
     items: [],
-    dataSource: new GridView.DataSource({
-      rowHasChanged: (r1, r2) => r1 !== r2,
-    }),
   };
 
   componentWillMount() {
@@ -29,25 +25,26 @@ export default class GridViewExample extends Component {
     }
 
     for (let i = 0; i < 100; i++) {
-      items.push(itemsLength + i);
+      items.push({ id: itemsLength + i });
     }
 
     this.setState({
       items,
-      dataSource: this.state.dataSource.cloneWithRows(items),
     });
   };
 
-  _renderRow = index => {
+  _renderItem = item => {
     return (
       <Card style={styles.tile}>
         <View style={styles.inner}>
-          <Text style={styles.text}>{index}</Text>
+          <Text style={styles.text}>{item.id}</Text>
         </View>
       </Card>
     );
   };
 
+  _keyExtractor = item => item.id;
+
   _getNumberOfColumns = (width: number) => {
     return Math.floor(width / CARD_SIZE);
   };
@@ -56,11 +53,11 @@ export default class GridViewExample extends Component {
     return (
       <GridView
         {...this.props}
-        removeClippedSubviews={false}
         spacing={8}
         getNumberOfColumns={this._getNumberOfColumns}
-        dataSource={this.state.dataSource}
-        renderRow={this._renderRow}
+        data={this.state.items}
+        keyExtractor={this._keyExtractor}
+        renderItem={this._renderItem}
         onEndReached={this._genRows}
       />
     );

src/components/GridView.js

@@ -2,145 +2,139 @@
 
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Dimensions, ListView, StyleSheet, ViewPropTypes } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  VirtualizedList,
+  ViewPropTypes,
+} from 'react-native';
 import withTheme from '../core/withTheme';
 import type { Theme } from '../types/Theme';
 
-type Layout = {
-  width: number,
-};
-
 type Props = {
-  dataSource: ListView.DataSource,
+  /**
+   * Item's spacing
+   */
   spacing: number,
+  /**
+   * Function which determine number of columns.
+   */
   getNumberOfColumns: (width: number) => number,
-  renderSectionHeader?: (...args: any) => any,
-  renderRow: (...args: any) => any,
-  initialLayout: Layout,
+  /**
+   * Data for the list
+   */
+  data: Array<any>,
+  /**
+   * Function which should return ID base on the item.
+   */
+  keyExtractor: (item: any) => string,
+  contentContainerStyle: ?Object,
+  /**
+   * Component for rendering item
+   */
+  renderItem: (item: any) => React$Element<*>,
   onLayout?: Function,
-  contentContainerStyle?: any,
   theme: Theme,
 };
 
 type DefaultProps = {
-  initialLayout: Layout,
   getNumberOfColumns: (width: number) => number,
   spacing: number,
 };
 
 type State = {
-  layout: Layout,
+  itemWidth: Animated.Value,
 };
 
 class GridView extends PureComponent<DefaultProps, Props, State> {
   static propTypes = {
-    dataSource: PropTypes.instanceOf(ListView.DataSource).isRequired,
+    data: PropTypes.array.isRequired,
     spacing: PropTypes.number.isRequired,
     getNumberOfColumns: PropTypes.func.isRequired,
-    renderSectionHeader: PropTypes.func,
-    renderRow: PropTypes.func.isRequired,
+    renderItem: PropTypes.func.isRequired,
+    keyExtractor: PropTypes.func.isRequired,
     onLayout: PropTypes.func,
     theme: PropTypes.object.isRequired,
     contentContainerStyle: ViewPropTypes.style,
   };
 
   static defaultProps = {
-    initialLayout: { width: Dimensions.get('window').width },
     getNumberOfColumns: () => 1,
     spacing: 0,
   };
 
-  static DataSource = ListView.DataSource;
-
   constructor(props: Props) {
     super(props);
 
     this.state = {
-      layout: props.initialLayout,
+      itemWidth: new Animated.Value(0),
     };
   }
 
   state: State;
 
-  scrollTo(options: any) {
-    this._root.scrollTo(options);
-  }
+  _root: VirtualizedList;
 
-  _root: Object;
+  scrollToIndex = (params: Object) => this._root.scrollToIndex(params);
+  scrollToItem = (params: Object) => this._root.scrollToItem(params);
+  scrollToEnd = (params?: Object) => this._root.scrollToEnd(params);
+  scrollToOffset = (params: Object) => this._root.scrollToOffset(params);
 
-  _renderSectionHeader = (...args) => {
-    const header = this.props.renderSectionHeader
-      ? this.props.renderSectionHeader(...args)
-      : null;
-    if (!header) {
-      return header;
-    }
-    const { width } = this.state.layout;
-    return React.cloneElement(header, {
-      style: [header.props.style, { width }],
-    });
-  };
+  _renderItem = ({ item }) => {
+    const { spacing, renderItem } = this.props;
 
-  _renderRow = (...args: any) => {
-    const containerWidth = this.state.layout.width;
-    const { getNumberOfColumns, spacing } = this.props;
     const style = {
-      width:
-        (containerWidth - spacing) / getNumberOfColumns(containerWidth) -
-        spacing,
+      width: this.state.itemWidth,
       margin: spacing / 2,
     };
-    const row = this.props.renderRow(...args);
-    if (!row) {
-      return row;
-    }
-    return React.cloneElement(row, {
-      style: [row.props.style, style],
-    });
+
+    return <Animated.View style={style}>{renderItem(item)}</Animated.View>;
   };
 
   _handleLayout = (e: any) => {
+    const { getNumberOfColumns, spacing } = this.props;
+
     if (this.props.onLayout) {
       this.props.onLayout(e);
     }
 
-    if (this.state.layout.width === e.nativeEvent.layout.width) {
-      return;
-    }
+    const layoutWidth = e.nativeEvent.layout.width;
 
-    const containerWidth = e.nativeEvent.layout.width;
-
-    this.setState({
-      layout: { width: containerWidth },
-    });
+    this.state.itemWidth.setValue(
+      (layoutWidth - spacing) / getNumberOfColumns(layoutWidth) - spacing
+    );
   };
 
-  _setRef = (c: Object) => (this._root = c);
+  _getItemCount = (data: Array<any>) => data.length;
+
+  _getItem = (data, index) => data[index];
 
   render() {
-    const { spacing, theme } = this.props;
+    const { spacing, theme, data, keyExtractor } = this.props;
     return (
-      <ListView
+      <VirtualizedList
         {...this.props}
-        key={`grid-${this.state.layout.width}`}
+        data={data}
+        getItemCount={this._getItemCount}
+        getItem={this._getItem}
         onLayout={this._handleLayout}
-        renderSectionHeader={this._renderSectionHeader}
-        renderRow={this._renderRow}
+        renderItem={this._renderItem}
+        keyExtractor={keyExtractor}
+        ref={c => (this._root = c)}
         contentContainerStyle={[
           styles.grid,
           { padding: spacing / 2, backgroundColor: theme.colors.background },
           this.props.contentContainerStyle,
         ]}
-        ref={this._setRef}
       />
     );
   }
 }
 
 const styles = StyleSheet.create({
   grid: {
+    flexWrap: 'wrap', // Warning is misleading https://github.com/facebook/react-native/issues/15772
     flexDirection: 'row',
-    flexWrap: 'wrap',
     alignItems: 'flex-start',
   },
 });