diff --git a/Libraries/Lists/SectionList.js b/Libraries/Lists/SectionList.js
index b26a13c58172..8c5ee0ea9c3c 100644
--- a/Libraries/Lists/SectionList.js
+++ b/Libraries/Lists/SectionList.js
@@ -188,7 +188,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {
 
 export type Props<SectionT> = RequiredProps<SectionT> &
   OptionalProps<SectionT> &
-  VirtualizedSectionListProps<SectionT>;
+  VirtualizedSectionListProps;
 
 const defaultProps = {
   ...VirtualizedSectionList.defaultProps,
@@ -325,11 +325,37 @@ class SectionList<SectionT: SectionBase<any>> extends React.PureComponent<
     }
   }
 
+  constructor(props: Props<SectionT>) {
+    super(props);
+    this._checkProps(this.props);
+  }
+
+  componentDidUpdate(prevProps: Props<SectionT>) {
+    this._checkProps(this.props);
+  }
+
+  _checkProps(props: Props<SectionT>) {
+    const {getItem, getItemCount} = props;
+
+    if (__DEV__) {
+      if (getItem || getItemCount) {
+        console.warn('SectionList does not support custom data formats.');
+      }
+    }
+  }
+
   render() {
     /* $FlowFixMe(>=0.66.0 site=react_native_fb) This comment suppresses an
      * error found when Flow v0.66 was deployed. To see the error delete this
      * comment and run Flow. */
-    return <VirtualizedSectionList {...this.props} ref={this._captureRef} />;
+    return (
+      <VirtualizedSectionList
+        {...this.props}
+        ref={this._captureRef}
+        getItemCount={items => items.length}
+        getItem={(items, index) => items[index]}
+      />
+    );
   }
 
   _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index c52395954482..fe28b35a4b32 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -20,35 +20,11 @@ import type {ViewToken} from 'ViewabilityHelper';
 import type {Props as VirtualizedListProps} from 'VirtualizedList';
 
 type Item = any;
-type SectionItem = any;
 
