@momo-kits/foundation 0.75.1-beta.11 → 0.75.1-beta.13

package/Layout/Card.tsx

@@ -115,20 +115,20 @@ const Card: React.FC<CardProps> = ({children, style}) => {
     return element;
   };
 
-  const styles: any = style ?? {};
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
         accessibilityLabel={`Card`}
-        style={{
-          ...styles,
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          padding: 12,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        }}>
+        style={[
+          style,
+          {
+            width: widthSection,
+            marginHorizontal: gridContext.margin,
+            padding: 12,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {renderView(validateChildren(children, [Item]))}
         {GRIDVIEW && renderOverlay()}
       </View>

package/Layout/Item.tsx

@@ -33,22 +33,22 @@ const Item: React.FC<ItemProps> = ({
     );
   };
 
-  const styles: any = style ?? {};
-
   return (
     <View
       accessibilityLabel={`Item`}
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
+      style={[
+        style,
+        {
+          width: grid.getSizeSpan(widthSpan),
+          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+          overflow: 'hidden',
+          margin: undefined,
+          marginTop: undefined,
+          marginBottom: undefined,
+          marginLeft: undefined,
+          marginRight: undefined,
+        },
+      ]}>
       {children}
       {GRIDVIEW && renderOverlay()}
     </View>

package/Layout/ScreenContainer.tsx

@@ -57,11 +57,12 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
     const results = validateChildren(children, [Section, Card]);
     if (Array.isArray(results)) {
       return results.map((item, index) => {
+        const space = item.props.useMargin === false ? 0 : Spacing.M;
         return (
           <View
             key={`ScreenItem${index}`}
             style={{
-              marginTop: Spacing.M,
+              marginTop: space,
               flex: item.props?.expanded ? 1 : undefined,
             }}>
             {item}

package/Navigation/BottomTab.tsx

@@ -5,15 +5,16 @@ import {Icon} from '../Icon';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+const BottomTab: FC<BottomTabProps> = ({tabs, listeners}) => {
   return (
     <Tab.Navigator>
       {tabs.map((item, index) => {
         return (
           <Tab.Screen
-            key={`${item.label}-${index}`}
-            name={item.label}
+            key={item.name}
+            name={item.name}
             component={item.screen}
+            listeners={listeners}
             options={{
               tabBarLabel: item.label,
               tabBarBadge: item?.badgeLabel,

package/Navigation/types.ts

@@ -2,6 +2,7 @@ import {Animated, ScrollViewProps, ViewProps} from 'react-native';
 import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
+import {ScreenListeners} from '@react-navigation/core/lib/typescript/src/types';
 
 export type Theme = {
   dark: boolean;
@@ -146,6 +147,7 @@ export type HeaderToolkitProps = {
 };
 
 export type BottomTabItemProps = {
+  name: string;
   label: string;
   icon: string;
   showDot?: boolean;
@@ -155,4 +157,8 @@ export type BottomTabItemProps = {
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  listeners: {
+    tabPress?: any;
+    focus?: any;
+  };
 };

package/package.json

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