@momo-kits/foundation 0.75.1-beta.10 → 0.75.1-beta.12

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

@@ -21,12 +21,18 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   let marginHeader = 0;
   let handleScroll;
   let imageAnimatedStyle = {};
+  let opacity;
   let Component: any = View;
   if (scrollable) {
     Component = Animated.ScrollView;
   }
   if (scrollY) {
     marginHeader = useHeaderHeight();
+    opacity = scrollY?.interpolate({
+      inputRange: [0, 100],
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    });
     imageAnimatedStyle = {
       transform: [
         {
@@ -80,6 +86,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
               uri: headerBackground,
             }}
             style={{
+              opacity: opacity ?? 1,
               aspectRatio: 1.3,
               ...imageAnimatedStyle,
             }}

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/Components.tsx

@@ -82,7 +82,9 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${props.children}`}
+      accessibilityLabel={`accessibilityLabel/HeaderTitle/${props.children}`}
+      testID={`testID/HeaderTitle/${props.children}`}
+      nativeID={`nativeID/HeaderTitle/${props.children}`}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -339,7 +341,8 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            accessibilityLabel={'Toolkit/Close'}
+            accessibilityLabel={`accessibilityLabel/Toolkit/Close`}
+            testID={`testID/HeaderTitle/Toolkit/Close`}
             onPress={onClose}>
             <Icon
               color={tintColor}

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/Navigation/utils.tsx

@@ -26,7 +26,7 @@ const getTintColor = (theme: Theme): any => {
 
 const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
-    headerTitleAlign: 'center',
+    headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
@@ -37,7 +37,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
 
 const getDialogOptions = (theme: Theme): StackNavigationOptions => {
   return {
-    headerTitleAlign: 'center',
+    headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerBackground: HeaderBackground,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.75.1-beta.10",
+    "version": "0.75.1-beta.12",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -38,4 +38,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}