Merged Multi Lists and Flat List in One

packages/rn-tester/Podfile.lock

@@ -489,8 +489,8 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   DoubleConversion: cde416483dac037923206447da6e1454df403714
-  FBLazyVector: 98b3df849cb9ebc2078ed3640ffd4120f2553303
-  FBReactNativeSpec: c1c54acc82da2165787b559a2d5f48716a2f180e
+  FBLazyVector: 5863c5c79828af7aa986e60bc219cb7d7a26e214
+  FBReactNativeSpec: 31243fde32702d40228d2790ac3f01490fa42840
   Flipper: 33585e2d9810fe5528346be33bcf71b37bb7ae13
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3
@@ -501,31 +501,31 @@ SPEC CHECKSUMS:
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
-  RCTRequired: 97859ed1eb8b4196fb2e3b789d452c9292dbc435
-  RCTTypeSafety: 649fb7d110962aae550b3b9d91794e002689a4e6
-  React: 046964dda63c2ab90eeef39c7716cc8ea9172673
-  React-callinvoker: 63971b50708aa3f40f3a45444965090370d625dc
-  React-Core: 9d9440bbf3b5f4caf271fb4cdf5c04d0752736b6
-  React-CoreModules: 5457fce32fab0029c1ea54f955f6be589145e6ed
-  React-cxxreact: 9e50a115d1e05b2da8cd0df304de9fb2e8c78e9a
-  React-jsi: 1c7f50333eeeb2d1728291e612106d767c436e8a
-  React-jsiexecutor: 1bc40763a2a9d4ea6265123e7909aa585f696ac9
-  React-jsinspector: b37ef86e89ef3fc286d14bf31e33a8da1d0382ab
-  React-perflogger: 5a6d9ef9a3b115845aac4a1b0804664248804e95
-  React-RCTActionSheet: c45961ef9a53a886381be1c88f645d4f137a8665
-  React-RCTAnimation: 53bdde207304afd23149d606b2d50ecb5af2f5d1
-  React-RCTBlob: 46d5167a2cd9e2736106ad48063fcfa15035eec2
-  React-RCTImage: c92dfed18ace02a5a1d007113917c9f90dd5f31a
-  React-RCTLinking: e2d3f3682ed0d5d1e6ac92d48986a25b17177692
-  React-RCTNetwork: eba468d189bfc85487d844f4c5f34102888412e6
-  React-RCTPushNotification: 2b529402c64c08476f1e7c86581fa3e0d07fb9dc
-  React-RCTSettings: 88126352a26c516874fa0f592a53c747b1630f32
-  React-RCTTest: 20ce355f1a4e66d2c77da361144c7c79dcf55afb
-  React-RCTText: 4807beec553ecb5345f3405c1b668a0a85f48e29
-  React-RCTVibration: 0b9c03d9b3c413317037e0b01da15cfeb1f7bea8
-  React-runtimeexecutor: 78d3dab9a83ffc6fae919a374207ade4e63972b9
-  ReactCommon: d58c94e72ae473dbba7f571e50812c576f42c93e
-  Yoga: 900d5196085b1a3b11739459ad016247032f17db
+  RCTRequired: 04831261fc2b840f6634ac44cf840223ec0f7777
+  RCTTypeSafety: 050011b0060d7df325977843dfcab82dedc37630
+  React: d1cedd4c298a9499ae3316a9cf9b52fb4544e438
+  React-callinvoker: 827e4e6b4e4c62ff82d2578bc547715a8e3a5fcb
+  React-Core: eb2786084e924a5636ddc701791fe9707cd0da2f
+  React-CoreModules: 5be7a9f6c2abc4c6c4f3e14743e96be6811a767b
+  React-cxxreact: 4860d6b373d6eefa1f8310dd41c6ab6dcaef8a1e
+  React-jsi: c18ea4f497b06dd4301520e3cf7bc4c343f15d2a
+  React-jsiexecutor: 5a6506adcc8e193d9e6633a89f89d6bdb952ef80
+  React-jsinspector: 338c1575fd978f6b67eb549e53729a5a134b9922
+  React-perflogger: bc95b582eadcbd03243d1662b6355af5c8a74119
+  React-RCTActionSheet: e0e332599b51314fa27d39209eba0e419e40e268
+  React-RCTAnimation: 337d70d6c5473d6c6648e0a7d6c35076e194da71
+  React-RCTBlob: 4bd8399efc93035d6e5ea94286766cee10278b42
+  React-RCTImage: 7fbb61752852b839362ef5f8994fe8b598bd5871
+  React-RCTLinking: 892f99265651a817ddc31afcab4a62337d94772e
+  React-RCTNetwork: 2d8af83ec9d594d53713a83ec0766c74d4153523
+  React-RCTPushNotification: fe83f8ee632d5fcc028a6aa3593c865c639b665f
+  React-RCTSettings: aa36dd52e89d269589454f9689341c7e1ddd0ce4
+  React-RCTTest: daf32349e5b703ed949bd7293b3fd6b3eca59850
+  React-RCTText: ab0278db3379fd35fa8e621dc25e28e36f272e34
+  React-RCTVibration: de031eef00052f649e291810d77081b6e75f4b25
+  React-runtimeexecutor: d3fd50d59e453bfc9301f6caebdf29dcd130f157
+  ReactCommon: 3e510df01fc5b63f19e306fb7e4ddb6278fa3bad
+  Yoga: 24c6ad3bec82b78482e73802574fc478b7f67f6d
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 3045d3456f0f2268f15db9a527839e6a19e6071c

