Add flexWrap warning

Reviewed By: sahrens

Differential Revision: D5117970

fbshipit-source-id: 11b542bd6cd7b1ab22ba8f6822d471df94fa7da2

Author: Xinbo Wang

Libraries/Lists/VirtualizedList.js

@@ -20,8 +20,10 @@ const ScrollView = require('ScrollView');
 const View = require('View');
 const ViewabilityHelper = require('ViewabilityHelper');
 
+const flattenStyle = require('flattenStyle');
 const infoLog = require('infoLog');
 const invariant = require('fbjs/lib/invariant');
+const warning = require('fbjs/lib/warning');
 
 const {computeWindowedRenderLimits} = require('VirtualizeUtils');
 
@@ -409,6 +411,15 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
   };
 
   render() {
+    if (__DEV__) {
+      const flatStyles = flattenStyle(this.props.contentContainerStyle);
+      warning(
+        flatStyles == null || flatStyles.flexWrap !== 'wrap',
+        '`flexWrap: `wrap`` is not supported with the `VirtualizedList` components.' +
+          'Consider using `numColumns` with `FlatList` instead.',
+      );
+    }
+
     const {ListEmptyComponent, ListFooterComponent, ListHeaderComponent} = this.props;
     const {data, disableVirtualization, horizontal} = this.props;
     const cells = [];

RNTester/js/FlatListExample.js

@@ -11,6 +11,7 @@
  */
 'use strict';
 
+const Alert = require('Alert');
 const React = require('react');
 const ReactNative = require('react-native');
 const {
@@ -160,7 +161,7 @@ class FlatListExample extends React.PureComponent {
       data: state.data.concat(genItemData(100, state.data.length)),
     }));
   };
-  _onRefresh = () => alert('onRefresh: nothing to refresh :P');
+  _onRefresh = () => Alert.alert('onRefresh: nothing to refresh :P');
   _renderItemComponent = ({item, separators}) => {
     return (
       <ItemComponent