ordering-ui-react-native 0.18.2 → 0.18.3-release

package/themes/original/src/components/HighestRatedBusinesses/styles.tsx

@@ -2,6 +2,6 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
   padding-top: 30px;
 `;

package/themes/original/src/components/Home/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useEffect } from 'react';
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
@@ -8,12 +8,21 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
-	const { onNavigationRedirect } = props;
+	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
+	const [{ configs }] = useConfig()
 
 	const theme = useTheme();
+	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
 
 	return (
 		<View style={styles.container}>
@@ -60,7 +69,7 @@ export const Home = (props: any) => {
 					style={{ ...styles.textLink, marginTop: 12 }}
 					onPress={() =>
 						orderState?.options?.address?.address
-							? onNavigationRedirect('BusinessList', { isGuestUser: true })
+							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
 							: onNavigationRedirect('AddressForm', { isGuestUser: true })
 					}>
 					<OText weight="normal" size={18} color={theme.colors.white}>
@@ -83,7 +92,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'space-between',
-		paddingHorizontal: 40,
+		paddingHorizontal: 20,
 	},
 	logo: {
 		marginTop: 64,

package/themes/original/src/components/LastOrder/index.tsx

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />

package/themes/original/src/components/LastOrders/index.tsx

@@ -117,7 +117,8 @@ export const LastOrders = (props: any) => {
       initialPage: 1,
       pageSize: 3,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
   return <OrderListController {...helpProps} />
 }

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -1,22 +1,27 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
-import { OText, OButton } from '../../shared';
-import OtpInputs from 'react-native-otp-inputs';
+import { OText, OButton, OIcon } from '../../shared';
+import OtpInputs, { OtpInputsRef } from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
+import { ActivityIndicator } from 'react-native';
 
 export const Otp = (props: otpParams) => {
   const {
+    pinCount,
+    otpError,
+    setOtpError,
+    setAlertState,
     willVerifyOtpState,
+    isCheckingCode,
+    setCheckingCode,
     setWillVerifyOtpState,
-    onSubmit,
     handleLoginOtp,
-    setAlertState,
-    pinCount
+    onSubmit,
   } = props
 
   const theme = useTheme();
@@ -24,8 +29,7 @@ export const Otp = (props: otpParams) => {
   const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
     600, willVerifyOtpState)
 
-  const [code, setCode] = useState('')
-
+  const inputRef = useRef<OtpInputsRef | any>(null)
 
   const handleOnSubmit = () => {
     setAlertState({
@@ -36,6 +40,21 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
+  const handleChangeCode = (code : string) => {
+    if (code?.length === pinCount) {
+      setCheckingCode(true)
+      handleLoginOtp(code)
+      inputRef.current?.reset && inputRef.current.reset()
+      setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
+    }
+    setOtpError(null)
+  }
+
+  const handleCloseOtp = () => {
+    setWillVerifyOtpState(false)
+    setOtpError(null)
+  }
+
   useEffect(() => {
     if (otpLeftTime === 0) {
       setAlertState({
@@ -46,12 +65,6 @@ export const Otp = (props: otpParams) => {
     }
   }, [otpLeftTime])
 
-  useEffect(() => {
-    if (code?.length === (pinCount || 6)) {
-      handleLoginOtp(code)
-    }
-  }, [code])
-
   const loginStyle = StyleSheet.create({
     container: {
       width: '100%',
@@ -73,28 +86,77 @@ export const Otp = (props: otpParams) => {
       color: theme.colors.primary,
       fontSize: 16
     },
+    wrapperIcon: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: 20
+    },
+    closeContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    checkingCode: {
+      height: 50,
+      width: '100%',
+      marginVertical: 30,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
   });
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.backgroundPage }}>
       <OTPContainer>
+        <View
+          style={loginStyle.closeContainer}>
+          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
+            <OIcon
+              src={theme.images.general.close}
+              width={22}
+            />
+          </TouchableOpacity>
+          <OText size={22}>
+            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+          </OText>
+        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
-        <OtpInputs
-          autofillFromClipboard
-          numberOfInputs={pinCount || 6}
-          style={loginStyle.container}
-          inputStyles={loginStyle.underlineStyleBase}
-          handleChange={setCode}
-        />
+        {isCheckingCode && (
+          <View style={loginStyle.checkingCode}>
+            <OText size={18}>
+              <ActivityIndicator size="large" color={theme.colors.primary} />
+            </OText>
+          </View>
+        )}
+        {!isCheckingCode && (
+          <OtpInputs
+            ref={inputRef}
+            autofillFromClipboard={false}
+            numberOfInputs={pinCount}
+            style={loginStyle.container}
+            returnKeyType={'done'}
+            inputStyles={loginStyle.underlineStyleBase}
+            handleChange={handleChangeCode}
+          />
+        )}
+        {!!otpError && (
+          <OText
+            color={theme?.colors?.error}
+            size={20}
+            mBottom={10}
+          >
+            {t(otpError, otpError)}
+          </OText>
+        )}
         <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
           <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
             {t('RESEND_CODE', 'Resend code')}
           </OText>
         </TouchableOpacity>
         <OButton
-          onClick={() => setWillVerifyOtpState(false)}
+          onClick={() => handleCloseOtp()}
           bgColor={theme.colors.white}
           borderColor={theme.colors.primary}
           textStyle={{ color: theme.colors.primary }}
@@ -102,6 +164,10 @@ export const Otp = (props: otpParams) => {
           text={t('CANCEL', 'Cancel')}
         />
       </OTPContainer>
-    </>
+    </SafeAreaView>
   )
 }
+
+Otp.defaultProps = {
+  pinCount: 6
+}

package/themes/original/src/components/LoginForm/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard, Vibration } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	LoginForm as LoginFormController,
@@ -72,6 +73,7 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
+		isGuest
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -95,12 +97,15 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [otpError, setOtpError] = useState(null)
 	const tabsRef = useRef<any>(null)
 	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
+	const [isCheckingCode, setCheckingCode] = useState(false)
+
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
 	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
@@ -160,12 +165,24 @@ const LoginFormUI = (props: LoginParams) => {
 		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const onSubmit = (values?: any) => {
 		Keyboard.dismiss();
 		if (loginTab === 'otp') {
 			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
 				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
-				Vibration.vibrate()
+				vibrateApp()
+				return
+			}
+			if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
+				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
 				return
 			}
 			if (loginTab === 'otp') {
@@ -178,7 +195,7 @@ const LoginFormUI = (props: LoginParams) => {
 		} else {
 			if (phoneInputData.error) {
 				showToast(ToastType.Error, phoneInputData.error);
-				Vibration.vibrate()
+				vibrateApp()
 				return;
 			}
 			handleButtonLoginClick({
@@ -191,7 +208,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleVerifyCodeClick = () => {
 		if (phoneInputData.error) {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -206,7 +223,7 @@ const LoginFormUI = (props: LoginParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
@@ -221,19 +238,19 @@ const LoginFormUI = (props: LoginParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenRecaptcha = () => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 
@@ -250,9 +267,15 @@ const LoginFormUI = (props: LoginParams) => {
 		setOtpType(type)
 	}
 
-	const handleLoginOtp = (code: string) => {
-		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
+	const handleLoginOtp = async (code: string) => {
+		if (!code) return
+		const logged = await handleButtonLoginClick({ code })
+		setCheckingCode(false)
+		if (logged) {
+			setWillVerifyOtpState(false)
+		} else {
+			setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
+		}
 	}
 
 	const closeAlert = () => {
@@ -310,7 +333,7 @@ const LoginFormUI = (props: LoginParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
 			formState.result?.result &&
@@ -320,7 +343,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? formState.result?.result
 						: formState.result?.result[0],
 				);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && vibrateApp()
 		}
 	}, [formState]);
 
@@ -332,7 +355,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && Vibration.vibrate();
+				verifyPhoneState.result?.result && vibrateApp();
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -373,20 +396,24 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [checkPhoneCodeState])
 
 	useEffect(() => {
-		if (!!Object.values(errors)?.length) Vibration.vibrate()
+		if (!!Object.values(errors)?.length) vibrateApp()
 	}, [errors])
 
 	return (
 		<Container>
-			<NavBar
-				title={t('LOGIN', 'Login')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginRight: 0, marginLeft: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
+			) : (
+				<NavBar
+					title={t('LOGIN', 'Login')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			)}
 			<FormSide>
 				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
@@ -733,7 +760,7 @@ const LoginFormUI = (props: LoginParams) => {
 				{configs && Object.keys(configs).length > 0 ? (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
 						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
-						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
+						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
 					(
 						<>
 							<View
@@ -761,7 +788,7 @@ const LoginFormUI = (props: LoginParams) => {
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -770,7 +797,7 @@ const LoginFormUI = (props: LoginParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -778,7 +805,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>
@@ -824,20 +851,23 @@ const LoginFormUI = (props: LoginParams) => {
 					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
 					willVerifyOtpState={willVerifyOtpState}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					setWillVerifyOtpState={setWillVerifyOtpState}
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Alert
 				open={alertState.open}
 				content={alertState.content}

package/themes/original/src/components/LottieAnimation/index.tsx

@@ -5,74 +5,99 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components';
 
 interface Props {
-    initialValue: number,
-    onClick: any,
-    disableAnimation?: boolean
-    toValue: number,
-    style?: ViewStyle,
-    duration?: number,
-    type: 'favorite', // animation types
-    isActive: boolean,
-    animationType?: ((value: number) => number);
-    useNativeDriver?: boolean,
-    iconProps?: { color?: string, size?: number, style?: ViewStyle }
+  initialValue: number,
+  onClick: any,
+  disableAnimation?: boolean
+  toValue: number,
+  style?: ViewStyle,
+  duration?: number,
+  type: 'favorite', // animation types
+  isActive: boolean,
+  animationType?: ((value: number) => number);
+  useNativeDriver?: boolean,
+  iconProps?: { color?: string, size?: number, style?: ViewStyle }
 }
 
 export const LottieAnimation = (props: Props) => {
-    const {
-        initialValue,
-        onClick,
-        disableAnimation,
-        toValue,
-        style,
-        duration,
-        type,
-        isActive,
-        useNativeDriver,
-        animationType,
-        iconProps
-    } = props
-    const theme = useTheme()
-    const animationProgress = useRef(new Animated.Value(initialValue))
-    const [isHide, setIsHide] = useState(true)
-    const favoriteArray = ['heart', 'hearto']
-    const icon = type === 'favorite' ? favoriteArray : []
-    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
-    const onPressLottie = () => {
-        if (!disableAnimation) {
-            setIsHide(false)
-            Animated.timing(animationProgress.current, {
-                toValue,
-                duration: duration || 5000,
-                easing: animationType || Easing.linear,
-                useNativeDriver: useNativeDriver ?? true
-            }).start();
-            hideLottie()
-        }
-        onClick()
-    }
+  const {
+    initialValue,
+    onClick,
+    disableAnimation,
+    toValue,
+    style,
+    duration,
+    type,
+    isActive,
+    useNativeDriver,
+    animationType,
+    iconProps
+  } = props
+
+  const theme = useTheme()
+  const animationProgress = useRef(new Animated.Value(initialValue))
+  const favRef = useRef<Lottie>(null)
+  const [isHide, setIsHide] = useState(true)
 
-    const hideLottie = () => {
-        setTimeout(() => setIsHide(true), 4500)
+  const favoriteArray = ['heart', 'hearto']
+  const icon = type === 'favorite' ? favoriteArray : []
+  const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+
+  const onPressLottie = () => {
+    if (!disableAnimation) {
+      if (type === 'favorite') {
+        favRef.current?.play()
+      } else {
+        setIsHide(false)
+        Animated.timing(animationProgress.current, {
+          toValue,
+          duration: duration || 5000,
+          easing: animationType || Easing.linear,
+          useNativeDriver: useNativeDriver ?? true
+        }).start();
+        hideLottie()
+      }
     }
+    onClick()
+  }
+
+  const hideLottie = () => {
+    setTimeout(() => setIsHide(true), 4500)
+  }
 
-    return (
-        <TouchableOpacity
-            onPress={onPressLottie}
-            style={style}
-        >
-            {!isHide &&
-                <Lottie
-                    progress={animationProgress.current}
-                    source={animationGif}
-                />
-            }
-            <IconAntDesign
-                name={isActive ? icon[0] : icon[1]}
-                color={iconProps?.color || theme.colors.danger5}
-                size={iconProps?.size || 16}
-                style={iconProps?.style}
+  return (
+    <TouchableOpacity
+      onPress={onPressLottie}
+      style={style}
+    >
+      {type === 'favorite' ? (
+        // <Lottie
+        //   ref={favRef}
+        //   progress={initialValue}
+        //   style={{ width: 20, height: 20 }}
+        //   source={animationGif}
+        // />
+        <IconAntDesign
+          name={isActive ? icon[0] : icon[1]}
+          color={iconProps?.color || theme.colors.danger5}
+          size={iconProps?.size || 16}
+          style={iconProps?.style}
+        />
+      ) : (
+        <>
+          {!isHide &&
+            <Lottie
+              progress={animationProgress.current}
+              source={animationGif}
             />
-        </TouchableOpacity>
-    )
+          }
+          <IconAntDesign
+            name={isActive ? icon[0] : icon[1]}
+            color={iconProps?.color || theme.colors.danger5}
+            size={iconProps?.size || 16}
+            style={iconProps?.style}
+          />
+        </>
+      )}
+    </TouchableOpacity>
+  )
 }