@momo-kits/foundation 1.0.10 → 1.0.12

package/Assets/icon.json

@@ -3934,5 +3934,14 @@
   },
   "ic_error": {
     "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
+  },
+  "media_fail": {
+    "uri": "https://static.momocdn.net/app/img/kits/media_fail.png"
+  },
+  "ic_checked": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/checked_ic.png"
+  },
+  "ic_minus": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/minus.png"
   }
 }

package/Button/index.tsx

@@ -11,6 +11,7 @@ import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
 import {Image} from '../Image';
+import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
   type?:
@@ -179,11 +180,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconLeft}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -203,11 +200,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconRight}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconRight} size={iconSize} />
         </View>
       );
     }

package/CheckBox/index.tsx

@@ -2,13 +2,10 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
 import {Text} from '../Text';
+import {Icon} from '../Icon';
 
-const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
-const IC_CHECKED_DEFAULT =
-  'https://img.mservice.com.vn/app/img/kits/checked_ic.png';
 const CheckBox: FC<CheckBoxProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {value, disabled, onChange, style, label, indeterminated} = props;
@@ -21,11 +18,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
     ? theme.colors.primary
     : theme.colors.background.surface;
 
-  let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
-
-  if (indeterminated) {
-    iconSource = IC_INDETERMINATED;
-  }
+  let iconSource = indeterminated ? 'ic_minus' : 'ic_checked';
 
   if (disabled) {
     borderColor = haveValue
@@ -47,7 +40,13 @@ const CheckBox: FC<CheckBoxProps> = props => {
       disabled={disabled}
       style={[style, styles.container]}>
       <View style={[checkboxStyle, styles.checkbox]}>
-        <Image style={styles.icon} source={{uri: iconSource}} />
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
       </View>
       <Text typography={'description_default'}>{label}</Text>
     </TouchableOpacity>

package/CheckBox/styles.ts

@@ -12,5 +12,4 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   container: {flexDirection: 'row'},
-  icon: {width: 20, height: 20},
 });

package/Image/index.tsx

@@ -3,7 +3,7 @@ import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext} from '../Navigation';
-import {ContentLoader} from '../ContentLoader';
+import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {FastImagePropsWithoutStyle} from './types';
@@ -24,12 +24,12 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   const renderContent = () => {
     if (loading || fail) {
       let content = (
-        <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
+        <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
         content = (
           <View style={Styles.flexCenter}>
-            <Icon source="error-outline" />
+            <Icon source="media_fail" color={theme.colors.text.disable} />
           </View>
         );
       }

package/Input/Input.tsx

@@ -9,7 +9,7 @@ import {
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Image} from '../Image';
-import {ErrorView, FloatingView, getBorderColor} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 
@@ -36,17 +36,12 @@ const Input: FC<InputProps> = ({
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
     onChangeText?.(text);
   };
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.smallContainer;
-    }
-    return styles.container;
-  };
 
   const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setFocused(true);
@@ -73,7 +68,7 @@ const Input: FC<InputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(),
+          getSizeStyle(size),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
@@ -118,11 +113,7 @@ const Input: FC<InputProps> = ({
             </TouchableOpacity>
           )}
           {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
+            <Icon icon={iconTintColor} source={icon} style={styles.icon} />
           )}
         </View>
       </View>

package/Input/{MoneyInput.tsx → InputMoney.tsx}

