@momo-kits/foundation 0.81.2 → 0.81.4

package/Layout/ItemList.tsx

@@ -2,11 +2,13 @@ import React, {FC, ReactElement, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item from './Item';
 import {GridContext} from './index';
+import styles from './styles';
 
 const ItemList: FC<FlatListProps<any>> = ({
   renderItem,
   numColumns = 1,
   style,
+  contentContainerStyle,
   ...props
 }) => {
   const {gutterSize} = useContext(GridContext);
@@ -24,14 +26,16 @@ const ItemList: FC<FlatListProps<any>> = ({
       console.warn('Wrong children type for this component, expected are Item');
     }
 
-    const spacingStyle =
-      numColumns > 1
-        ? {
+    return (
+      <View
+        style={
+          numColumns > 1 && {
             marginRight: gutterSize,
           }
-        : {};
-
-    return <View style={spacingStyle}>{children}</View>;
+        }>
+        {children}
+      </View>
+    );
   };
 
   return (
@@ -41,21 +45,8 @@ const ItemList: FC<FlatListProps<any>> = ({
       renderItem={_renderItem}
       horizontal={false}
       ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[
-        style,
-        {
-          marginTop: undefined,
-          marginBottom: undefined,
-          marginLeft: undefined,
-          marginRight: undefined,
-          paddingTop: undefined,
-          paddingBottom: undefined,
-          paddingLeft: undefined,
-          paddingRight: undefined,
-          padding: undefined,
-          margin: undefined,
-        },
-      ]}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
     />
   );
 };

package/Layout/styles.ts

@@ -77,4 +77,20 @@ export default StyleSheet.create({
     right: 0,
     borderRadius: Spacing.M,
   },
+  protectedStyle: {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    padding: undefined,
+    margin: undefined,
+    marginHorizontal: undefined,
+    marginVertical: undefined,
+    paddingHorizontal: undefined,
+    paddingVertical: undefined,
+  },
 });

package/Layout/types.ts

@@ -1,5 +1,3 @@
-import {FlatListProps} from 'react-native';
-
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.

package/Layout/utils.ts

@@ -8,7 +8,7 @@ import React, {Fragment, ReactElement, useEffect, useState} from 'react';
  */
 const validateChildren = (
   children: React.ReactNode | React.ReactNode[],
-  childrenTypes: Array<React.FC>,
+  childrenTypes: Array<React.ReactNode>,
 ) => {
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
@@ -17,7 +17,7 @@ const validateChildren = (
     if (!valid) {
       console.warn(
         `Wrong children type for this component, expected are ${childrenTypes
-          .map(type => type.displayName)
+          .map(item => item)
           .join(', ')}.`,
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.2",
+    "version": "0.81.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {