@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Assets/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.972549019608,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0}],"markers":[]}

package/Badge/Badge.tsx

@@ -1,11 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
 
-import {ApplicationContext, useComponentId} from '../Application';
-import {BadgeProps} from './types';
+import { useComponentId } from '../Application';
+import { ApplicationContext } from '../Context';
+import { BadgeProps } from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
-import {Text} from '../Text';
+import { Colors } from '../Consts';
+import { Text } from '../Text';
 
 const Badge: FC<BadgeProps> = ({
   label = 'Label',
@@ -13,8 +14,8 @@ const Badge: FC<BadgeProps> = ({
   backgroundColor,
   accessibilityLabel,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const {componentId} = useComponentId('Badge', accessibilityLabel);
+  const { theme } = useContext(ApplicationContext);
+  const { componentId } = useComponentId('Badge', accessibilityLabel);
 
   const isValidatedColor = () => {
     const colorKeys = Object.keys(Colors);
@@ -53,12 +54,14 @@ const Badge: FC<BadgeProps> = ({
   return (
     <View style={[style, styles.badgeContainer]}>
       <View
-        style={[styles.badge, {backgroundColor: badgeColor}]}
-        accessibilityLabel={componentId}>
+        style={[styles.badge, { backgroundColor: badgeColor }]}
+        accessibilityLabel={componentId}
+      >
         <Text
           color={Colors.black_01}
           typography={'action_xxs_bold'}
-          accessibilityLabel={`${componentId}|text`}>
+          accessibilityLabel={`${componentId}|text`}
+        >
           {formatTitle()}
         </Text>
       </View>

package/Badge/BadgeRibbon.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { DownTail, UpTail } from './Shape';
 import styles from './styles';
 import { BadgeRibbonProps } from './types';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext, useRef } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -7,19 +7,19 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import { useComponentId } from '../Application';
 import {
   ApplicationContext,
   ComponentContext,
   SkeletonContext,
-  useComponentId,
-} from '../Application';
-import {Text} from '../Text';
-import {Typography} from '../Text/types';
-import {Colors, Spacing} from '../Consts';
+} from '../Context';
+import { Text } from '../Text';
+import { Typography } from '../Text/types';
+import { Colors, Spacing } from '../Consts';
 import styles from './styles';
-import {Icon} from '../Icon';
-import {Loader} from '../Loader';
-import {Skeleton} from '../Skeleton';
+import { Icon } from '../Icon';
+import { Skeleton } from '../Skeleton';
+import LottieView from 'lottie-react-native';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -95,27 +95,29 @@ const Button: FC<ButtonProps> = ({
   accessibilityState,
   ...rest
 }) => {
-  const {theme, config} = useContext(ApplicationContext);
+  const { theme, config } = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
   const componentName = 'Button';
+  const animationRef = useRef<LottieView>(null);
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${title}`,
     rest.accessibilityLabel,
   );
-  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
+  const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
+  const isDisabled = type === 'disabled' || loading;
 
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
-      start: {x: 1, y: 0.5},
-      end: {x: 0, y: 0.5},
+      start: { x: 1, y: 0.5 },
+      end: { x: 0, y: 0.5 },
     };
   }
 
   const getSizeStyle = () => {
-    const styleSheet: {[key: string]: any} = styles;
+    const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
   };
 
@@ -126,7 +128,7 @@ const Button: FC<ButtonProps> = ({
           backgroundColor: theme.colors.background.disable,
         };
       case 'primary':
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
       case 'secondary':
         return {
           backgroundColor: theme.colors.background.surface,
@@ -150,7 +152,7 @@ const Button: FC<ButtonProps> = ({
       case 'text':
         return {};
       default:
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
     }
   };
 
@@ -247,7 +249,16 @@ const Button: FC<ButtonProps> = ({
 
     if (loading) {
       return (
-        <View
+        <LottieView
+          ref={animationRef}
+          source={require('../Assets/lottie_circle_loader.json')}
+          autoPlay
+          loop
+          colorFilters={[
+            { keypath: 'loading 2.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'loading 3.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
+          ]}
           style={[
             styles.trailing,
             {
@@ -256,9 +267,8 @@ const Button: FC<ButtonProps> = ({
               marginRight,
               borderRadius: Spacing.M,
             },
-          ]}>
-          <Loader type="spinner" color={getTextColor()} />
-        </View>
+          ]}
+        />
       );
     }
     if (iconLeft) {
@@ -266,8 +276,9 @@ const Button: FC<ButtonProps> = ({
         <View
           style={[
             styles.leading,
-            {width: iconSize, height: iconSize, marginRight},
-          ]}>
+            { width: iconSize, height: iconSize, marginRight },
+          ]}
+        >
           <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
@@ -287,8 +298,9 @@ const Button: FC<ButtonProps> = ({
         <View
           style={[
             styles.trailing,
-            {width: iconSize, height: iconSize, marginLeft},
-          ]}>
+            { width: iconSize, height: iconSize, marginLeft },
+          ]}
+        >
           <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
@@ -298,11 +310,12 @@ const Button: FC<ButtonProps> = ({
   const buttonStyle = StyleSheet.flatten([
     getSizeStyle(),
     getTypeStyle(),
-    full && {width: '100%'},
+    full && { width: '100%' },
+    loading && { opacity: 0.75 },
   ]);
 
   if (skeleton?.loading) {
-    return <Skeleton style={[buttonStyle, {paddingHorizontal: 0}]} />;
+    return <Skeleton style={[buttonStyle, { paddingHorizontal: 0 }]} />;
   }
 
   return (
@@ -312,19 +325,21 @@ const Button: FC<ButtonProps> = ({
         componentId,
         params,
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...rest}
         accessibilityLabel={componentId}
         accessibilityRole="button"
         accessibilityState={{
-          disabled: type === 'disabled',
+          disabled: isDisabled,
           busy: loading,
           ...accessibilityState,
         }}
-        disabled={type === 'disabled'}
+        disabled={isDisabled}
         activeOpacity={0.5}
-        style={buttonStyle}>
+        style={buttonStyle}
+      >
         {renderLeading()}
         {renderTitle()}
         {renderTrailing()}
@@ -337,4 +352,4 @@ const Button: FC<ButtonProps> = ({
   );
 };
 
-export {Button};
+export { Button };

package/CheckBox/index.tsx

@@ -1,14 +1,11 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {CheckBoxProps} from './types';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { CheckBoxProps } from './types';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Text} from '../Text';
-import {Icon} from '../Icon';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -21,15 +18,15 @@ const CheckBox: FC<CheckBoxProps> = ({
   accessibilityState,
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = 'transparent';
   const componentName = 'CheckBox';
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
-    props.accessibilityLabel
+    props.accessibilityLabel,
   );
 
   if (haveValue) {
@@ -54,7 +51,8 @@ const CheckBox: FC<CheckBoxProps> = ({
         params,
         state: disabled ? 'disabled' : 'filled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         accessibilityLabel={componentId}
@@ -66,12 +64,14 @@ const CheckBox: FC<CheckBoxProps> = ({
           disabled,
           ...accessibilityState,
         }}
-        style={[style, styles.container]}>
+        style={[style, styles.container]}
+      >
         <View
           style={[
-            {borderColor, backgroundColor, borderWidth: 1},
+            { borderColor, backgroundColor, borderWidth: 1 },
             styles.checkbox,
-          ]}>
+          ]}
+        >
           {haveValue && (
             <Icon
               color={theme.colors.background.surface}
@@ -80,10 +80,14 @@ const CheckBox: FC<CheckBoxProps> = ({
             />
           )}
         </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+        {!!label && (
+          <Text typography={'body_default_regular'} style={styles.label}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {CheckBox};
+export { CheckBox };

package/CheckBox/styles.ts

@@ -12,4 +12,5 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   container: {flexDirection: 'row', alignItems: 'center'},
+  label: {flexShrink: 1}
 });

package/Context/index.ts

@@ -0,0 +1,23 @@
+import { Platform } from 'react-native';
+import { createContext } from 'react';
+import { defaultContext } from '../Consts';
+
+const Context = createContext({});
+const ApplicationContext = createContext(defaultContext);
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({ loading: false });
+const TrackingScopeContext = createContext<{ scopeName?: string }>({
+  scopeName: undefined,
+});
+
+export {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+  ComponentContext,
+  SkeletonContext,
+  TrackingScopeContext,
+};

package/Divider/DashDivider.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import Svg, {Line} from 'react-native-svg';
+import React, { useContext } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Spacing } from '../Consts';
+import Svg, { Line } from 'react-native-svg';
 
 export interface DashDividerProps {
   /**
@@ -11,8 +11,8 @@ export interface DashDividerProps {
   style?: ViewStyle;
 }
 
-const DashDivider: React.FC<DashDividerProps> = ({style}) => {
-  const {theme} = useContext(ApplicationContext);
+const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
+  const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;
 
   return (
@@ -24,7 +24,8 @@ const DashDivider: React.FC<DashDividerProps> = ({style}) => {
           marginVertical: Spacing.XS,
         },
         style,
-      ]}>
+      ]}
+    >
       <Svg height="1" width="100%">
         <Line
           x1="0"
@@ -42,4 +43,4 @@ const DashDivider: React.FC<DashDividerProps> = ({style}) => {
   );
 };
 
-export {DashDivider};
+export { DashDivider };

package/Divider/index.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import {DashDivider} from './DashDivider';
+import React, { useContext } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Spacing } from '../Consts';
+import { DashDivider } from './DashDivider';
 
 export interface DividerProps {
   /**
@@ -23,7 +23,7 @@ const Divider: React.FC<DividerProps> = ({
   useMargin = true,
   type = 'default',
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   if (type === 'dash') return <DashDivider style={style} />;
 
@@ -42,4 +42,4 @@ const Divider: React.FC<DividerProps> = ({
   );
 };
 
-export {Divider};
+export { Divider };

package/FoundationList/index.tsx

@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { FlashList } from '@shopify/flash-list';
-import { FoundationListProps } from './types';
+import React from 'react';
+import { FlashList, FlashListProps } from '@shopify/flash-list';
+import { FlatListProps } from 'react-native';
 
-const FoundationList: FC<FoundationListProps> = props => {
+type CombinedListProps<ItemT> = FlatListProps<ItemT> &
+  Partial<FlashListProps<ItemT>>;
+
+const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
   return <FlashList {...props} />;
 };
 

package/Icon/index.tsx

@@ -1,9 +1,9 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import IconSources from '../Assets/icon.json';
 import IconBankSources from '../Assets/icon_bank.json';
-import {IconProps} from './types';
-import {ApplicationContext} from '../Application';
-import {Image} from '../Image';
+import { IconProps } from './types';
+import { ApplicationContext } from '../Context';
+import { Image } from '../Image';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -12,17 +12,17 @@ const Icon: React.FC<IconProps> = ({
   style = {},
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   /**
    * get icon source maps or remote http
    */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
-      let icon: {[key: string]: {uri: string}} = IconSources;
+      let icon: { [key: string]: { uri: string } } = IconSources;
       return icon[source] ?? icon.ic_warning;
     }
-    return {uri: source};
+    return { uri: source };
   };
 
   const tintColorProps = color !== null && {
@@ -34,11 +34,11 @@ const Icon: React.FC<IconProps> = ({
       {...props}
       loading={false}
       source={getIconSource()}
-      style={[style, {width: size, height: size}]}
+      style={[style, { width: size, height: size }]}
       resizeMode="contain"
       {...tintColorProps}
     />
   );
 };
 
-export {Icon, IconSources, IconBankSources};
+export { Icon, IconSources, IconBankSources };

package/IconButton/index.tsx

@@ -1,12 +1,12 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Colors} from '../Consts';
-import {Icon} from '../Icon';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Colors } from '../Consts';
+import { Icon } from '../Icon';
 import styles from './styles';
 
 export interface IconButtonProps extends TouchableOpacityProps {
@@ -39,7 +39,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   params,
   ...rest
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   /**
    * get size icon button
@@ -61,7 +61,7 @@ const IconButton: React.FC<IconButtonProps> = ({
           backgroundColor: theme.colors.background.disable,
         };
       case 'primary':
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
       case 'secondary':
         return {
           backgroundColor: theme.colors.background.surface,
@@ -83,7 +83,7 @@ const IconButton: React.FC<IconButtonProps> = ({
           backgroundColor: theme.colors.error.primary,
         };
       default:
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
     }
   };
 
@@ -120,16 +120,18 @@ const IconButton: React.FC<IconButtonProps> = ({
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
         activeOpacity={activeOpacity}
-        style={buttonStyle}>
+        style={buttonStyle}
+      >
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {IconButton};
+export { IconButton };

package/Image/index.tsx

@@ -6,15 +6,22 @@ import {
   ApplicationContext,
   ComponentContext,
   SkeletonContext,
-} from '../Application';
+} from '../Context';
 import { Skeleton } from '../Skeleton';
 import { Icon } from '../Icon';
 import { Styles } from '../Consts';
 import { ImageProps } from './types';
-import { getImageName } from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
+export const getImageName = (source: any): string => {
+  const parts = source?.uri?.split?.('/');
+  if (parts?.length > 0) {
+    return parts?.[parts.length - 1];
+  }
+  return '';
+};
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,

package/Input/Input.tsx

@@ -12,11 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
 import { exportFontFamily } from '../Text';
 import {
@@ -30,6 +26,7 @@ import { InputProps } from './index';
 import styles from './styles';
 import { checkTyping } from './utils';
 import SystemTextInput from './SystemTextInput';
+import { ApplicationContext, ComponentContext } from '../Context';
 
 /**
  * Input default component
@@ -85,6 +82,7 @@ const Input = forwardRef(
 
     const onClearText = () => {
       inputRef?.current?.clear();
+      inputRef.current?.setNativeProps({ text: '' });
       _onChangeText('');
     };