Merge pull request #296 from HyopeR/master

Stabilize the unstable empty component.

Author: marcocesarato

lib/BigList.jsx

@@ -685,10 +685,11 @@ class BigList extends PureComponent {
     // On empty list
     const isEmptyList = this.isEmpty();
     const emptyItem = ListEmptyComponent
-      ? createElement(ListEmptyComponent)
+      ? createElement(ListEmptyComponent, {style: fullItemStyle})
       : renderEmpty
-      ? renderEmpty()
+      ? createElement(renderEmpty(), {style: fullItemStyle})
       : null;
+
     if (isEmptyList && emptyItem) {
       if (hideMarginalsOnEmpty || (hideHeaderOnEmpty && hideFooterOnEmpty)) {
         // Render empty
@@ -700,7 +701,7 @@ class BigList extends PureComponent {
         );
         items.splice(headerIndex + 1, 0, {
           type: BigListItemType.EMPTY,
-          key: "empty",
+          key: 'empty',
         });
         if (hideHeaderOnEmpty) {
           // Hide header
@@ -809,7 +810,11 @@ class BigList extends PureComponent {
           }
           break;
         case BigListItemType.EMPTY:
-          children.push(<View key={itemKey}>{emptyItem}</View>);
+          children.push(
+            <React.Fragment key={itemKey}>
+              {emptyItem}
+            </React.Fragment>
+          );
           break;
         case BigListItemType.SPACER:
           children.push(
@@ -985,8 +990,6 @@ class BigList extends PureComponent {
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         ) : null,
       contentContainerStyle: {
-        flexDirection: "row",
-        flexWrap: "wrap",
         maxWidth: "100%",
       },
     };

lib/index.d.ts

@@ -22,7 +22,7 @@ export type BigListRenderItem<ItemT> = (
   info: BigListRenderItemInfo<ItemT>,
 ) => React.ReactElement | null;
 
-interface BigListProps<ItemT>
+export interface BigListProps<ItemT>
   extends ScrollViewProps,
     Pick<
       FlatListProps<ItemT>,

lib/utils.js

@@ -125,14 +125,15 @@ export const mergeViewStyle = (style, defaultStyle = {}) => {
 /**
  * Get element from component.
  * @param {React.node} Component
+ * @param props
  * @returns {JSX.Element|[]|*}
  */
-export const createElement = (Component) => {
+export const createElement = (Component, props) => {
   return Component != null ? (
     React.isValidElement(Component) ? (
-      Component
+      React.cloneElement(Component, props)
     ) : (
-      <Component />
+      <Component {...props} />
     )
   ) : null;
 };