@momo-kits/foundation 0.104.1-beta.13 → 0.104.1-beta.15

package/Application/BottomTab/index.tsx

@@ -80,7 +80,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar {...props} floatingButton={floatingButton} />
+        <BottomTabBar
+          {...props}
+          floatingButton={floatingButton}
+          inactiveTintColor={theme.colors.text.secondary}
+        />
       )}
       tabBarOptions={{
         style: {
@@ -90,6 +94,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           height: 68,
           paddingVertical: 10,
         },
+        inactiveTintColor: theme.colors.text.secondary,
       }}>
       {tabs.map(item => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));

package/Application/Components.tsx

@@ -7,7 +7,6 @@ import React, {
   useState,
 } from 'react';
 import {
-  Alert,
   Animated,
   BackHandler,
   DeviceEventEmitter,
@@ -47,18 +46,16 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
-  useBorder = true,
   badgeType,
   badgeValue,
   accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
-  let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
-  if (tintColor !== Colors.black_01) {
+  let buttonStyle: ViewStyle = {};
+  if (tintColor === Colors.black_01) {
     buttonStyle = {
-      backgroundColor: Colors.black_01 + '33',
-      borderColor: '#00000066',
-      borderWidth: useBorder ? 0.5 : 0,
+      backgroundColor: '#00000099',
+      borderColor: '#FFFFFF33',
     };
   }
 
@@ -135,7 +132,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
   onPressLeftHeader,
-  useBorder,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
@@ -203,10 +199,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     <View style={styles.headerLeft}>
       <NavigationButton
         accessibilityLabel="btn_navigation_back"
-        icon="ic_back"
+        icon="arrow-back"
         tintColor={tintColor}
         onPress={goBackSafe}
-        useBorder={useBorder}
       />
     </View>
   );
@@ -218,9 +213,11 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
+  useGradient = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let Component: any = View;
   if (image === null) {
     headerImage = undefined;
   }
@@ -229,7 +226,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
-
+  if (useGradient) {
+    Component = LinearGradient;
+  }
   return (
     <Animated.View
       style={[
@@ -238,10 +237,11 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
           overflow: 'hidden',
           borderBottomWidth: 1,
           borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.surface,
           opacity,
         },
       ]}>
-      <LinearGradient
+      <Component
         colors={['rgba(253, 202, 222, 1)', 'rgba(253, 202, 222, 0)']}
         style={styles.extendedHeader}>
         {!!headerImage && (
@@ -251,8 +251,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
             loading={false}
           />
         )}
-      </LinearGradient>
-      <Verified />
+      </Component>
     </Animated.View>
   );
 };
@@ -303,32 +302,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 /**
  * main component for header right
  */
