Make section key optional

Summary: People rarely re-order sections so this is an annoying requirement and we can just use the index by default.

Reviewed By: thechefchen

Differential Revision: D4972154

fbshipit-source-id: 256c445b36c9ba101277614d30a6dc1dbd477ee0

Libraries/Lists/SectionList.js

@@ -22,9 +22,15 @@ import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList'
 type Item = any;
 
 type SectionBase<SectionItemT> = {
-  // Must be provided directly on each section.
+  /**
+   * The data for rendering items in this section.
+   */
   data: Array<SectionItemT>,
-  key: string,
+  /**
+   * Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections,
+   * the array index will be used by default.
+   */
+  key?: string,
 
   // Optional props will override list-wide props just for this section.
   renderItem?: ?(info: {
@@ -52,7 +58,6 @@ type RequiredProps<SectionT: SectionBase<any>> = {
    *
    *     sections: Array<{
    *       data: Array<SectionItem>,
-   *       key: string,
    *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
@@ -201,19 +206,19 @@ type DefaultProps = typeof defaultProps;
  *
  *     <SectionList
  *       renderItem={({item}) => <ListItem title={item.title} />}
- *       renderSectionHeader={({section}) => <H1 title={section.key} />}
+ *       renderSectionHeader={({section}) => <H1 title={section.title} />}
  *       sections={[ // homogenous rendering between sections
- *         {data: [...], key: ...},
- *         {data: [...], key: ...},
- *         {data: [...], key: ...},
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
  *       ]}
  *     />
  *
  *     <SectionList
  *       sections={[ // heterogeneous rendering between sections
- *         {data: [...], key: ..., renderItem: ...},
- *         {data: [...], key: ..., renderItem: ...},
- *         {data: [...], key: ..., renderItem: ...},
+ *         {data: [...], title: ..., renderItem: ...},
+ *         {data: [...], title: ..., renderItem: ...},
+ *         {data: [...], title: ..., renderItem: ...},
  *       ]}
  *     />
  *

Libraries/Lists/VirtualizedSectionList.js

@@ -16,7 +16,6 @@ const View = require('View');
 const VirtualizedList = require('VirtualizedList');
 
 const invariant = require('fbjs/lib/invariant');
-const warning = require('fbjs/lib/warning');
 
 import type {ViewToken} from 'ViewabilityHelper';
 import type {Props as VirtualizedListProps} from 'VirtualizedList';
@@ -27,7 +26,7 @@ type SectionItem = any;
 type SectionBase = {
   // Must be provided directly on each section.
   data: Array<SectionItem>,
-  key: string,
+  key?: string,
 
   // Optional props will override list-wide props just for this section.
   renderItem?: ?({
@@ -179,11 +178,7 @@ class VirtualizedSectionList<SectionT: SectionBase>
     const defaultKeyExtractor = this.props.keyExtractor;
     for (let ii = 0; ii < this.props.sections.length; ii++) {
       const section = this.props.sections[ii];
-      const key = section.key;
-      warning(
-        key != null,
-        'VirtualizedSectionList: A `section` you supplied is missing the `key` property.'
-      );
+      const key = section.key || String(ii);
       itemIndex -= 1; // The section itself is an item
       if (itemIndex >= section.data.length) {
         itemIndex -= section.data.length;