Support ListEmptyComponent

Author: janicduplessis

src/MasonryList.js

@@ -49,6 +49,7 @@ export type Props = {
   >,
   getHeightForItem: ({ item: any, index: number }) => number,
   ListHeaderComponent?: ?React.ComponentType<any>,
+  ListEmptyComponent?: ?React.ComponentType<any>,
   /**
    * Used to extract a unique key for a given item at the specified index. Key is used for caching
    * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
@@ -217,6 +218,7 @@ export default class MasonryList extends React.Component<Props, State> {
     const {
       renderItem,
       ListHeaderComponent,
+      ListEmptyComponent,
       keyExtractor,
       onEndReached,
       ...props
@@ -225,6 +227,10 @@ export default class MasonryList extends React.Component<Props, State> {
     if (ListHeaderComponent) {
       headerElement = <ListHeaderComponent />;
     }
+    let emptyElement;
+    if (ListEmptyComponent) {
+      emptyElement = <ListEmptyComponent />;
+    }
 
     const content = (
       <View style={styles.contentContainer}>
@@ -263,7 +269,7 @@ export default class MasonryList extends React.Component<Props, State> {
         onMomentumScrollEnd: this._onMomentumScrollEnd,
       },
       headerElement,
-      content,
+      emptyElement && this.props.data.length === 0 ? emptyElement : content,
     );
 
     return scrollComponent;

src/__tests__/MasonryList-test.js

@@ -52,4 +52,18 @@ describe('MasonryList', () => {
       .toJSON();
     expect(component).toMatchSnapshot();
   });
+
+  it('should render empty component', () => {
+    const component = renderer
+      .create(
+        <MasonryList
+          data={[]}
+          getHeightForItem={() => 1}
+          ListEmptyComponent={() => <empty />}
+          renderItem={({ item }) => <item value={item.key} />}
+        />,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
 });

src/__tests__/__snapshots__/MasonryList-test.js.snap

@@ -183,3 +183,26 @@ exports[`MasonryList should render a single column list 1`] = `
   </View>
 </RCTScrollView>
 `;
+
+exports[`MasonryList should render empty component 1`] = `
+<RCTScrollView
+  ListEmptyComponent={[Function]}
+  data={Array []}
+  getHeightForItem={[Function]}
+  numColumns={1}
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+>
+  <View>
+    <empty />
+  </View>
+</RCTScrollView>
+`;