-const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
-  if (type === 'icon') {
-    let buttons = props?.buttons || [];
-    if (buttons?.length > 3) {
-      buttons = buttons.slice(0, 3);
-    }
-    return (
-      <View style={styles.headerRightButton} onLayout={onLayout}>
-        {buttons?.map?.((item: NavigationButtonProps, index: number) => {
-          return (
-            <View
-              key={`HeaderRightAction ${index}`}
-              style={{
-                marginLeft: index !== 0 ? Spacing.S : 0,
-              }}>
-              <NavigationButton {...item} tintColor={props?.tintColor} />
-            </View>
-          );
-        })}
-      </View>
-    );
-  }
-
+const HeaderRight: React.FC<any> = ({onLayout, ...props}) => {
   return (
     <View style={styles.headerRightButton} onLayout={onLayout}>
-      {children ?? <HeaderToolkitAction {...props} />}
+      <HeaderToolkitAction {...props} />
       <Verified />
     </View>
   );
@@ -340,17 +317,18 @@ const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
-  runtimeTools = [],
   preventClose,
 }) => {
   const {navigator} = useContext(ApplicationContext);
   const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
-  const {onAction} = toolConfig ?? {};
 
-  let backgroundColor;
-  if (tintColor !== Colors.black_01) {
-    backgroundColor = Colors.black_01 + '33';
+  let buttonStyle: ViewStyle = {};
+  if (tintColor === Colors.black_01) {
+    buttonStyle = {
+      backgroundColor: '#00000099',
+      borderColor: '#FFFFFF33',
+    };
   }
 
   useEffect(() => {
@@ -374,19 +352,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   };
 
-  const onMore = () => {
-    onAction?.('onMore');
-    navigator?.maxApi?.dispatchFunction?.(
-      'showTools',
-      {runtimeTools},
-      (res: {item: {action?: string; key: string}}) => {
-        const {item} = res;
-        navigator?.toolkitCallback?.(item.key);
-        getToolkitConfig();
-      }
-    );
-  };
-
   const onClose = () => {
     if (preventClose) {
       navigator?.showModal({
@@ -433,46 +398,35 @@ const HeaderToolkitAction: React.FC<any> = ({
                 getToolkitConfig();
               }
             );
-            navigator?.toolkitCallback?.(pinTool.key);
+            navigator?.toolkitCallback?.(pinTool?.key);
           }}
         />
       );
   };
 
-  if (toolConfig) {
-    return (
-      <View style={Styles.row}>
-        {renderPinnedTool()}
-        <View
-          style={[
-            styles.toolkitContainer,
-            {
-              backgroundColor: backgroundColor ?? '#00000066',
-              borderWidth: backgroundColor ? 0.5 : 0,
-              marginLeft: renderPinnedTool() ? Spacing.S : 0,
-            },
-          ]}>
-          <TouchableOpacity
-            accessibilityLabel={'btn_navigation_more'}
-            onPress={onMore}>
-            <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </TouchableOpacity>
-          <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={'btn_navigation_close'}
-            onPress={onClose}>
-            <Icon
-              color={tintColor}
-              source="16_navigation_close_circle"
-              size={20}
-            />
-          </TouchableOpacity>
-        </View>
+  return (
+    <View style={Styles.row}>
+      {renderPinnedTool()}
+      <View style={[styles.toolkitContainer, buttonStyle]}>
+        <TouchableOpacity
+          accessibilityLabel={'btn_navigation_help_center'}
+          style={styles.toolkitButton}>
+          <Icon color={tintColor} source="help_center" size={20} />
+        </TouchableOpacity>
+        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        <TouchableOpacity
+          accessibilityLabel={'btn_navigation_close'}
+          onPress={onClose}
+          style={styles.toolkitButton}>
+          <Icon
+            color={tintColor}
+            source="16_navigation_close_circle"
+            size={20}
+          />
+        </TouchableOpacity>
       </View>
-    );
-  }
-
-  return <View />;
+    </View>
+  );
 };
 
 /**
@@ -671,35 +625,8 @@ const HeaderExtendHeader: React.FC<{
   return <View />;
 };
 
-const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
-  if (__DEV__) {
-    Alert.alert(
-      'HeaderRightAction',
-      'This component is deprecated and will removed 10/2024, please use new type headerRight specs instead v0.92.34'
-    );
-  }
-  const validateType = (child: React.ReactElement) => {
-    return child;
-  };
-
-  const renderAction = () => {
-    if (Array.isArray(children)) {
-      return children.map((child, index) => {
-        return (
-          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
-            {React.cloneElement(validateType(child), {...restProps})}
-          </View>
-        );
-      });
-    }
-
-    return (
-      <View style={styles.headerButton}>
-        {React.cloneElement(validateType(children), {...restProps})}
-      </View>
-    );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+const HeaderRightAction: React.FC<any> = () => {
+  return <View />;
 };
 
 const Verified: React.FC<any> = () => {
@@ -717,6 +644,9 @@ const styles = StyleSheet.create({
     borderRadius: 14,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#FFFFFF99',
+    borderColor: '#00000033',
+    borderWidth: 0.2,
   },
   headerBackground: {
     width: '100%',
@@ -749,18 +679,22 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    padding: Spacing.XS,
+    paddingHorizontal: Spacing.XS,
     height: 28,
     borderRadius: 14,
-    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
+    backgroundColor: '#FFFFFF99',
+    borderColor: '#00000033',
+    borderWidth: 0.2,
+  },
+  toolkitButton: {
+    padding: 4,
   },
   divider: {
-    width: 1,
+    width: 0.5,
     height: 12,
-    marginHorizontal: 4,
   },
   headerLeft: {
     marginLeft: 12,

package/Application/Navigation.ts

@@ -19,7 +19,10 @@ class Navigation {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
     }
-
+    if (params.headerRight && params.headerRight !== 'object') {
+      console.warn('headerRight not allow type func render by design system!');
+      delete params.headerRight;
+    }
     return params;
   };
 

package/Application/NavigationContainer.tsx

@@ -13,12 +13,13 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import Localize from './Localize';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
-  theme,
+  theme = defaultTheme,
   options,
   maxApi,
   initialParams,

package/Application/Navigator.ts

@@ -38,6 +38,7 @@ class Navigator {
       this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
+
   /**
    * pop to dismiss a screen
    * @param count
@@ -61,25 +62,42 @@ class Navigator {
   /**
    * show a modal popup
    * @param params
+   * @param onError
    */
-  showModal = (params: ModalParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.push('Modal', params));
+  showModal = (params: ModalParams, onError?: (error: string) => void) => {
+    try {
+      if (this.isReady.current) {
+        this.ref.current?.dispatch?.(StackActions.push('Modal', params));
+      } else {
+        onError?.('NavigationContainer not ready');
+      }
+    } catch (error) {
+      onError?.(`${error}`);
     }
   };
 
   /**
    * show a bottom sheet
    * @param params
+   * @param onError
    */
-  showBottomSheet = (params: BottomSheetParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        StackActions.push('Modal', {
-          ...params,
-          isBottomSheet: true,
-        })
-      );
+  showBottomSheet = (
+    params: BottomSheetParams,
+    onError?: (error: string) => void
+  ) => {
+    try {
+      if (this.isReady.current) {
+        this.ref.current?.dispatch?.(
+          StackActions.push('Modal', {
+            ...params,
+            isBottomSheet: true,
+          })
+        );
+      } else {
+        onError?.('NavigationContainer not ready');
+      }
+    } catch (error) {
+      onError?.(`${error}`);
     }
   };
 

package/Application/StackScreen.tsx

@@ -50,18 +50,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
-    let defaultOptions = {
-      headerRight: {
-        type: 'toolkit',
-      },
-    };
     if (options) {
-      defaultOptions = {
-        ...defaultOptions,
-        ...options,
-      };
+      navigation.setOptions(options);
     }
-    navigation.setOptions(defaultOptions);
   }, [options]);
 
   /**

package/Application/types.ts

@@ -127,7 +127,6 @@ export type BottomSheetParams = {
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  useBorder?: boolean;
   onPress: () => void;
   badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
@@ -152,20 +151,13 @@ export interface NavigationOptions
   onPressLeftHeader?: () => void;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
+  headerRight?: HeaderRightToolkit | any;
 }
 
 export type HeaderRightToolkit = {
-  type?: 'toolkit';
   pinnedTool?: PinnedToolType;
   runtimeTools?: RuntimeToolType[];
   preventClose?: PopupNotifyProps;
-  useMore?: boolean;
-};
-
-export type HeaderRightActions = {
-  type?: 'icon';
-  buttons: NavigationButtonProps[];
 };
 
 export interface HeaderBackProps extends NavigationButtonProps {
@@ -176,6 +168,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 export type HeaderBackgroundProps = {
   image?: string | null;
   animatedValue?: Animated.Value;
+  useGradient?: boolean;
+  backgroundColor?: string;
 };
 
 export type TitleCustomProps = {
@@ -236,7 +230,7 @@ export type FloatingButtonProps = {
 };
 
 export type AnimatedHeader = {
-  type: 'default';
+  headerTintColor?: string;
   component?: (props?: any) => React.ReactElement;
   headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -38,6 +38,7 @@ const getDialogOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     ...TransitionPresets.ModalTransition,
   };
@@ -121,7 +122,7 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
    *  header right
    */
   if (params.headerRight) {
-    let headerRight: any = (props: any) => {
+    const headerRight = (props: any) => {
       return (
         <HeaderRight
           {...props}
@@ -132,19 +133,6 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
         />
       );
     };
-    if (typeof params.headerRight === 'function') {
-      headerRight = (props: any) => {
-        return (
-          <HeaderRight
-            {...props}
-            onLayout={(e: LayoutChangeEvent) => {
-              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
-            }}>
-            {params.headerRight(props)}
-          </HeaderRight>
-        );
-      };
-    }
     options = {
       ...options,
       headerRight,
@@ -164,6 +152,7 @@ const formatNameLength = (name = '') => {
   }
   return formattedName;
 };
+
 export {
   getStackOptions,
   getDialogOptions,

package/Assets/icon.json

@@ -4027,5 +4027,11 @@
   },
   "travel_suitcase": {
     "uri": "https://static.momocdn.net/app/img/kits/travel_suitcase.png"
+  },
+  "help_center": {
+    "uri": "https://static.momocdn.net/app/img/kits/help-center.png"
+  },
+  "arrow-back": {
+    "uri": "https://static.momocdn.net/app/img/kits/arrow-back.png"
   }
 }

package/Button/index.tsx

@@ -289,14 +289,6 @@ const Button: FC<ButtonProps> = ({
     full && {width: '100%'},
   ]);
 
-  const onPressButton = () => {
-    if (type === 'disabled') {
-      return () => {};
-    }
-    onPress?.();
-  };
-
-  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   return (
     <ComponentContext.Provider
       value={{
@@ -309,9 +301,10 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
+        disabled={type === 'disabled'}
         accessibilityLabel={accessibilityLabel}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
+        activeOpacity={0.5}
+        onPress={onPress}
         style={buttonStyle}>
         {renderLeading()}
         {renderTitle()}

package/Icon/index.tsx

@@ -10,6 +10,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color,
   style = {},
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -34,6 +35,7 @@ const Icon: React.FC<IconProps> = ({
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       resizeMode="contain"
+      accessibilityLabel={accessibilityLabel}
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -24,4 +24,9 @@ export type IconProps = {
    * Accepts an object of style properties.
    */
   style?: StyleProp<ImageStyle>;
+
+  /**
+   *  Optional. Represents the accessibility label for the icon.
+   */
+  accessibilityLabel?: string;
 };

package/IconButton/index.tsx

@@ -1,6 +1,5 @@
 import React, {useContext} from 'react';
 import {
-  GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
@@ -109,17 +108,6 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
-  /**
-   * handle press
-   * @param e
-   */
-  const onPressButton = (e: GestureResponderEvent) => {
-    if (type === 'disabled') {
-      return () => {};
-    }
-    onPress?.(e);
-  };
-
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
   const iconSize = size === 'small' ? 16 : 24;
@@ -136,9 +124,10 @@ const IconButton: React.FC<IconButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
+        disabled={type === 'disabled'}
         accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
-        onPress={onPressButton}
+        onPress={onPress}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>

package/Image/index.tsx

@@ -1,12 +1,8 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -23,8 +19,6 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const app = useContext<any>(MiniAppContext);
-  const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
@@ -32,13 +26,6 @@ const Image: React.FC<ImageProps> = ({
     accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
   };
 
-  useEffect(() => {
-    if (app.enableAutoId) {
-      component?.addChildren?.(test.accessibilityLabel, 'add');
-      return () => component?.addChildren?.(test.accessibilityLabel, 'remove');
-    }
-  }, []);
-
   /**
    * render content loading | fail | rendered
    */

package/Layout/Screen.tsx

@@ -26,7 +26,7 @@ import {
 } from '../Application';
 import Navigation from '../Application/Navigation';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
-import {Spacing, Styles} from '../Consts';
+import {Colors, Spacing, Styles} from '../Consts';
 import {FloatingButton, FloatingButtonProps} from './FloatingButton';
 import {Card, Section, validateChildren} from './index';
 import styles from './styles';
@@ -138,6 +138,7 @@ const Screen = forwardRef(
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
+    const currentTint = useRef<string>(Colors.black_01);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
     let handleScroll;
@@ -193,6 +194,7 @@ const Screen = forwardRef(
             headerTransparent: false,
             headerShown: true,
             headerBackground: (props: any) => <HeaderBackground {...props} />,
+            headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
             options = {
@@ -219,11 +221,13 @@ const Screen = forwardRef(
        */
       if (animatedHeader) {
         options = {
+          headerTintColor: animatedHeader.headerTintColor ?? Colors.black_01,
           headerTransparent: true,
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
               animatedValue={animatedValue.current}
+              useGradient={false}
             />
           ),
           headerTitle: (props: any) => (
@@ -233,11 +237,12 @@ const Screen = forwardRef(
         if (animatedHeader.headerTitle) {
           options = {
             ...options,
-            headerTitle: (props: any) =>
-              animatedHeader.headerTitle?.({
+            headerTitle: (props: any) => {
+              return animatedHeader.headerTitle?.({
                 ...props,
                 animatedValue: animatedValue.current,
-              }),
+              });
+            },
           };
         }
       }
@@ -250,24 +255,34 @@ const Screen = forwardRef(
      */
     if (scrollable) {
       Component = Animated.ScrollView;
-      handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
-        handleScroll = Animated.event(
-          [
-            {
-              nativeEvent: {
-                contentOffset: {y: animatedValue.current as Animated.Value},
-              },
-            },
-          ],
+      handleScroll = Animated.event(
+        [
           {
-            useNativeDriver: true,
-            listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-              scrollViewProps?.onScroll?.(e);
+            nativeEvent: {
+              contentOffset: {y: animatedValue.current as Animated.Value},
             },
-          }
-        );
-      }
+          },
+        ],
+        {
+          useNativeDriver: true,
+          listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+            scrollViewProps?.onScroll?.(e);
+            if (animatedHeader) {
+              const offsetY = e.nativeEvent.contentOffset.y;
+              let color = Colors.black_01;
+              if (offsetY > 50) {
+                color = theme.colors.text.default;
+              }
+              if (color !== currentTint.current) {
+                currentTint.current = color;
+                navigation?.setOptions({
+                  headerTintColor: color,
+                });
+              }
+            }
+          },
+        }
+      );
     }
 
     /**

package/Layout/styles.ts

@@ -42,7 +42,6 @@ export default StyleSheet.create({
     padding: 12,
   },
   item: {
-    overflow: 'hidden',
     margin: undefined,
     marginTop: undefined,
     marginBottom: undefined,

package/Loader/DotLoader.tsx

@@ -5,7 +5,7 @@ import {ApplicationContext} from '../Application';
 import {hexToRGBA} from './utils';
 import {LoaderProps} from './types';
 
-const DotLoader: FC<LoaderProps> = ({color}) => {
+const DotLoader: FC<LoaderProps> = ({color, style}) => {
   const {theme} = useContext(ApplicationContext);
 
   const arrayColor = [
@@ -28,7 +28,7 @@ const DotLoader: FC<LoaderProps> = ({color}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={{width: 52, height: 18}}
+      style={[{width: 52, height: 18}, style]}
       autoPlay
     />
   );

package/Loader/Spinner.tsx

@@ -5,7 +5,7 @@ import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
 import {LoaderProps} from './types';
 
-const Spinner: FC<LoaderProps> = ({color}) => {
+const Spinner: FC<LoaderProps> = ({color, style}) => {
   const {theme} = useContext(ApplicationContext);
 
   let source: any = animation;
@@ -20,7 +20,7 @@ const Spinner: FC<LoaderProps> = ({color}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={{width: 24, height: 24}}
+      style={[{width: 24, height: 24}, style]}
       autoPlay
     />
   );

package/Text/utils.ts

@@ -12,10 +12,11 @@ const scaleSize = (size: number) => {
   return size;
 };
 const getAccessibilityID = (accessibilityLabel = '') => {
-  if (Platform.OS ==='ios') {
+  if (Platform.OS === 'ios') {
     return {
       accessible: true,
       testID: accessibilityLabel,
+      accessibilityLabel: undefined,
     };
   } else {
     return {
@@ -23,4 +24,4 @@ const getAccessibilityID = (accessibilityLabel = '') => {
     };
   }
 };
-export {scaleSize,getAccessibilityID};
+export {scaleSize, getAccessibilityID};

package/package.json

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