packages/rn-tester/js/components/ListExampleShared.js

@@ -39,7 +39,7 @@ function genItemData(count: number, start: number = 0): Array<Item> {
     const itemHash = Math.abs(hashCode('Item ' + ii));
     dataBlob.push({
       title: 'Item ' + ii,
-      text: LOREM_IPSUM.substr(0, (itemHash % 301) + 20),
+      text: LIST_CONTENT[itemHash % LIST_CONTENT.length],
       key: String(ii),
       pressed: false,
     });
@@ -195,12 +195,16 @@ const THUMB_URLS = [
   require('../assets/victory.png'),
 ];
 
-const LOREM_IPSUM =
-  'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix \
-civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id \
-integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem \
-vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud \
-modus, putant invidunt reprehendunt ne qui.';
+const LIST_CONTENT = [
+  'Crunchy Croissants',
+  'Braised Leeks with Mozzarella & Fried Egg',
+  'Lamb Salad with Fregola',
+  'Smoked Pork Jowl with Pickles',
+  'Malted Custard French Toast',
+  'Meat Pie',
+  'Macarons',
+  'Squeaky Cheese'
+];
 
 /* eslint no-bitwise: 0 */
 function hashCode(str: string): number {

packages/rn-tester/js/examples/FlatList/FlatListExample.js

@@ -59,6 +59,10 @@ type State = {|
   empty: boolean,
   useFlatListItemComponent: boolean,
   fadingEdgeLength: number,
+  multiColor: number,
+  header: boolean,
+  footer: boolean,
+  numColumns: number,
 |};
 
 class FlatListExample extends React.PureComponent<Props, State> {
@@ -74,6 +78,10 @@ class FlatListExample extends React.PureComponent<Props, State> {
     empty: false,
     useFlatListItemComponent: false,
     fadingEdgeLength: 0,
+    header: true,
+    footer: true,
+    numColumns: 1,
+    multiColumn: false
   };
 
   _onChangeFilterText = filterText => {
@@ -131,6 +139,9 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {renderSmallSwitchOption(this, 'empty')}
               {renderSmallSwitchOption(this, 'debug')}
               {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              {renderSmallSwitchOption(this, 'header')}
+              {renderSmallSwitchOption(this, 'footer')}
+              {renderSmallSwitchOption(this, 'multiColumn')}
               {Platform.OS === 'android' && (
                 <View>
                   <TextInput
@@ -145,15 +156,30 @@ class FlatListExample extends React.PureComponent<Props, State> {
                   />
                 </View>
               )}
+              {
+               this.state.multiColumn === true && (
+                 <View>
+                   <TextInput
+                      placeholder="Number of columns"
+                      keyboardType={'numeric'}
+                      onChange={(event)=> 
+                        this.setState({
+                          numColumns: Number(event.nativeEvent.text)
+                        })
+                      }
+                    />
+                </View>
+               )
+              }
               <Spindicator value={this._scrollPos} />
             </View>
           </View>
           <SeparatorComponent />
           <Animated.FlatList
             fadingEdgeLength={this.state.fadingEdgeLength}
             ItemSeparatorComponent={ItemSeparatorComponent}
-            ListHeaderComponent={<HeaderComponent />}
-            ListFooterComponent={FooterComponent}
+            ListHeaderComponent={this.state.header ? <HeaderComponent />: null}
+            ListFooterComponent={this.state.footer ? <FooterComponent /> : null}
             ListEmptyComponent={ListEmptyComponent}
             data={this.state.empty ? [] : filteredData}
             debug={this.state.debug}
@@ -165,11 +191,12 @@ class FlatListExample extends React.PureComponent<Props, State> {
             inverted={this.state.inverted}
             key={
               (this.state.horizontal ? 'h' : 'v') +
-              (this.state.fixedHeight ? 'f' : 'd')
+              (this.state.fixedHeight ? 'f' : 'd') +
+              this.state.numColumns.toString()
             }
             keyboardShouldPersistTaps="always"
             keyboardDismissMode="on-drag"
-            numColumns={1}
+            numColumns={this.state.horizontal ? 1 : this.state.numColumns}
             onEndReached={this._onEndReached}
             onRefresh={this._onRefresh}
             onScroll={

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -44,10 +44,6 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'ModalExample',
     module: require('../examples/Modal/ModalExample'),
   },
-  {
-    key: 'MultiColumnExample',
-    module: require('../examples/MultiColumn/MultiColumnExample'),
-  },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -70,11 +70,6 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/Modal/ModalExample'),
     supportsTVOS: true,
   },
-  {
-    key: 'MultiColumnExample',
-    module: require('../examples/MultiColumn/MultiColumnExample'),
-    supportsTVOS: true,
-  },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),