@momo-kits/foundation 0.81.1-beta.3 → 0.81.1-beta.4

package/Application/ModalScreen.tsx

@@ -160,7 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
-        bottomInset={bottomInset}
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>

package/Layout/Item.tsx

@@ -5,7 +5,7 @@ import {GridContext} from './index';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 
-type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export interface ItemProps extends ViewProps {
   /**

package/Layout/ItemList.tsx

@@ -1,39 +1,40 @@
-import React, {FC, ReactElement, useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
-import Item from './Item';
+import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
 import styles from './styles';
 
-const ItemList: FC<FlatListProps<any>> = ({
+export interface ItemListProps extends FlatListProps<any> {
+  /**
+   * Require key support number columns change grid system
+   */
+
+  key: string;
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemList: FC<ItemListProps> = ({
+  key,
   renderItem,
-  numColumns = 1,
+  widthSpan,
   style,
   contentContainerStyle,
   ...props
 }) => {
-  const {gutterSize} = useContext(GridContext);
-
-  const _renderItem = (info: any) => {
-    const {item, index, separators} = info;
-
-    const children = renderItem?.({
-      item,
-      index,
-      separators,
-    }) as ReactElement;
-
-    if (children?.type !== Item) {
-      console.warn('Wrong children type for this component, expected are Item');
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const numColumns = Math.floor(numberOfColumns / widthItem);
+  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+  const _renderItem = (item: any) => {
+    if (indexBegin?.includes(item?.index)) {
+      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
     }
-
     return (
-      <View
-        style={
-          numColumns > 1 && {
-            marginRight: gutterSize,
-          }
-        }>
-        {children}
+      <View style={{paddingLeft: gutterSize}}>
+        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
       </View>
     );
   };
@@ -41,6 +42,7 @@ const ItemList: FC<FlatListProps<any>> = ({
   return (
     <FlatList
       {...props}
+      key={`${key ?? 'ItemList'}${numColumns}}`}
       numColumns={numColumns}
       renderItem={_renderItem}
       horizontal={false}

package/package.json

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