update dropdown alert

android/app/build.gradle

@@ -132,8 +132,8 @@ android {
         applicationId "com.dcv.invest"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2
-        versionName "1.2"
+        versionCode 4
+        versionName "1.3"
         vectorDrawables.useSupportLibrary = true
     }
     splits {

src/RootView.js

-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   View,
   Text,
@@ -14,15 +14,25 @@ import Modal from 'react-native-modal';
 import {SkypeIndicator} from 'react-native-indicators';
 import {enableScreens} from 'react-native-screens';
 import NoInternetComponent from './components/NoInternet';
-
+import DropdownAlert from 'react-native-dropdownalert';
 import DeviceInfo from 'react-native-device-info';
 import VersionChecker from './Screens/VersionChecker';
-import DropDown from './components/DropDown';
+import R from './assets/R';
+import {WIDTHXD, HEIGHTXD} from './Config/Functions';
+import DropdownManager from './components/DropdownAlert/DropdownManager';
 
 enableScreens();
 
 const RootView = (props) => {
-  useEffect(() => {}, []);
+  useEffect(() => {
+    DropdownManager.register(
+      dropDownAlertRef.current,
+      dropDownAlertLongTimeRef.current,
+    );
+  }, []);
+
+  const dropDownAlertRef = useRef(null);
+  const dropDownAlertLongTimeRef = useRef(null);
 
   const checkVersion = (props) => {
     const verCurrent = DeviceInfo.getVersion();
@@ -38,7 +48,44 @@ const RootView = (props) => {
         <StackNavigation />
       </View>
       {/*<VersionChecker/>*/}
-      {/* <DropDown /> */}
+      <DropdownAlert
+        inactiveStatusBarBackgroundColor={R.colors.main}
+        activeStatusBarBackgroundColor={R.colors.main}
+        warnImageSrc={R.images.iconWarn}
+        successImageSrc={R.images.iconSuccess}
+        errorImageSrc={R.images.iconError}
+        titleStyle={{color: '#fff'}}
+        messageStyle={{color: '#fff'}}
+        closeInterval={1000}
+        ref={dropDownAlertRef}
+        warnColor={R.colors.orange400}
+        defaultContainer={{
+          borderBottomRightRadius: WIDTHXD(30),
+          borderBottomLeftRadius: WIDTHXD(30),
+          paddingTop: HEIGHTXD(30),
+          paddingVertical: HEIGHTXD(30),
+          paddingHorizontal: WIDTHXD(20),
+        }}
+      />
+      <DropdownAlert
+        inactiveStatusBarBackgroundColor={R.colors.colorMain}
+        activeStatusBarBackgroundColor={R.colors.colorMain}
+        warnImageSrc={R.images.iconWarn}
+        successImageSrc={R.images.iconSuccess}
+        errorImageSrc={R.images.iconError}
+        titleStyle={{color: '#fff'}}
+        messageStyle={{color: '#fff'}}
+        closeInterval={600000}
+        ref={dropDownAlertLongTimeRef}
+        warnColor={R.colors.orange400}
+        defaultContainer={{
+          borderBottomRightRadius: WIDTHXD(30),
+          borderBottomLeftRadius: WIDTHXD(30),
+          paddingTop: HEIGHTXD(30),
+          paddingVertical: HEIGHTXD(30),
+          paddingHorizontal: WIDTHXD(20),
+        }}
+      />
 
       <NoInternetComponent />
     </>

src/Screens/Account/PacrtCQG/PacketCQG.js

@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
 import {saveUserToRedux} from '../../../actions/users';
 import AppText from '../../../components/AppText';
 import I18n from '../../../helper/i18/i18n';
-
+import {showAlert, TYPE} from '../../../components/DropdownAlert/index';
 const PacketCQG = (props) => {
   const [listData, setListData] = useState([]);
   const [fee, setFee] = useState({data: [], title: ''});
@@ -56,14 +56,9 @@ const PacketCQG = (props) => {
     props.hideLoading();
     if (res.data.code == 200) {
       props.saveUserToRedux(res.data.data);
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-        navigate.goBack();
-      }, 500);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -129,7 +124,7 @@ const PacketCQG = (props) => {
       setFeeNonPro(res.data.data.fee_pro);
       setFeePro(res.data.data.fee_non_pro);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -25,6 +25,7 @@ import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 const dataType = [
@@ -43,8 +44,6 @@ const BankInfor = (props) => {
   const [bank_no, setBackNo] = useState('');
   const [account_no, setAccountNo] = useState('');
 
-  console.log(props.route.params.body);
-
   const createFormData = (identity_after, identity_before, sign_img, body) => {
     const data = new FormData();
 
@@ -105,19 +104,17 @@ const BankInfor = (props) => {
       props.hideLoading();
 
       if (res.data.code == 200) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
         setBackNo('');
         setAccountNo('');
         setAccType('');
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/AccountVerification/Tab/GeneralInfor.js

@@ -22,6 +22,7 @@ import PickerImg from '../../../components/Picker/PickerImg';
 import I18n from '../../../helper/i18/i18n';
 
 import {checkFormatArray, convertTime} from '../../../Config/Functions';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const GeneralInfor = (props) => {
   const [lastName, setLastName] = useState(props.user.l_name);
@@ -49,7 +50,8 @@ const GeneralInfor = (props) => {
         address,
       });
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/AccountVerification/Tab/Profile.js

@@ -30,6 +30,7 @@ import PickerItem from '../../../components/Picker/PickerItem';
 import {saveUserToRedux} from '../../../actions/users';
 import I18n from '../../../helper/i18/i18n';
 import {uploadImage} from '../../../apis/Functions/Upload';
+import {TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -139,25 +140,28 @@ const Profile = (props) => {
               props.hideLoading();
               if (res?.status == 200 && res.data) {
                 if (res.data.code == 200) {
-                  setTimeout(() => {
-                    props.saveUserToRedux(res.data.data);
-                    Alert.alert(I18n.t('Notification'), res.data.message);
-                    props.navigation.popToTop();
-                  }, 500);
+                  showAlert(
+                    TYPE.SUCCESS,
+                    I18n.t('Notification'),
+                    res.data.message,
+                  );
+                  props.saveUserToRedux(res.data.data);
+                  props.navigation.popToTop();
                 } else {
                   props.hideLoading();
-                  setTimeout(() => {
-                    Alert.alert(I18n.t('Notification'), res.data.message);
-                  }, 500);
+                  showAlert(
+                    TYPE.ERROR,
+                    I18n.t('Notification'),
+                    res.data.message,
+                  );
                 }
               } else {
                 props.hideLoading();
-                setTimeout(() => {
-                  Alert.alert(
-                    I18n.t('Notification'),
-                    I18n.t('UploadImageFail'),
-                  );
-                }, 500);
+                showAlert(
+                  TYPE.ERROR,
+                  I18n.t('Notification'),
+                  I18n.t('UploadImageFail'),
+                );
               }
             }
           }
@@ -165,7 +169,8 @@ const Profile = (props) => {
       );
     } else {
       props.hideLoading();
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Deposit/ChooseMethod.js

@@ -6,6 +6,7 @@ import Item from './Item';
 import {getListMethod} from '../../../apis/Functions/Deposit';
 import {connect} from 'react-redux';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const MethodPayView = (props) => {
   const [data, setData] = useState([]);
 
@@ -20,7 +21,7 @@ const MethodPayView = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t(''));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/History/History.js

@@ -3,6 +3,7 @@ import {Alert} from 'react-native';
 import HistoryView from './HistoryView';
 import {getListTransaction} from '../../../apis/Functions/Widthdraw';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const History = (props) => {
   const [selected, setSelected] = useState('ALL');
@@ -37,9 +38,8 @@ const History = (props) => {
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
-      console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/OTPWallet.js

@@ -26,6 +26,7 @@ import {widthDraw, getListWidthDraw} from '../../../apis/Functions/Widthdraw';
 import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {connect} from 'react-redux';
 import {TABNAVIGATOR} from '../../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -43,9 +44,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
 
@@ -81,18 +82,15 @@ const ConfirmOTP = (propsa) => {
         propsa.hideLoading();
         if (res.data.code == 200) {
           setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
+            showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+
             navigate.navigate(TABNAVIGATOR);
           }, 500);
         } else {
-          setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-          }, 500);
+          showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
         }
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       }
 
       propsa.hideLoading();

src/Screens/Action/Wallet/Tab/Success.js

@@ -5,6 +5,7 @@ import Item from './Item';
 import {getListTransaction} from '../../../../apis/Functions/Widthdraw';
 import AppText from '../../../../components/AppText';
 import I18n from '../../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../../components/DropdownAlert';
 
 const Success = (props) => {
   const [page, setPage] = useState(1);
@@ -34,7 +35,7 @@ const Success = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/Tab/Watting.js

@@ -7,6 +7,7 @@ import {useNavigation} from '@react-navigation/native';
 import AppText from '../../../../components/AppText';
 
 import I18n from '../../../../helper/i18/i18n';
+import {TYPE} from '../../../../components/DropdownAlert';
 
 const Watting = (props) => {
   const [page, setPage] = useState(1);
@@ -41,7 +42,7 @@ const Watting = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Action/Wallet/WalletDeposit.js

@@ -31,6 +31,7 @@ import I18n from '../../../helper/i18/i18n';
 import {OTPWALLET} from '../../../routers/ScreenNames';
 
 import {getOTPApi} from '../../../apis/Functions/users';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -56,12 +57,11 @@ const WalletDeposit = (props) => {
       if (res.data.code == 200) {
         navigate.navigate(OTPWALLET, {type: 'DEPOSIT', amount, notes});
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -35,6 +35,7 @@ import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
 import {getOTPApi} from '../../../apis/Functions/users';
 import {OTPWALLET} from '../../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 var radio_props = [
   {label: I18n.t('FromWallet'), value: 'WALLET'},
   {label: I18n.t('FromCQGAccount'), value: 'INVESTMENT'},
@@ -74,7 +75,7 @@ const WalletWithdraw = (props) => {
         setData(newList);
       }
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 
@@ -102,14 +103,13 @@ const WalletWithdraw = (props) => {
           notes,
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
 
       props.hideLoading();
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Action/Withdraw/WithdrawView.js

@@ -6,6 +6,7 @@ import Item from './Item';
 import {getListWidthDraw} from '../../../apis/Functions/Widthdraw';
 import {connect} from 'react-redux';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const WithdrawView = (props) => {
   const [data, setData] = useState([]);
@@ -21,7 +22,7 @@ const WithdrawView = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/Authen/ConfirmEmail.js

@@ -17,6 +17,7 @@ import {CONFIRMOTP} from '../../routers/ScreenNames';
 import {getOTPApi} from '../../apis/Functions/users';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import I18n from '../../helper/i18/i18n';
+import {TYPE} from '../../components/DropdownAlert';
 
 const ConfirmEmail = (props) => {
   const [value, setValue] = useState('');
@@ -35,12 +36,14 @@ const ConfirmEmail = (props) => {
       if (res.data.code == 200) {
         navigate.navigate(CONFIRMOTP, {email: value});
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(I18n.t('Notification'), `${I18n.t('EnterEmailRequest')}!`);
+      showAlert(
+        TYPE.WARN,
+        I18n.t('Notification'),
+        `${I18n.t('EnterEmailRequest')}!`,
+      );
     }
   };
 

src/Screens/Authen/ConfirmOTP.js

@@ -26,6 +26,7 @@ import AppText from '../../components/AppText';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -42,9 +43,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
       const res = await verifyOTPApi({
@@ -61,7 +62,7 @@ const ConfirmOTP = (propsa) => {
           email: propsa.route.params.email,
         });
       } else {
-        Alert.alert(I18n.t('Notification'), res.data.message);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     }
   };

src/Screens/Authen/Login.js

@@ -28,6 +28,7 @@ import {connect} from 'react-redux';
 import messaging from '@react-native-firebase/messaging';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Login = (props) => {
   const {navigation} = props;
@@ -90,12 +91,11 @@ const Login = (props) => {
           routes: [{name: TABNAVIGATOR}],
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.WARN,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Authen/NewPassWord.js

@@ -19,6 +19,7 @@ import I18n from '../../helper/i18/i18n';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const NewPassword = (props) => {
   const [password, setPassword] = useState('');
@@ -29,7 +30,7 @@ const NewPassword = (props) => {
 
   const changePass = async () => {
     if (!password || !cfPassword) {
-      Alert.alert(I18n.t('EnterAllInfo'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterAllInfo'));
     } else {
       props.showLoading();
       const res = await forgotPasswordApi({
@@ -42,18 +43,17 @@ const NewPassword = (props) => {
       props.hideLoading();
 
       if (res.data.code == 200) {
-        await setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), I18n.t('ChangePasswordSuccess'));
-          navigate.reset({
-            index: 1,
-            routes: [{name: AUTHEN}],
-          });
-        }, 500);
+        navigate.reset({
+          index: 1,
+          routes: [{name: AUTHEN}],
+        });
+        showAlert(
+          TYPE.SUCCESS,
+          I18n.t('Notification'),
+          I18n.t('ChangePasswordSuccess'),
+        );
       } else {
-        setTimeout(() => {
-          console.log('response', res.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       }
     }
   };

src/Screens/Authen/RegisterOTP.js

@@ -26,6 +26,7 @@ import AppText from '../../components/AppText';
 
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {connect} from 'react-redux';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const CELL_COUNT = 4;
 
@@ -42,9 +43,9 @@ const ConfirmOTP = (propsa) => {
 
   const confirm = async () => {
     if (!value) {
-      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest'));
     } else if (value.length != 4) {
-      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+      showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid'));
     } else {
       propsa.showLoading();
       const res = await verifyOTPApi({
@@ -83,22 +84,17 @@ const ConfirmOTP = (propsa) => {
         propsa.hideLoading();
 
         if (res.data.code == 200 && res.data.data) {
-          setTimeout(() => {
-            Alert.alert(
-              I18n.t('Notification'),
-              I18n.t('RegisterAccountSuccess'),
-            );
-            navigate.navigate('LOGIN');
-          }, 500);
+          showAlert(
+            TYPE.WARN,
+            I18n.t('Notification'),
+            I18n.t('RegisterAccountSuccess'),
+          );
+          navigate.navigate('LOGIN');
         } else {
-          setTimeout(() => {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-          }, 500);
+          showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
         }
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
 
       propsa.hideLoading();

src/Screens/Authen/Registor.js

@@ -17,6 +17,7 @@ import {registorApi, getOTPApi} from '../../apis/Functions/users';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
 import {REGISTEROTP} from '../../routers/ScreenNames';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Registor = (props) => {
   const {navigation} = props;
@@ -58,12 +59,11 @@ const Registor = (props) => {
           sponsor_id,
         });
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/Feedback/Feedback.js

@@ -7,6 +7,7 @@ import {sendFeedBack} from '../../apis/Functions/General';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import I18n from '../../helper/i18/i18n';
 import {useNavigation} from '@react-navigation/native';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Feedback = (props) => {
   const naviation = useNavigation();
@@ -25,18 +26,12 @@ const Feedback = (props) => {
     if (res?.status == 200 && res.data) {
       if (res.data.code == 200) {
         naviation.goBack();
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), 'upload fail');
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), 'upload fail');
     }
   };
   const createFormData = (photo, body) => {

src/Screens/Menu/Payments/Payments.js

@@ -5,6 +5,7 @@ import Item from './Item';
 import AppText from '../../../components/AppText';
 import {getListTransaction} from '../../../apis/Functions/Widthdraw';
 import I18n from '../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Payments = (props) => {
   const [page, setPage] = useState(1);
@@ -31,9 +32,8 @@ const Payments = (props) => {
     if ((res.data.code = 200 && res.data.data)) {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
-      console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Menu/Profile/Tab/GeneralInfor.js

@@ -28,13 +28,17 @@ import {
   checkFormatArray,
 } from '../../../../Config/Functions';
 import {updateInforUser} from '../../../../apis/Functions/users';
+import {showAlert, TYPE} from '../../../../components/DropdownAlert';
 
 const GeneralInfor = (props) => {
   const [phone, setPhone] = useState(props.user.phone);
   const [address, setAddress] = useState(props.user.address);
 
   const onClick = async () => {
-    const titles = [I18n.t('Phone').toLowerCase(), I18n.t('Address').toLowerCase()];
+    const titles = [
+      I18n.t('Phone').toLowerCase(),
+      I18n.t('Address').toLowerCase(),
+    ];
     const index = checkFormatArray([phone, address]);
     if (index === true) {
       props.showLoading();
@@ -46,18 +50,15 @@ const GeneralInfor = (props) => {
       });
       props.hideLoading();
       if (res.data.code == 200) {
-        setTimeout(() => {
-          props.saveUserToRedux(res.data.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-          props.navigation.popToTop();
-        }, 500);
+        props.saveUserToRedux(res.data.data);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+        props.navigation.popToTop();
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );
@@ -136,8 +137,7 @@ const GeneralInfor = (props) => {
             <View style={{height: 40}} />
             <View style={{justifyContent: 'center', alignItems: 'center'}}>
               <TouchableOpacity onPress={onClick} style={styles.btn}>
-                <AppText i18nKey={'Update'} style={styles.txtBtn}>
-                </AppText>
+                <AppText i18nKey={'Update'} style={styles.txtBtn}></AppText>
               </TouchableOpacity>
             </View>
           </View>

src/Screens/MethodPay/AddMethod.js

@@ -26,6 +26,7 @@ import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
 import SelectBankModal from './SelectBankModal';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const {width} = Dimensions.get('window');
 
@@ -49,7 +50,7 @@ const AddMethodPay = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 
@@ -77,17 +78,14 @@ const AddMethodPay = (props) => {
       });
       props.hideLoading();
       if (res.data.code == 200) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-          navigate.goBack();
-        }, 500);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
+        navigate.goBack();
       } else {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
-      Alert.alert(
+      showAlert(
+        TYPE.ERROR,
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],
       );

src/Screens/MethodPay/MethodPay.js

@@ -4,6 +4,7 @@ import MethodPayView from './MethodPayView';
 import {getListWidthDraw} from '../../apis/Functions/Widthdraw';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const MethodPay = (props) => {
   const [data, setData] = useState([]);
@@ -31,7 +32,7 @@ const MethodPay = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/NewFeed/Calendar/Calendar.js

 import React, {Component, useState, useEffect, useRef} from 'react';
 import {View, Text, Platform, FlatList} from 'react-native';
 import {getListCalendar} from '../../../apis/Functions/NewFeed';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 import {convertTimeApi} from '../../../Config/Functions';
 import I18n from '../../../helper/i18/i18n';
 
@@ -31,7 +32,7 @@ const NewFeed = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/NewFeed/Media/Media.js

@@ -4,6 +4,7 @@ import I18n from '../../../helper/i18/i18n';
 
 import MediaView from './MediaView';
 import {getListMedia} from '../../../apis/Functions/NewFeed';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Media = (props) => {
   const [data, setData] = useState([]);
@@ -24,7 +25,7 @@ const Media = (props) => {
         setMediaHot(res.data.data[0].data[0]);
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
 

src/Screens/NewFeed/Media/MediaDetail.js

@@ -6,6 +6,7 @@ import {
   ImageBackground,
   TouchableOpacity,
   FlatList,
+  Alert,
 } from 'react-native';
 import YouTube from 'react-native-youtube';
 import R from '../../../assets/R';
@@ -17,6 +18,7 @@ import {MEDIADETAIL} from '../../../routers/ScreenNames';
 import {getDetailMedia} from '../../../apis/Functions/NewFeed';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const Item = (props) => {
   const navigate = useNavigation();
@@ -64,7 +66,7 @@ const MediaDetail = (props) => {
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
+      showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
     }
   };
   return (
@@ -83,7 +85,7 @@ const MediaDetail = (props) => {
             <Text style={styles.txtTitle}>{data.title}</Text>
           </View>
           <View style={styles.body}>
-            <AppText style={styles.txtBig} i18nKey={('TopVideo')}/>
+            <AppText style={styles.txtBig} i18nKey={'TopVideo'} />
             <FlatList
               showsVerticalScrollIndicator={false}
               data={data.related_videos}

src/Screens/NewFeed/Tab1/Tab1.js

@@ -15,6 +15,7 @@ import Item from './item';
 import {getListNew, getListCategoryNew} from '../../../apis/Functions/NewFeed';
 import I18n from '../../../helper/i18/i18n';
 import AppText from '../../../components/AppText';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const NewFeed = (props) => {
   const [selected, setSelected] = useState('');
@@ -35,7 +36,7 @@ const NewFeed = (props) => {
       setFillters(res.data.data);
       console.log(res.data.data);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -62,7 +63,7 @@ const NewFeed = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
     setisRefresh(false);
   };

src/Screens/Notification/Notification.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../apis/Functions/users';
 import NotificationView from './NotificaitonView';
 import I18n from '../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 const Notifcation = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -29,7 +30,7 @@ const Notifcation = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Setting/Setting.js

@@ -6,6 +6,7 @@ import {updateLangugeApi} from '../../apis/Functions/users';
 import I18n from '../../helper/i18/i18n';
 import {connect} from 'react-redux';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {showAlert, TYPE} from '../../components/DropdownAlert';
 
 const Setting = (props) => {
   const convertKeyLanguage = (key) => {
@@ -21,13 +22,9 @@ const Setting = (props) => {
     });
     props.hideLoading();
     if (res.data.code == 200) {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     } else {
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), res.data.message);
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 

src/Screens/Transaction/DueDate/DueDate.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import DueDateView from './DueDateView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const DueDate = (props) => {
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const DueDate = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const DueDate = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const DueDate = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'EXPIRY_DATE',
+      type: 'EXPIRY_DATE',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -62,7 +66,7 @@ const DueDate = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -80,7 +84,7 @@ const DueDate = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'EXPIRY_DATE',
+      type: 'EXPIRY_DATE',
       category_id: filterId,
     });
     setPage(page + 1);
@@ -90,7 +94,6 @@ const DueDate = (props) => {
     setIsRefresh(false);
   };
 
-
   return (
     <DueDateView
       onRefresh={onRefresh}

src/Screens/Transaction/Escrow/Escrow.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import EscrowView from './EscrowView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const Escrow = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const Escrow = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const Escrow = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const Escrow = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'ESCROW',
+      type: 'ESCROW',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -62,7 +66,7 @@ const Escrow = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -80,7 +84,7 @@ const Escrow = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'ESCROW',
+      type: 'ESCROW',
       category_id: filterId,
     });
     setPage(page + 1);

src/Screens/Transaction/PriceList/PriceList.js

 import React, {useState, useEffect} from 'react';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import PriceListView from './PriceListView';
 import I18n from '../../../helper/i18/i18n';
 import {Alert, Platform} from 'react-native';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 
 const PriceList = (props) => {
-    const [selected, setSelected] = useState('');
-    const [page, setPage] = useState(1);
-    const [data, setData] = useState([]);
-    const [tottalPage, setTotalPage] = useState(1);
-    const [isRefresh, setIsRefresh] = useState(false);
-    const [filters, setFilters] = useState([]);
-    const [filterId, setFilterId] = useState(-1);
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setIsRefresh] = useState(false);
+  const [filters, setFilters] = useState([]);
+  const [filterId, setFilterId] = useState(-1);
 
-    useEffect(() => {
-        getCategoryData();
-    }, []);
-    useEffect(() => {
-        setData([])
-        getData();
-    }, [filterId]);
+  useEffect(() => {
+    getCategoryData();
+  }, []);
+  useEffect(() => {
+    setData([]);
+    getData();
+  }, [filterId]);
 
-    const getCategoryData = async () => {
-        // setIsRefresh(true);
-        const res = await getListCategoryProduct({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 20,
-            page_index: 1,
-            type: 'PRODUCT',
-        });
-        if ((res.data.code = 200 && res.data.data)) {
-            let data = [];
-            data.push({id: -1, name: 'All'});
-            setFilters(data.concat([...res.data.data]));
-        } else {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-        }
-    };
+  const getCategoryData = async () => {
+    // setIsRefresh(true);
+    const res = await getListCategoryProduct({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 20,
+      page_index: 1,
+      type: 'PRODUCT',
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      let data = [];
+      data.push({id: -1, name: 'All'});
+      setFilters(data.concat([...res.data.data]));
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
 
-    const onRefresh = () => {
-        setPage(1);
-        getData();
-    };
+  const onRefresh = () => {
+    setPage(1);
+    getData();
+  };
 
-    const getData = async () => {
-        setIsRefresh(true);
-        setPage(1);
-        const res = await getTransactionListByCategory({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 10,
-            page_index: 1,
-            type:'PRICE_TABLE',
-            category_id: filterId,
-        });
-        setIsRefresh(false);
-        console.log('getData', res);
-        if ((res.data.code = 200 && res.data.data)) {
-            setData(res.data.data);
-            setTotalPage(res.data.meta.pages);
-        } else {
-            Alert.alert(I18n.t('Notification'), res.data.message);
-        }
-    };
+  const getData = async () => {
+    setIsRefresh(true);
+    setPage(1);
+    const res = await getTransactionListByCategory({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: 'PRICE_TABLE',
+      category_id: filterId,
+    });
+    setIsRefresh(false);
+    console.log('getData', res);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+  };
 
-    const onLoadMore = () => {
-        console.log(tottalPage);
-        if (page < tottalPage) {
-            getDataLoadMore();
-        }
-    };
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) {
+      getDataLoadMore();
+    }
+  };
 
-    const getDataLoadMore = async () => {
-        setIsRefresh(true);
-        const res = await getTransactionListByCategory({
-            keyword: '',
-            platform: Platform.OS,
-            page_size: 10,
-            page_index: page + 1,
-            type:'PRICE_TABLE',
-            category_id: filterId,
-        });
-        setPage(page + 1);
-        if (res.data.code == 200) {
-            setData(data.concat(res.data.data));
-        }
-        setIsRefresh(false);
-    };
+  const getDataLoadMore = async () => {
+    setIsRefresh(true);
+    const res = await getTransactionListByCategory({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: page + 1,
+      type: 'PRICE_TABLE',
+      category_id: filterId,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setIsRefresh(false);
+  };
 
-    return (
-        <PriceListView
-            onRefresh={onRefresh}
-            isRefresh={isRefresh}
-            onLoadMore={onLoadMore}
-            setFilterId={setFilterId}
-            filterId={filterId}
-            filters={filters}
-            data={data}
-        />
-    );
+  return (
+    <PriceListView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFilterId={setFilterId}
+      filterId={filterId}
+      filters={filters}
+      data={data}
+    />
+  );
 };
 
 export default PriceList;

src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ContractDescription.js

 import React, {useEffect, useState} from 'react';
-import {
-    View,
-    ScrollView,
-    StyleSheet, Alert,
-} from 'react-native';
+import {View, ScrollView, StyleSheet, Alert} from 'react-native';
 import R from '../../../../../assets/R';
 import GeneralInfo from './ItemView/GeneralInfo';
 import TimeTransaction from './ItemView/TimeTransaction';
@@ -12,42 +8,40 @@ import {HEIGHTXD} from '../../../../../Config/Functions';
 import {showLoading, hideLoading} from '../../../../../actions/loadingAction';
 import {getContractDescription} from '../../../../../apis/Functions/Transaction';
 import I18n from '../../../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../../../components/DropdownAlert';
 
 const ContractDescription = (props) => {
-    const[contractDescription, setContractDescription] = useState(null)
-    useEffect(() => {
-        async function fetchData() {
-            showLoading()
-            const res = await getContractDescription(props.route.params.id)
-            if(res.status === 200 && res.data.code ===200) {
-                setContractDescription(res.data.data)
-            } else {
-                Alert.alert(I18n.t('Notification'), res.data.message);
-            }
-            console.log(res)
-            hideLoading()
-        }
-        fetchData();
-    }, [props.route.params.id]);
-    return (
-        <ScrollView
-            style={styles.container}
-            showsVerticalScrollIndicator={false}>
-            <View style={{marginBottom: HEIGHTXD(100)}}>
-                <GeneralInfo contractDescription={contractDescription}/>
-                <TimeTransaction contractDescription={contractDescription}/>
-                <PriceInfo contractDescription={contractDescription}/>
-            </View>
-        </ScrollView>
-    );
+  const [contractDescription, setContractDescription] = useState(null);
+  useEffect(() => {
+    async function fetchData() {
+      showLoading();
+      const res = await getContractDescription(props.route.params.id);
+      if (res.status === 200 && res.data.code === 200) {
+        setContractDescription(res.data.data);
+      } else {
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+      }
 
+      hideLoading();
+    }
+    fetchData();
+  }, [props.route.params.id]);
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={{marginBottom: HEIGHTXD(100)}}>
+        <GeneralInfo contractDescription={contractDescription} />
+        <TimeTransaction contractDescription={contractDescription} />
+        <PriceInfo contractDescription={contractDescription} />
+      </View>
+    </ScrollView>
+  );
 };
 export default ContractDescription;
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: R.colors.colorBackground,
-        paddingTop: HEIGHTXD(30),
-    },
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.colorBackground,
+    paddingTop: HEIGHTXD(30),
+  },
 });

src/Screens/Transaction/ProductDetail/Tab/QualityStandard/QualityStandard.js

 import React, {useEffect, useState} from 'react';
-import {
-    Alert,
-    ScrollView, StyleSheet, Text,
-    View,
-} from 'react-native';
+import {Alert, ScrollView, StyleSheet, Text, View} from 'react-native';
 import {getFontXD, HEIGHTXD} from '../../../../../Config/Functions';
 import R from '../../../../../assets/R';
 import {hideLoading, showLoading} from '../../../../../actions/loadingAction';
 import {getContractDescription} from '../../../../../apis/Functions/Transaction';
 import I18n from '../../../../../helper/i18/i18n';
+import {showAlert, TYPE} from '../../../../../components/DropdownAlert';
 const QualityStandard = (props) => {
-    const[qualityStandard, setQualityStandard] = useState('')
-    useEffect(() => {
-        async function fetchData() {
-            showLoading()
-            const res = await getContractDescription(props.route.params.id)
-            if(res.status === 200 && res.data.code ===200) {
-                setQualityStandard(res.data.data.quality_standard_desc)
-            } else {
-                Alert.alert(I18n.t('Notification'), res.data.message);
-            }
-            hideLoading()
-        }
-        fetchData();
-    }, [props.route.params.id]);
-    return (
-        <ScrollView
-            style={styles.container}
-            showsVerticalScrollIndicator={false}>
-            <View style={{marginBottom: HEIGHTXD(100),
-                backgroundColor: R.colors.white,
-                width: '100%',
-                shadowColor: '#181F4D21',
-                shadowOffset: {width: 1, height: 1},
-                shadowOpacity: 1,
-                shadowRadius: 2,
-                elevation: 1,}}>
-                <Text style={styles.content}>{qualityStandard}</Text>
-            </View>
-        </ScrollView>
-    )
-
-}
-export default QualityStandard
+  const [qualityStandard, setQualityStandard] = useState('');
+  useEffect(() => {
+    async function fetchData() {
+      showLoading();
+      const res = await getContractDescription(props.route.params.id);
+      if (res.status === 200 && res.data.code === 200) {
+        setQualityStandard(res.data.data.quality_standard_desc);
+      } else {
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+      }
+      hideLoading();
+    }
+    fetchData();
+  }, [props.route.params.id]);
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View
+        style={{
+          marginBottom: HEIGHTXD(100),
+          backgroundColor: R.colors.white,
+          width: '100%',
+          shadowColor: '#181F4D21',
+          shadowOffset: {width: 1, height: 1},
+          shadowOpacity: 1,
+          shadowRadius: 2,
+          elevation: 1,
+        }}>
+        <Text style={styles.content}>{qualityStandard}</Text>
+      </View>
+    </ScrollView>
+  );
+};
+export default QualityStandard;
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: R.colors.colorBackground,
-        paddingTop: HEIGHTXD(30),
-    },
-    content: {
-        flex: 3.5,
-        fontSize: getFontXD(36),
-        color: R.colors.black,
-        paddingVertical: HEIGHTXD(30),
-        paddingHorizontal: HEIGHTXD(30)
-    },
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.colorBackground,
+    paddingTop: HEIGHTXD(30),
+  },
+  content: {
+    flex: 3.5,
+    fontSize: getFontXD(36),
+    color: R.colors.black,
+    paddingVertical: HEIGHTXD(30),
+    paddingHorizontal: HEIGHTXD(30),
+  },
 });

src/Screens/Transaction/TimeTransaction/TimeTransaction.js

@@ -2,9 +2,13 @@ import React, {useState, useEffect} from 'react';
 import {getListNotification} from '../../../apis/Functions/users';
 import TimeTransactionView from './TimeTransactionView';
 import I18n from '../../../helper/i18/i18n';
-import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {
+  getListCategoryProduct,
+  getTransactionListByCategory,
+} from '../../../apis/Functions/Transaction';
 import {Alert, Platform} from 'react-native';
 import PriceListView from '../PriceList/PriceListView';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
 const PriceList = (props) => {
   const [selected, setSelected] = useState('');
   const [page, setPage] = useState(1);
@@ -18,7 +22,7 @@ const PriceList = (props) => {
     getCategoryData();
   }, []);
   useEffect(() => {
-    setData([])
+    setData([]);
     getData();
   }, [filterId]);
 
@@ -36,7 +40,7 @@ const PriceList = (props) => {
       data.push({id: -1, name: 'All'});
       setFilters(data.concat([...res.data.data]));
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -53,7 +57,7 @@ const PriceList = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: 1,
-      type:'TRANSACTION_TIME',
+      type: 'TRANSACTION_TIME',
       category_id: filterId,
     });
     setIsRefresh(false);
@@ -61,7 +65,7 @@ const PriceList = (props) => {
       setData(res.data.data);
       setTotalPage(res.data.meta.pages);
     } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
+      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
     }
   };
 
@@ -79,7 +83,7 @@ const PriceList = (props) => {
       platform: Platform.OS,
       page_size: 10,
       page_index: page + 1,
-      type:'TRANSACTION_TIME',
+      type: 'TRANSACTION_TIME',
       category_id: filterId,
     });
     setPage(page + 1);

src/assets/images.js

@@ -16,6 +16,10 @@ const images = {
   iconMenu: require('./images/iconmenu.png'),
   bgHome: require('./images/bgHome01.png'),
 
+  iconWarn: require('./images/iconWarn.png'),
+  iconSuccess: require('./images/iconSuccess.png'),
+  iconError: require('./images/iconError.png'),
+
   iconUser: require('./images/iconUser1.png'),
   iconUserHome: require('./images/iconUser.png'),
   iconUserAccuracy: require('./images/iconUserAccuracy.png'),

src/components/DropdownAlert/DropdownManager.js

+class DropdownManager {
+  _defaultDropdown = null;
+  _defaultDropdownLongTime = null;
+
+  register(_ref, _refLongTime) {
+    if (!this._defaultDropdown) {
+      this._defaultDropdown = _ref;
+    }
+    if (!this._defaultDropdownLongTime) {
+      this._defaultDropdownLongTime = _refLongTime;
+    }
+  }
+
+  unregister(_ref, _refLongTime) {
+    if (!!this._defaultDropdown && this._defaultDropdown._id === _ref._id) {
+      this._defaultDropdown = null;
+    }
+
+    if (
+      !!this._defaultDropdownLongTime &&
+      this._defaultDropdownLongTime._id === _refLongTime._id
+    ) {
+      this._defaultDropdownLongTime = null;
+    }
+  }
+
+  getDefault(isLongMessage = false) {
+    return isLongMessage
+      ? this._defaultDropdownLongTime
+      : this._defaultDropdown;
+  }
+}
+
+export default new DropdownManager();

src/components/DropdownAlert/index.js

+import DropdownManager from './DropdownManager';
+// Type display dropdown
+export const TYPE = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARN: 'warn',
+  ERROR: 'error',
+};
+/**
+ * To display dropdown Alert in top screen
+ * @param type type of Alert (check it in TYPE above)
+ * @param title title of Alert
+ * @param description description of Alert
+ */
+export function showAlert(type, title, description) {
+  const ref = DropdownManager.getDefault(description.length > 60);
+  if (!!ref) {
+    ref.alertWithType(type, title, description);
+  }
+}
+/**
+ * To hide dropdown Alert in top screen
+ */
+export function hideAlert() {
+  const ref = DropdownManager.getDefault();
+
+  if (!!ref) {
+    ref.closeAction();
+  }
+}

src/components/Header/HeaderHome.js

@@ -34,6 +34,8 @@ import {
   PACKETCQG,
 } from '../../routers/ScreenNames';
 import PickerAvtart from '../../components/Picker/PickerAvatart';
+import {showAlert, TYPE} from '../../components/DropdownAlert/index';
+
 const renderWallet = (status, current_money, current_cqg_money, contract) => {
   const navigate = useNavigation();
   if (status == 4)
@@ -220,7 +222,7 @@ const HeaderHome = (props) => {
   };
 
   const copyToClipboard = () => {
-    Alert.alert(I18n.t('Notification'), I18n.t('CopyLink'));
+    showAlert(TYPE.SUCCESS, I18n.t('Notification'), I18n.t('CopyLink'));
     Clipboard.setString(props.user.sponsor_url);
   };
 

src/components/Picker/PickerAvatart.js

@@ -23,6 +23,7 @@ import {useNavigation} from '@react-navigation/native';
 import {TABNAVIGATOR} from '../../routers/ScreenNames';
 import {changeAvatart} from '../../apis/Functions/users';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {showAlert, TYPE} from '../../components/DropdownAlert/index';
 
 const options = {
   title: 'Select Avatar',
@@ -66,21 +67,16 @@ const PickerImg = (props) => {
     props.hideLoading();
     if (res?.status == 200 && res.data) {
       if (res.data.code == 200) {
-        setTimeout(() => {
-          props.saveUserToRedux(res.data.data);
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+        props.saveUserToRedux(res.data.data);
+        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
       } else {
         setImgAvatart(props.user.picture_url);
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-        }, 500);
+
+        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
       }
     } else {
       setImgAvatart(props.user.picture_url);
-      setTimeout(() => {
-        Alert.alert(I18n.t('Notification'), 'upload fail');
-      }, 500);
+      showAlert(TYPE.ERROR, I18n.t('Notification'), 'upload fail');
     }
   };