@@ -9,15 +9,16 @@ import {
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Image} from '../Image';
-import {ErrorView, FloatingView, getBorderColor} from './common';
-import {MoneyInputProps} from './index';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
-const MoneyInput: FC<MoneyInputProps> = ({
+const InputMoney: FC<InputMoneyProps> = ({
   onChangeText,
   floatingValue,
   floatingIcon,
-  size,
+  size = 'small',
   onBlur,
   onFocus,
   errorMessage,
@@ -30,29 +31,20 @@ const MoneyInput: FC<MoneyInputProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [focused, setFocused] = useState(false);
-  const [value, setValue] = useState('');
   const inputRef = useRef<any>(null);
-
+  const [value, setValue] = useState('');
   const onClearText = () => {
     inputRef?.current?.clear();
-  };
-
-  const formatNumberWithDots = (num: string) => {
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    setValue('');
+    onChangeText?.('');
   };
   const _onChangeText = (text: string) => {
-    let numericValue = text.replace(/[^0-9]/g, '');
-    if (numericValue === '') numericValue = '0';
-    const formattedNumber = formatNumberWithDots(numericValue);
-    const formattedValue = `${formattedNumber}đ`;
-    onChangeText?.(formattedValue);
-    setValue(formattedValue);
-  };
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.smallContainer;
+    if (text.length < value.length && value.indexOf(text) === 0) {
+      text = value.slice(0, -2) + 'đ';
     }
-    return styles.container;
+    const valueFormat = formatMoneyToNumber(text, 'đ');
+    setValue(formatNumberToMoney(valueFormat, 'đ'));
+    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
   };
 
   const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -80,7 +72,7 @@ const MoneyInput: FC<MoneyInputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(),
+          getSizeStyle(size),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
@@ -124,13 +116,7 @@ const MoneyInput: FC<MoneyInputProps> = ({
               />
             </TouchableOpacity>
           )}
-          {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
-          )}
+          {icon && <Icon color={iconTintColor} source={icon} />}
         </View>
       </View>
     );
@@ -144,8 +130,4 @@ const MoneyInput: FC<MoneyInputProps> = ({
   );
 };
 
-MoneyInput.defaultProps = {
-  size: 'small',
-};
-
-export default MoneyInput;
+export default InputMoney;

package/Input/{SearchInput.tsx → InputSearch.tsx}

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {SearchInputProps} from './index';
+import {InputSearchProps} from './index';
 import {getBorderColor} from './common';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
@@ -14,7 +14,7 @@ import {Icon} from '../Icon';
 import {Image} from '../Image';
 import {Text} from '../Text';
 
-const SearchInput: FC<SearchInputProps> = ({
+const InputSearch: FC<InputSearchProps> = ({
   errorMessage,
   disabled,
   placeholder,
@@ -47,6 +47,7 @@ const SearchInput: FC<SearchInputProps> = ({
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
@@ -111,11 +112,7 @@ const SearchInput: FC<SearchInputProps> = ({
                 },
               ]}
             />
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.iconSearchInput}
-            />
+            <Icon color={iconTintColor} source={icon} />
           </View>
         )}
       </View>
@@ -148,4 +145,4 @@ const SearchInput: FC<SearchInputProps> = ({
   );
 };
 
-export default SearchInput;
+export default InputSearch;

package/Input/{TextArea.tsx → InputTextArea.tsx}

@@ -16,10 +16,10 @@ import {
   getBorderColor,
   MAX_LENGTH,
 } from './common';
-import {TextAreaProps} from './index';
+import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 
-const TextArea: FC<TextAreaProps> = props => {
+const InputTextArea: FC<InputTextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {
     errorMessage,
@@ -44,6 +44,7 @@ const TextArea: FC<TextAreaProps> = props => {
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
@@ -84,7 +85,7 @@ const TextArea: FC<TextAreaProps> = props => {
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWradpper,
+          styles.textAreaWrapper,
           {
             height: height || DEFAULT_HEIGHT,
             backgroundColor: theme.colors.background.surface,
@@ -144,8 +145,8 @@ const TextArea: FC<TextAreaProps> = props => {
   );
 };
 
-TextArea.defaultProps = {
+InputTextArea.defaultProps = {
   maxLength: MAX_LENGTH,
 };
 
-export default TextArea;
+export default InputTextArea;

package/Input/common.tsx

@@ -41,6 +41,12 @@ export const getBorderColor = (
   return {borderColor};
 };
 
+export const getSizeStyle = (size?: 'small' | 'large') => {
+  if (size === 'small') {
+    return styles.smallContainer;
+  }
+  return styles.container;
+};
 export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
@@ -94,9 +100,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
           )}
         </Text>
         {floatingIcon && (
-          <Image
-            tintColor={floatingIconTintColor}
-            source={{uri: floatingIcon}}
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={16}
             style={styles.floatingIcon}
           />
         )}

package/Input/index.tsx

@@ -1,7 +1,7 @@
 import Input from './Input';
-import TextArea from './TextArea';
-import SearchInput from './SearchInput';
-import MoneyInput from './MoneyInput';
+import InputTextArea from './InputTextArea';
+import InputSearch from './InputSearch';
+import InputMoney from './InputMoney';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -23,16 +23,16 @@ type InputPropsWithoutSizeAndIcon = Omit<
 type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
-export interface TextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface SearchInputProps extends InputPropsWithoutRequiredAndSize {
+export interface InputSearchProps extends InputPropsWithoutRequiredAndSize {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
 }
 
-export interface MoneyInputProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, TextArea, SearchInput, MoneyInput};
+export {Input, InputTextArea, InputSearch, InputMoney};

package/Input/styles.ts

@@ -25,7 +25,7 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     flexDirection: 'row',
   },
-  floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  floatingIcon: {marginLeft: Spacing.XS},
   errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',

package/Input/utils.ts

@@ -0,0 +1,63 @@
+const formatNumberToMoney = (number: number, currency = '') => {
+  if (!number || isNaN(number) || Number(number) === 0) {
+    return `0${currency}`;
+  }
+
+  const array = [];
+  let result = '';
+  let isNegative = false;
+
+  if (number < 0) {
+    isNegative = true;
+  }
+
+  const numberString = Math.abs(number).toString();
+  if (numberString.length < 3) {
+    return numberString + currency;
+  }
+
+  let count = 0;
+  for (let i = numberString.length - 1; i >= 0; i -= 1) {
+    count += 1;
+    if (numberString[i] === '.' || numberString[i] === ',') {
+      array.push(',');
+      count = 0;
+    } else {
+      array.push(numberString[i]);
+    }
+    if (count === 3 && i >= 1) {
+      array.push('.');
+      count = 0;
+    }
+  }
+
+  for (let i = array.length - 1; i >= 0; i -= 1) {
+    result += array[i];
+  }
+
+  if (isNegative) {
+    result = `-${result}`;
+  }
+
+  return result + currency;
+};
+
+const formatMoneyToNumber = (money: string, currencyUnit: string) => {
+  if (money && money.length > 0) {
+    const moneyString = money
+      .replace(currencyUnit, '')
+      .replace(/,/g, '')
+      .replace(/đ/g, '')
+      .replace(/\./g, '')
+      .replace(/ /g, '');
+    const number = Number(moneyString);
+    if (isNaN(number)) {
+      return 0;
+    }
+    return number;
+  }
+
+  return Number(money);
+};
+
+export {formatMoneyToNumber, formatNumberToMoney};

package/Layout/ScreenContainer.tsx

@@ -11,6 +11,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   edges,
   enableKeyboardAvoidingView,
   scrollable,
+  scrollViewProps,
 }) => {
   let Component: any = View;
   const headerHeight = useHeaderHeight();
@@ -50,7 +51,9 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           ios: 'padding',
           android: undefined,
         })}>
-        <Component style={Styles.flex}>{renderContent()}</Component>
+        <Component {...scrollViewProps} style={Styles.flex}>
+          {renderContent()}
+        </Component>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

package/Navigation/BottomTab.tsx

@@ -0,0 +1,40 @@
+import React, {FC} from 'react';
+import {BottomTabProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Icon} from '../Icon';
+
+const Tab = createBottomTabNavigator();
+
+const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+  return (
+    <Tab.Navigator>
+      {tabs.map((item, index) => {
+        return (
+          // @ts-ignore
+          <Tab.Screen
+            key={`${item.label}-${index}`}
+            name={item.label}
+            component={item.component}
+            options={{
+              tabBarLabel: item.label,
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+              },
+              tabBarIcon: ({color, size}) => (
+                <Icon source={item.icon} color={color} size={size} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;

package/Navigation/Components.tsx

@@ -88,19 +88,9 @@ const HeaderLeft: React.FC<any> = ({tintColor}) => {
     }
   };
 
-  let backgroundColor;
-  if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
   return (
     <View style={styles.headerLeft}>
-      <NavigationButton
-        icon="ic_back"
-        tintColor={tintColor}
-        backgroundColor={backgroundColor}
-        onPress={goBack}
-      />
+      <NavigationButton icon="ic_back" tintColor={tintColor} onPress={goBack} />
     </View>
   );
 };
@@ -206,7 +196,6 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
       <NavigationButton
         icon="addFavorite"
         tintColor={tintColor}
-        backgroundColor={backgroundColor}
         onPress={() => {}}
       />
       <View

package/Navigation/ModalScreen.tsx

@@ -121,7 +121,11 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        onDismiss={navigation.pop}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigation.pop();
+          }
+        }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <View style={{paddingBottom: bottom}}>

package/Navigation/NavigationButton.tsx

@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import {NavigationButtonProps} from './types';
 import {ApplicationContext} from './index';
 import {Icon} from '../Icon';
+import {Colors} from '../Consts';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -12,6 +13,10 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
   return (
     <TouchableOpacity
       style={[

package/Navigation/index.ts

@@ -2,6 +2,7 @@ import {NavigationContainer, ApplicationContext} from './NavigationContainer';
 import ScreenContainer from '../Layout/ScreenContainer';
 import NavigationButton from './NavigationButton';
 import {HeaderRightAction} from './Components';
+import BottomTab from './BottomTab';
 
 export {
   NavigationContainer,
@@ -9,4 +10,5 @@ export {
   ScreenContainer,
   NavigationButton,
   HeaderRightAction,
+  BottomTab,
 };

package/Navigation/types.ts

@@ -1,5 +1,5 @@
-import {ViewProps} from 'react-native';
-import React from 'react';
+import {ScrollViewProps, ViewProps} from 'react-native';
+import React, {ComponentType, ReactElement} from 'react';
 import Navigator from './Navigator';
 
 export type Theme = {
@@ -72,6 +72,7 @@ export interface ScreenContainerProps extends ViewProps {
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
+  scrollViewProps?: ScrollViewProps;
 }
 
 export type ScreenParams = {
@@ -121,3 +122,15 @@ export type TitleCustomProps = {
   tintColor?: string;
   content?: React.ReactNode;
 };
+
+export type BottomTabItemProps = {
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string;
+  component: ComponentType<any> | undefined;
+};
+
+export type BottomTabProps = {
+  tabs: BottomTabItemProps[];
+};

package/Popup/PopupPromotion.tsx

@@ -1,21 +1,40 @@
 import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';
-import {Button} from '../Button';
-import {Spacing} from '../Consts';
+import {Radius} from '../Consts';
+import {Icon} from '../Icon';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
   const {theme, navigator} = useContext(ApplicationContext);
 
   /**
-   * on action popup
-   * @param callback
+   * build close action
    */
-  const onAction = (callback?: () => void) => {
-    navigator?.pop();
-    callback?.();
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          onPress={() => {
+            navigator?.pop();
+            onClose?.();
+          }}
+          style={[
+            styles.iconClose,
+            {
+              backgroundColor: theme.colors.text.default,
+              borderColor: theme.colors.background.surface,
+            },
+          ]}>
+          <Icon
+            source="navigation_close"
+            color={theme.colors.background.surface}
+            size={14}
+          />
+        </TouchableOpacity>
+      </View>
+    );
   };
 
   return (
@@ -26,37 +45,34 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
           uri: image,
         }}
       />
-      <View style={styles.actionContainer}>
-        <Button
-          title={primary?.title}
-          onPress={() => {
-            onAction(primary?.onPress);
-          }}
-        />
-      </View>
+      {buildCloseIcon()}
     </>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.66,
+    aspectRatio: 0.72,
   },
-  actionContainer: {
+  iconCloseContainer: {
     position: 'absolute',
-    bottom: 0,
     width: '100%',
-    paddingVertical: Spacing.XL,
-    paddingHorizontal: Spacing.L,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    bottom: -36,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
   },
 });
 
 PopupPromotion.defaultProps = {
   image: 'https://google.com',
-  primary: {
-    title: 'Primary',
-    onPress: () => {},
-  },
 };
 
 export default PopupPromotion;

package/Popup/types.ts

@@ -11,7 +11,7 @@ export type PopupNotifyProps = {
 
 export type PopupPromotionProps = {
   image: string;
-  primary: PopupAction;
+  onClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -17,12 +17,24 @@ const Radio: FC<RadioProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
-  const borderWidth = selected ? 6 : 2;
-  let borderColor = selected ? theme.colors.primary : theme.colors.text.default;
+  let disabledStyle = {};
+  let checkBoxStyle = {
+    borderWidth: 2,
+    borderColor: theme.colors.text.default,
+  };
+
+  if (selected) {
+    checkBoxStyle = {
+      borderWidth: 6,
+      borderColor: theme.colors.primary,
+    };
+  }
   if (disabled) {
-    borderColor = selected
-      ? theme.colors.background.tonal
-      : theme.colors.text.disable;
+    disabledStyle = {
+      borderColor: selected
+        ? theme.colors.background.tonal
+        : theme.colors.text.disable,
+    };
   }
 
   return (
@@ -39,7 +51,9 @@ const Radio: FC<RadioProps> = ({
       <View
         style={[
           styles.radio,
-          {borderWidth, borderColor, marginRight: !!label ? Spacing.XS : 0},
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: !!label ? Spacing.XS : 0},
         ]}
       />
       {!!label && <Text typography={'description_default'}>{label}</Text>}

package/Skeleton/index.tsx

@@ -0,0 +1,73 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {SkeletonTypes} from './types';
+import {Styles} from '../Consts';
+import styles from './styles';
+import {Colors} from '@momo-kits/foundation';
+
+const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
+  const [width, setWidth] = useState(0);
+  const PRIMARY_COLOR = Colors.black_05;
+  const HIGHLIGHT_COLOR1 = Colors.black_05;
+  const HIGHLIGHT_COLOR2 = Colors.black_03;
+  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
+
+  const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
+  const linearTranslate = beginShimmerPosition.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-width, width],
+  });
+  const animatedValue = useMemo(() => {
+    return Animated.loop(
+      Animated.timing(beginShimmerPosition, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    );
+  }, [beginShimmerPosition]);
+
+  useEffect(() => {
+    animatedValue.start();
+    return () => {
+      animatedValue.stop();
+    };
+  }, [animatedValue]);
+
+  const onLayout = (newWidth: number) => {
+    if (newWidth !== width) {
+      setWidth(newWidth);
+    }
+  };
+  return (
+    <View style={[styles.container, style]}>
+      <View
+        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>
+        <Animated.View
+          style={{
+            transform: [{translateX: linearTranslate}],
+            width: '60%',
+            height: '100%',
+          }}>
+          <LinearGradient
+            style={[StyleSheet.absoluteFill]}
+            colors={shimmerColors}
+            start={{
+              x: 0,
+              y: 0,
+            }}
+            end={{
+              x: 1,
+              y: 0,
+            }}
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+export {Skeleton};

package/Skeleton/types.ts

@@ -0,0 +1,3 @@
+export type SkeletonTypes = {
+  style?: object;
+};

package/index.ts

@@ -22,8 +22,8 @@ export * from './Icon/types';
 export * from './IconButton';
 export * from './Image';
 export * from './Image/types';
-export * from './ContentLoader';
-export * from './ContentLoader/types';
+export * from './Skeleton';
+export * from './Skeleton/types';
 export * from './CheckBox';
 export * from './CheckBox/types';
 export * from './Radio';

package/package.json

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

package/ContentLoader/index.tsx

@@ -1,67 +0,0 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
-import {Animated, Platform, useWindowDimensions, View} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import {ContentLoaderTypes} from './types';
-import {ApplicationContext} from '../Navigation';
-import {Styles} from '../Consts';
-import styles from './styles';
-const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
-  const {width} = useWindowDimensions();
-  const {theme} = useContext(ApplicationContext);
-  const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
-
-  const shimmerColors = [
-    theme.colors.text.disable + '40',
-    theme.colors.text.disable + '80',
-    theme.colors.text.disable,
-  ];
-  const location = [0.3, 0.5, 0.7];
-  const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [-1, 1],
-    outputRange: [0, width],
-  });
-  const animatedValue = useMemo(() => {
-    return Animated.loop(
-      Animated.timing(beginShimmerPosition, {
-        toValue: 1,
-        delay: 0,
-        duration: 1000,
-        useNativeDriver: Platform.OS !== 'web',
-      }),
-    );
-  }, [beginShimmerPosition]);
-
-  useEffect(() => {
-    animatedValue.start();
-    return () => {
-      animatedValue.stop();
-    };
-  }, [animatedValue]);
-
-  return (
-    <View style={[styles.container, style]}>
-      <View style={[Styles.flex, {backgroundColor: shimmerColors[0]}]}>
-        <Animated.View
-          style={[Styles.flex, {transform: [{translateX: linearTranslate}]}]}>
-          <LinearGradient
-            colors={shimmerColors}
-            style={[Styles.flex, {width: width}]}
-            start={{
-              x: -1,
-              y: 0.5,
-            }}
-            end={{
-              x: 2,
-              y: 0.5,
-            }}
-            locations={location}
-          />
-        </Animated.View>
-      </View>
-    </View>
-  );
-};
-
-ContentLoader.defaultProps = {};
-
-export {ContentLoader};

package/ContentLoader/types.ts

@@ -1,3 +0,0 @@
-export type ContentLoaderTypes = {
-  style?: object;
-};