@momo-kits/foundation 1.0.9 → 1.0.11

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,7 +24,7 @@ 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 = (

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';
 
@@ -27,6 +27,7 @@ const Input: FC<InputProps> = ({
   disabled,
   floatingIconColor,
   iconColor,
+  required,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -35,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);
@@ -72,7 +68,7 @@ const Input: FC<InputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(),
+          getSizeStyle(size),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
@@ -81,6 +77,7 @@ const Input: FC<InputProps> = ({
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
           disabled={disabled}
+          required={required}
           floatingIcon={floatingIcon}
         />
         <View style={styles.inputView}>
@@ -95,6 +92,7 @@ const Input: FC<InputProps> = ({
                 color: textColor,
               },
             ]}
+            textBreakStrategy="highQuality"
             value={value}
             onChangeText={_onChangeText}
             onFocus={_onFocus}

package/Input/InputMoney.tsx

@@ -0,0 +1,139 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Image} from '../Image';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
+import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+
+const InputMoney: FC<InputMoneyProps> = ({
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size = 'small',
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>(null);
+  const [value, setValue] = useState('');
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    setValue('');
+    onChangeText?.('');
+  };
+  const _onChangeText = (text: string) => {
+    if (text.length < value.length && value.indexOf(text) === 0) {
+      text = value.slice(0, -2) + 'đ';
+    }
+    const valueFormat = formatMoneyToNumber(text, 'đ');
+    setValue(formatNumberToMoney(valueFormat, 'đ'));
+    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          getSizeStyle(size),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            keyboardType={'number-pad'}
+            style={[
+              styles.moneyInput,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+            placeholder={'0đ'}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {icon && (
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.icon}
+            />
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+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) => {
@@ -148,4 +149,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,
@@ -35,6 +35,7 @@ const TextArea: FC<TextAreaProps> = props => {
     height,
     placeholder,
     maxLength,
+    required,
   } = props;
 
   const [focused, setFocused] = useState(false);
@@ -43,6 +44,7 @@ const TextArea: FC<TextAreaProps> = props => {
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
@@ -94,6 +96,7 @@ const TextArea: FC<TextAreaProps> = props => {
           floatingIconColor={floatingIconColor}
           disabled={disabled}
           floatingIcon={floatingIcon}
+          required={required}
         />
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
@@ -108,6 +111,7 @@ const TextArea: FC<TextAreaProps> = props => {
                 },
               ]}
               maxLength={maxLength}
+              textBreakStrategy="highQuality"
               multiline={true}
               value={value}
               onChangeText={_onChangeText}
@@ -141,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

@@ -11,6 +11,7 @@ type FloatingViewProps = {
   floatingIconColor?: string;
   disabled?: boolean;
   floatingIcon?: string;
+  required?: boolean;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -40,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;
@@ -63,6 +70,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIconColor,
   disabled,
   floatingIcon,
+  required,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -85,6 +93,11 @@ export const FloatingView: FC<FloatingViewProps> = ({
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}
+          {required && (
+            <Text typography={'label_s'} color={theme.colors.error.primary}>
+              *
+            </Text>
+          )}
         </Text>
         {floatingIcon && (
           <Image

package/Input/index.tsx

@@ -1,6 +1,7 @@
 import Input from './Input';
-import TextArea from './TextArea';
-import SearchInput from './SearchInput';
+import InputTextArea from './InputTextArea';
+import InputSearch from './InputSearch';
+import InputMoney from './InputMoney';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -12,20 +13,26 @@ export interface InputProps extends TextInputProps {
   disabled?: boolean;
   floatingIconColor?: string;
   iconColor?: string;
+  required?: boolean;
 }
 
-type InputPropsWithoutSize = Omit<InputProps, 'size'>;
+type InputPropsWithoutSizeAndIcon = Omit<
+  InputProps,
+  'size' | 'icon' | 'iconColor'
+>;
+type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
+type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
-export interface TextAreaProps extends TextInputProps, InputPropsWithoutSize {
+export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface SearchInputProps
-  extends TextInputProps,
-    InputPropsWithoutSize {
+export interface InputSearchProps extends InputPropsWithoutRequiredAndSize {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
 }
 
-export {Input, TextArea, SearchInput};
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+
+export {Input, InputTextArea, InputSearch, InputMoney};

package/Input/styles.ts

@@ -10,14 +10,12 @@ export default StyleSheet.create({
   container: {
     borderWidth: 1,
     borderRadius: Radius.S,
-    marginBottom: Spacing.XS,
     height: 56,
     paddingVertical: 8,
   },
   smallContainer: {
     borderRadius: Radius.S,
     borderWidth: 1,
-    marginBottom: Spacing.XS,
     height: 48,
   },
   floatingView: {
@@ -32,6 +30,7 @@ export default StyleSheet.create({
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: Spacing.XS,
   },
   inputView: {
     justifyContent: 'space-between',
@@ -115,4 +114,11 @@ export default StyleSheet.create({
     width: 1,
     marginLeft: Spacing.XS,
   },
+  moneyInput: {
+    width: '100%',
+    paddingLeft: Spacing.M,
+    height: '100%',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
 });

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,41 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BottomTabItemProps, BottomTabProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Icon} from '@momo-kits/foundation';
+
+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/{ContentLoader → Skeleton}/index.tsx

@@ -1,11 +1,11 @@
 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 {SkeletonTypes} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Styles} from '../Consts';
 import styles from './styles';
-const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
+const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const {width} = useWindowDimensions();
   const {theme} = useContext(ApplicationContext);
   const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
@@ -62,6 +62,4 @@ const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
   );
 };
 
-ContentLoader.defaultProps = {};
-
-export {ContentLoader};
+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.9",
+  "version": "1.0.11",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {

package/ContentLoader/types.ts

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