-type SectionBase = {
-  // Must be provided directly on each section.
-  data: $ReadOnlyArray<SectionItem>,
-  key?: string,
-
-  // Optional props will override list-wide props just for this section.
-  renderItem?: ?({
-    item: SectionItem,
-    index: number,
-    section: SectionBase,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-    },
-  }) => ?React.Element<any>,
-  ItemSeparatorComponent?: ?React.ComponentType<any>,
-  keyExtractor?: (item: SectionItem, index: ?number) => string,
-
-  // TODO: support more optional/override props
-  // FooterComponent?: ?ReactClass<any>,
-  // HeaderComponent?: ?ReactClass<any>,
-  // onViewableItemsChanged?: ({viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void,
-};
+type SectionBase = Object;
 
 type RequiredProps<SectionT: SectionBase> = {
-  sections: $ReadOnlyArray<SectionT>,
+  sections: $ReadOnlyArray<SectionT> | $ReadOnly<SectionT>,
 };
 
 type OptionalProps<SectionT: SectionBase> = {
@@ -116,7 +92,8 @@ type OptionalProps<SectionT: SectionBase> = {
    */
   refreshing?: ?boolean,
 };
-
+/* $FlowFixMe - this Props seems to be missing a bunch of stuff. Remove this
+ * comment to see the errors */
 export type Props<SectionT> = RequiredProps<SectionT> &
   OptionalProps<SectionT> &
   VirtualizedListProps;
@@ -148,7 +125,10 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
   }) {
     let index = Platform.OS === 'ios' ? params.itemIndex : params.itemIndex + 1;
     for (let ii = 0; ii < params.sectionIndex; ii++) {
-      index += this.props.sections[ii].data.length + 2;
+      const section = this.props.getItem(this.props.sections, ii);
+      const sectionData = this.props.getItem(section, 'data');
+      const dataLength = this.props.getItemCount(sectionData);
+      index += dataLength + 2;
     }
     const toIndexParams = {
       ...params,
@@ -173,10 +153,14 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
   _computeState(props: Props<SectionT>): State {
     const offset = props.ListHeaderComponent ? 1 : 0;
     const stickyHeaderIndices = [];
-    const itemCount = props.sections.reduce((v, section) => {
-      stickyHeaderIndices.push(v + offset);
-      return v + section.data.length + 2; // Add two for the section header and footer.
-    }, 0);
+    const itemCount = props.sections
+      ? props.sections.reduce((v, section) => {
+          const sectionData = props.getItem(section, 'data');
+
+          stickyHeaderIndices.push(v + offset);
+          return v + props.getItemCount(sectionData) + 2; // Add two for the section header and footer.
+        }, 0)
+      : 0;
 
     return {
       childProps: {
@@ -185,7 +169,7 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
         ItemSeparatorComponent: undefined, // Rendered with renderItem
         data: props.sections,
         getItemCount: () => itemCount,
-        getItem,
+        getItem: (sections, index) => getItem(props, sections, index),
         keyExtractor: this._keyExtractor,
         onViewableItemsChanged: props.onViewableItemsChanged
           ? this._onViewableItemsChanged
@@ -221,42 +205,44 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
     trailingSection?: ?SectionT,
   } {
     let itemIndex = index;
-    const {sections} = this.props;
-    for (let ii = 0; ii < sections.length; ii++) {
-      const section = sections[ii];
-      const key = section.key || String(ii);
+    const defaultKeyExtractor = this.props.keyExtractor;
+    for (let ii = 0; ii < this.props.getItemCount(this.props.sections); ii++) {
+      const section = this.props.getItem(this.props.sections, ii);
+      const sectionData = this.props.getItem(section, 'data');
+      const key = this.props.getItem(section, 'key') || String(ii);
       itemIndex -= 1; // The section adds an item for the header
-      if (itemIndex >= section.data.length + 1) {
-        itemIndex -= section.data.length + 1; // The section adds an item for the footer.
+      if (itemIndex >= this.props.getItemCount(sectionData) + 1) {
+        itemIndex -= this.props.getItemCount(sectionData) + 1; // The section adds an item for the footer.
       } else if (itemIndex === -1) {
         return {
           section,
           key: key + ':header',
           index: null,
           header: true,
-          trailingSection: sections[ii + 1],
+          trailingSection: this.props.getItem(this.props.sections, ii + 1),
         };
-      } else if (itemIndex === section.data.length) {
+      } else if (itemIndex === this.props.getItemCount(sectionData)) {
         return {
           section,
           key: key + ':footer',
           index: null,
           header: false,
-          trailingSection: sections[ii + 1],
+          trailingSection: this.props.getItem(this.props.sections, ii + 1),
         };
       } else {
-        const keyExtractor = section.keyExtractor || this.props.keyExtractor;
+        const keyExtractor =
+          this.props.getItem(section, 'keyExtractor') || defaultKeyExtractor;
         return {
           section,
-          key: key + ':' + keyExtractor(section.data[itemIndex], itemIndex),
+          key:
+            key +
+            ':' +
+            keyExtractor(this.props.getItem(sectionData, itemIndex), itemIndex),
           index: itemIndex,
-          leadingItem: section.data[itemIndex - 1],
-          leadingSection: sections[ii - 1],
-          trailingItem:
-            section.data.length > itemIndex + 1
-              ? section.data[itemIndex + 1]
-              : undefined,
-          trailingSection: sections[ii + 1],
+          leadingItem: this.props.getItem(sectionData, itemIndex - 1),
+          leadingSection: this.props.getItem(this.props.sections, ii - 1),
+          trailingItem: this.props.getItem(sectionData, itemIndex + 1),
+          trailingSection: this.props.getItem(this.props.sections, ii + 1),
         };
       }
     }
@@ -268,7 +254,9 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
     if (!info) {
       return null;
     }
-    const keyExtractor = info.section.keyExtractor || this.props.keyExtractor;
+    const keyExtractor =
+      this.props.getItem(info.section, 'keyExtractor') ||
+      this.props.keyExtractor;
     return {
       ...viewable,
       index: info.index,
@@ -313,7 +301,8 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
         return renderSectionFooter ? renderSectionFooter({section}) : null;
       }
     } else {
-      const renderItem = info.section.renderItem || this.props.renderItem;
+      const renderItem =
+        this.props.getItem(info.section, 'renderItem') || this.props.renderItem;
       const SeparatorComponent = this._getSeparatorComponent(index, info);
       invariant(renderItem, 'no renderItem!');
       return (
@@ -355,10 +344,13 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
       return null;
     }
     const ItemSeparatorComponent =
-      info.section.ItemSeparatorComponent || this.props.ItemSeparatorComponent;
+      this.props.getItem(info.section, 'ItemSeparatorComponent') ||
+      this.props.ItemSeparatorComponent;
     const {SectionSeparatorComponent} = this.props;
     const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
-    const isLastItemInSection = info.index === info.section.data.length - 1;
+    const sectionData = this.props.getItem(info.section, 'data');
+    const isLastItemInSection =
+      info.index === this.props.getItemCount(sectionData) - 1;
     if (SectionSeparatorComponent && isLastItemInSection) {
       return SectionSeparatorComponent;
     }
@@ -445,7 +437,7 @@ class ItemWithSeparator extends React.Component<
     },
     updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
       const {LeadingSeparatorComponent, cellKey, prevCellKey} = this.props;
-      if (select === 'leading' && LeadingSeparatorComponent != null) {
+      if (select === 'leading' && LeadingSeparatorComponent !== null) {
         this.setState(state => ({
           leadingSeparatorProps: {...state.leadingSeparatorProps, ...newProps},
         }));
@@ -523,22 +515,28 @@ class ItemWithSeparator extends React.Component<
   }
 }
 
-function getItem(sections: ?$ReadOnlyArray<Item>, index: number): ?Item {
+function getItem(
+  props: Props<SectionBase>,
+  sections: ?$ReadOnlyArray<Item>,
+  index: number,
+): ?Item {
   if (!sections) {
     return null;
   }
   let itemIdx = index - 1;
-  for (let ii = 0; ii < sections.length; ii++) {
-    if (itemIdx === -1 || itemIdx === sections[ii].data.length) {
+  for (let ii = 0; ii < props.getItemCount(sections); ii++) {
+    const section = props.getItem(props.sections, ii);
+    const sectionData = props.getItem(section, 'data');
+    if (itemIdx === -1 || itemIdx === props.getItemCount(sectionData)) {
       // We intend for there to be overflow by one on both ends of the list.
       // This will be for headers and footers. When returning a header or footer
       // item the section itself is the item.
-      return sections[ii];
-    } else if (itemIdx < sections[ii].data.length) {
+      return section;
+    } else if (itemIdx < props.getItemCount(sectionData)) {
       // If we are in the bounds of the list's data then return the item.
-      return sections[ii].data[itemIdx];
+      return props.getItem(sectionData, itemIdx);
     } else {
-      itemIdx -= sections[ii].data.length + 2; // Add two for the header and footer
+      itemIdx -= props.getItemCount(sectionData) + 2; // Add two for the header and footer
     }
   }
   return null;
diff --git a/Libraries/Lists/__tests__/VirtualizedSectionList-test.js b/Libraries/Lists/__tests__/VirtualizedSectionList-test.js
new file mode 100644
index 000000000000..4e287b037e20
--- /dev/null
+++ b/Libraries/Lists/__tests__/VirtualizedSectionList-test.js
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+'use strict';
+
+const React = require('React');
+const ReactTestRenderer = require('react-test-renderer');
+
+const VirtualizedSectionList = require('VirtualizedSectionList');
+
+describe('VirtualizedSectionList', () => {
+  it('renders simple list', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={[
+          {title: 's1', data: [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]},
+        ]}
+        renderItem={({item}) => <item value={item.key} />}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders empty list', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={[]}
+        renderItem={({item}) => <item value={item.key} />}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders null list', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={undefined}
+        renderItem={({item}) => <item value={item.key} />}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => 0}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders empty list with empty component', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={[]}
+        ListEmptyComponent={() => <empty />}
+        ListFooterComponent={() => <footer />}
+        ListHeaderComponent={() => <header />}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+        renderItem={({item}) => <item value={item.key} />}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders list with empty component', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={[{title: 's1', data: [{key: 'hello'}]}]}
+        ListEmptyComponent={() => <empty />}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+        renderItem={({item}) => <item value={item.key} />}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders all the bells and whistles', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        ItemSeparatorComponent={() => <separator />}
+        ListEmptyComponent={() => <empty />}
+        ListFooterComponent={() => <footer />}
+        ListHeaderComponent={() => <header />}
+        sections={[
+          {
+            title: 's1',
+            data: new Array(5).fill().map((_, ii) => ({id: String(ii)})),
+          },
+        ]}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+        getItemLayout={({index}) => ({length: 50, offset: index * 50})}
+        inverted={true}
+        keyExtractor={(item, index) => item.id}
+        onRefresh={jest.fn()}
+        refreshing={false}
+        renderItem={({item}) => <item value={item.id} />}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('handles separators correctly', () => {
+    const infos = [];
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        ItemSeparatorComponent={props => <separator {...props} />}
+        sections={[
+          {title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
+        ]}
+        renderItem={info => {
+          infos.push(info);
+          return <item title={info.item.key} />;
+        }}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+    infos[1].separators.highlight();
+    expect(component).toMatchSnapshot();
+    infos[2].separators.updateProps('leading', {press: true});
+    expect(component).toMatchSnapshot();
+    infos[1].separators.unhighlight();
+  });
+
+  it('handles nested lists', () => {
+    const component = ReactTestRenderer.create(
+      <VirtualizedSectionList
+        sections={[{title: 'outer', data: [{key: 'outer0'}, {key: 'outer1'}]}]}
+        renderItem={outerInfo => (
+          <VirtualizedSectionList
+            sections={[
+              {
+                title: 'inner',
+                data: [
+                  {key: outerInfo.item.key + ':inner0'},
+                  {key: outerInfo.item.key + ':inner1'},
+                ],
+              },
+            ]}
+            horizontal={outerInfo.item.key === 'outer1'}
+            renderItem={innerInfo => {
+              return <item title={innerInfo.item.key} />;
+            }}
+            getItem={(data, key) => data[key]}
+            getItemCount={data => data.length}
+          />
+        )}
+        getItem={(data, key) => data[key]}
+        getItemCount={data => data.length}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
new file mode 100644
index 000000000000..f868241ef158
--- /dev/null
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
@@ -0,0 +1,1263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VirtualizedSectionList handles nested lists 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "outer0",
+          },
+          Object {
+            "key": "outer1",
+          },
+        ],
+        "title": "outer",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "outer0",
+          },
+          Object {
+            "key": "outer1",
+          },
+        ],
+        "title": "outer",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        data={
+          Array [
+            Object {
+              "data": Array [
+                Object {
+                  "key": "outer0:inner0",
+                },
+                Object {
+                  "key": "outer0:inner1",
+                },
+              ],
+              "title": "inner",
+            },
+          ]
+        }
+        disableVirtualization={false}
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={false}
+        initialNumToRender={10}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={10}
+        onContentSizeChange={[Function]}
+        onEndReachedThreshold={2}
+        onLayout={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        sections={
+          Array [
+            Object {
+              "data": Array [
+                Object {
+                  "key": "outer0:inner0",
+                },
+                Object {
+                  "key": "outer0:inner1",
+                },
+              ],
+              "title": "inner",
+            },
+          ]
+        }
+        stickyHeaderIndices={Array []}
+        updateCellsBatchingPeriod={50}
+        windowSize={21}
+      >
+        <View
+          onLayout={[Function]}
+          style={null}
+        />
+        <View
+          onLayout={[Function]}
+          style={null}
+        >
+          <item
+            title="outer0:inner0"
+          />
+        </View>
+        <View
+          onLayout={[Function]}
+          style={null}
+        >
+          <item
+            title="outer0:inner1"
+          />
+        </View>
+        <View
+          onLayout={[Function]}
+          style={null}
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <RCTScrollView
+        data={
+          Array [
+            Object {
+              "data": Array [
+                Object {
+                  "key": "outer1:inner0",
+                },
+                Object {
+                  "key": "outer1:inner1",
+                },
+              ],
+              "title": "inner",
+            },
+          ]
+        }
+        disableVirtualization={false}
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        initialNumToRender={10}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={10}
+        onContentSizeChange={[Function]}
+        onEndReachedThreshold={2}
+        onLayout={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        sections={
+          Array [
+            Object {
+              "data": Array [
+                Object {
+                  "key": "outer1:inner0",
+                },
+                Object {
+                  "key": "outer1:inner1",
+                },
+              ],
+              "title": "inner",
+            },
+          ]
+        }
+        stickyHeaderIndices={Array []}
+        updateCellsBatchingPeriod={50}
+        windowSize={21}
+      >
+        <View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          />
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <item
+              title="outer1:inner0"
+            />
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <item
+              title="outer1:inner1"
+            />
+          </View>
+          <View
+            onLayout={[Function]}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          />
+        </View>
+      </RCTScrollView>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList handles separators correctly 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i0"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i0",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i1"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i2",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList handles separators correctly 2`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i0"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i0",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i1"
+        />
+        <separator
+          highlighted={true}
+          leadingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i2",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList handles separators correctly 3`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i0",
+          },
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "title": "s0",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i0"
+        />
+        <separator
+          highlighted={false}
+          leadingItem={
+            Object {
+              "key": "i0",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <item
+          title="i1"
+        />
+        <separator
+          highlighted={true}
+          leadingItem={
+            Object {
+              "key": "i1",
+            }
+          }
+          section={
+            Object {
+              "data": Array [
+                Object {
+                  "key": "i0",
+                },
+                Object {
+                  "key": "i1",
+                },
+                Object {
+                  "key": "i2",
+                },
+              ],
+              "title": "s0",
+            }
+          }
+          trailingItem={
+            Object {
+              "key": "i2",
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
+<RCTScrollView
+  ListEmptyComponent={[Function]}
+  ListFooterComponent={[Function]}
+  ListHeaderComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "id": "0",
+          },
+          Object {
+            "id": "1",
+          },
+          Object {
+            "id": "2",
+          },
+          Object {
+            "id": "3",
+          },
+          Object {
+            "id": "4",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  invertStickyHeaders={true}
+  inverted={true}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onRefresh={[MockFunction]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  refreshControl={
+    <RefreshControlMock
+      onRefresh={[MockFunction]}
+      refreshing={false}
+    />
+  }
+  refreshing={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "id": "0",
+          },
+          Object {
+            "id": "1",
+          },
+          Object {
+            "id": "2",
+          },
+          Object {
+            "id": "3",
+          },
+          Object {
+            "id": "4",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  style={
+    Array [
+      Object {
+        "transform": Array [
+          Object {
+            "scaleY": -1,
+          },
+        ],
+      },
+      undefined,
+    ]
+  }
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <RCTRefreshControl />
+  <View>
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "scaleY": -1,
+            },
+          ],
+        }
+      }
+    >
+      <header />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    >
+      <View>
+        <item
+          value="0"
+        />
+        <separator />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    >
+      <View>
+        <item
+          value="1"
+        />
+        <separator />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    >
+      <View>
+        <item
+          value="2"
+        />
+        <separator />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    >
+      <View>
+        <item
+          value="3"
+        />
+        <separator />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    >
+      <item
+        value="4"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
+      }
+    />
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "scaleY": -1,
+            },
+          ],
+        }
+      }
+    >
+      <footer />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders empty list 1`] = `
+<RCTScrollView
+  data={Array []}
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={Array []}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View />
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders empty list with empty component 1`] = `
+<RCTScrollView
+  ListEmptyComponent={[Function]}
+  ListFooterComponent={[Function]}
+  ListHeaderComponent={[Function]}
+  data={Array []}
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={Array []}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <header />
+    </View>
+    <empty />
+    <View
+      onLayout={[Function]}
+    >
+      <footer />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders list with empty component 1`] = `
+<RCTScrollView
+  ListEmptyComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "hello",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "hello",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        value="hello"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders null list 1`] = `
+<RCTScrollView
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View />
+</RCTScrollView>
+`;
+
+exports[`VirtualizedSectionList renders simple list 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+          Object {
+            "key": "i3",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+          Object {
+            "key": "i3",
+          },
+        ],
+        "title": "s1",
+      },
+    ]
+  }
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        value="i1"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        value="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <item
+        value="i3"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+  </View>
+</RCTScrollView>
+`;
diff --git a/Libraries/react-native/react-native-implementation.js b/Libraries/react-native/react-native-implementation.js
index 6303313b0295..630e2f2c6e8b 100644
--- a/Libraries/react-native/react-native-implementation.js
+++ b/Libraries/react-native/react-native-implementation.js
@@ -176,6 +176,9 @@ module.exports = {
   get VirtualizedList() {
     return require('VirtualizedList');
   },
+  get VirtualizedSectionList() {
+    return require('VirtualizedSectionList');
+  },
 
   // APIs
   get ActionSheetIOS() {