set up picker date

782732ca · Giang Tran · 226023fd · 782732ca · 782732ca · 782732ca
Commit 782732ca authored Mar 01, 2021 by Giang Tran
30 changed files
--- a/android/app/src/main/java/com/invest/MainApplication.java
+++ b/android/app/src/main/java/com/invest/MainApplication.java
@@ -4,6 +4,8 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.imagepicker.ImagePickerPackage;
+import com.imagepicker.ImagePickerPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

--- a/android/settings.gradle
+++ b/android/settings.gradle
 rootProject.name = 'Invest'
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

--- a/ios/Invest.xcodeproj/project.pbxproj
+++ b/ios/Invest.xcodeproj/project.pbxproj
@@ -268,7 +268,7 @@
 				00E356EC1AD99517003FC87E /* Resources */,
 				50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */,
 				E44ED71C60298AC6A80FDE0F /* ShellScript */,
-				48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */,
+				A5ABCC563E72E104612E5CAE /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -292,7 +292,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
 				6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
-				21C14CFEB343E17408732454 /* [CP] Copy Pods Resources */,
+				286371081E0C0431FA85D270 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -513,13 +513,31 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */ = {
+		50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
+				"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		6CC873A1E6FA7C328D7B37A9 /* ShellScript */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -537,55 +555,19 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 			);
-			name = "[CP] Copy Pods Resources";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-		50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		6CC873A1E6FA7C328D7B37A9 /* ShellScript */ = {
+		A5ABCC563E72E104612E5CAE /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh",
+				"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -602,10 +584,32 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 		ACDE381B2550EE5E49E84DE8 /* [CP] Check Pods Manifest.lock */ = {

--- a/ios/Invest/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/Invest/Images.xcassets/AppIcon.appiconset/Contents.json
@@ -2,37 +2,52 @@
  "images" : [
    {
      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
    },
    {
      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
    },
    {
      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
    },
    {
      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
    },
    {
      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
    },
    {
      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
    }
  ],
  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
  }
 }
--- a/ios/Invest/Info.plist
+++ b/ios/Invest/Info.plist
@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>To upload images</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -38,7 +40,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

--- a/ios/Podfile
+++ b/ios/Podfile
@@ -79,6 +79,8 @@ target 'Invest' do

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

+  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
+
  target 'InvestTests' do
    inherit! :complete
    # Pods for testing

--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -233,6 +233,8 @@ PODS:
    - React-cxxreact (= 0.62.2)
    - React-jsi (= 0.62.2)
  - React-jsinspector (0.62.2)
+  - react-native-image-picker (3.2.1):
+    - React-Core
  - react-native-safe-area-context (3.1.9):
    - React-Core
  - React-RCTActionSheet (0.62.2):
@@ -298,14 +300,24 @@ PODS:
    - React-Core
  - RNCMaskedView (0.1.10):
    - React
-  - RNGestureHandler (1.10.2):
+  - RNGestureHandler (1.10.3):
+    - React-Core
+  - RNImageCropPicker (0.36.0):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.36.0)
+    - TOCropViewController
+  - RNImageCropPicker/QBImagePickerController (0.36.0):
    - React-Core
+    - React-RCTImage
+    - TOCropViewController
  - RNReanimated (1.13.2):
    - React-Core
-  - RNScreens (2.17.1):
+  - RNScreens (2.18.0):
    - React-Core
-  - RNVectorIcons (8.0.0):
+  - RNVectorIcons (8.1.0):
    - React-Core
+  - TOCropViewController (2.6.0)
  - Yoga (1.14.0)
  - YogaKit (1.18.1):
    - Yoga (~> 1.14)
@@ -347,6 +359,7 @@ DEPENDENCIES:
  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -362,6 +375,7 @@ DEPENDENCIES:
  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
  - RNReanimated (from `../node_modules/react-native-reanimated`)
  - RNScreens (from `../node_modules/react-native-screens`)
  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -380,6 +394,7 @@ SPEC REPOS:
    - Flipper-RSocket
    - FlipperKit
    - OpenSSL-Universal
+    - TOCropViewController
    - YogaKit

 EXTERNAL SOURCES:
@@ -413,6 +428,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
  React-jsinspector:
    :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-image-picker:
+    :path: "../node_modules/react-native-image-picker"
  react-native-safe-area-context:
    :path: "../node_modules/react-native-safe-area-context"
  React-RCTActionSheet:
@@ -441,6 +458,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-community/masked-view"
  RNGestureHandler:
    :path: "../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
  RNReanimated:
    :path: "../node_modules/react-native-reanimated"
  RNScreens:
@@ -477,6 +496,7 @@ SPEC CHECKSUMS:
  React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
  React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
  React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
+  react-native-image-picker: 64d12e81f3d9dad0af107fe6536b295d51932ec0
  react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
  React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
  React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
@@ -490,13 +510,15 @@ SPEC CHECKSUMS:
  ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
  RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
-  RNGestureHandler: e66feb0fda7da74ea6a3094656b3c1efe05f5c07
+  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNImageCropPicker: e641bf83ac47324994cac139bde74635ec52c17c
  RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
-  RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
-  RNVectorIcons: f67a1abce2ec73e62fe4606e8110e95a832bc859
+  RNScreens: f0d7a2a440a8ba9f4574ca1ddb3368f473891be4
+  RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
+  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
  Yoga: 3ebccbdd559724312790e7742142d062476b698e
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

-PODFILE CHECKSUM: ff083ffc9072408b74d721ac5fc0815d6315b00c
+PODFILE CHECKSUM: b424f8fa2cc5573b0757c409fab556af49e18736

 COCOAPODS: 1.10.1
--- a/package.json
+++ b/package.json
@@ -21,10 +21,15 @@
    "moment": "^2.29.1",
    "react": "16.11.0",
    "react-native": "0.62.2",
+    "react-native-datepicker": "^1.7.2",
    "react-native-gesture-handler": "^1.9.0",
+    "react-native-image-crop-picker": "^0.36.0",
+    "react-native-image-picker": "^3.2.1",
    "react-native-indicators": "^0.17.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modal": "^11.7.0",
+    "react-native-modal-datetime-picker": "^8.7.1",
+    "react-native-modal-dropdown": "^1.0.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.17.1",

--- a/src/Config/Functions.js
+++ b/src/Config/Functions.js
@@ -35,12 +35,12 @@ export const WIDTHXD = (w) => width * (w / 1125);
 export const HEIGHTXD = (h) => height * (h / 2436);
 export const getLineHeightXD = (f) => f / 3 + 2;
 export const getFontXD = (f) => f / 3 + 2;
-
 // Get size for figmar
 export const WIDTH = (w) => width * (w / 360);
 export const HEIGHT = (h) => height * (h / 640);
 export const getLineHeight = (f) => f;
 export const getFont = (f) => f - 1;
+export const WIDTHXDICON = (w) => width * (w / 1125);

 export const validatePhone = (str) => {
  let re = /^[0-9+]{9,11}$/;

--- a/src/Screens/AccountVerification/Tab/BankInfor.js
+++ b/src/Screens/AccountVerification/Tab/BankInfor.js
@@ -3,13 +3,14 @@ import {View, Text} from 'react-native';
 import TextField from '../../../components/TextField';
 import TextMulti from '../../../components/TextMulti';
 import PickerImg from '../../../components/Picker/PickerImg';
+import PickerDate from '../../../components/Picker/PickerDate';

 const BankInfor = (props) => {
  return (
    <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
      <TextField title={'Loại thẻ'} />
      <TextField title={'Số thẻ'} />
-      <TextField title={'Ngày cấp'} />
+      <PickerDate title={'Ngày cấp'} />
      <View
        style={{
          flexDirection: 'row',

--- a/src/Screens/AccountVerification/Tab/GeneralInfor.js
+++ b/src/Screens/AccountVerification/Tab/GeneralInfor.js
-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text} from 'react-native';
 import TextField from '../../../components/TextField';
 import TextMulti from '../../../components/TextMulti';
-
+import PickerDate from '../../../components/Picker/PickerDate';
+import PickerImg from '../../../components/Picker/PickerImg';
 const GeneralInfor = (props) => {
+  const [birth, setBirth] = useState(new Date());
+
  return (
    <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
      <TextField title={'User name'} />
@@ -18,7 +21,12 @@ const GeneralInfor = (props) => {
        </View>
      </View>
      <TextField title={'Số điện thoại'} />
-      <TextField title={'Ngày sinh'} />
+      <PickerDate
+        value={birth}
+        onValueChange={(val) => setBirth(val)}
+        title={'Ngày sinh'}
+      />
+
      <TextMulti title={'Địa chỉ'} />
    </View>
  );

--- a/src/Screens/AccountVerification/Tab/Profile.js
+++ b/src/Screens/AccountVerification/Tab/Profile.js
@@ -6,7 +6,6 @@ const Profile = (props) => {
  return (
    <View>
      <Text>Profile screen</Text>
-      <PickerImg />
    </View>
  );
 };

--- a/src/Screens/Feedback/FeedbackView.js
+++ b/src/Screens/Feedback/FeedbackView.js
-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+import PickerItem from '../../components/Picker/PickerItem';
+const dataTest = [
+  {
+    value: '1',
+    name: '2020',
+  },
+  {
+    value: '2',
+    name: '2021',
+  },
+  {
+    value: '3',
+    name: '2022',
+  },
+  {
+    value: '4',
+    name: '2023',
+  },
+  {
+    value: '5',
+    name: '2023',
+  },
+  {
+    value: '3',
+    name: '2022',
+  },
+  {
+    value: '4',
+    name: '2023',
+  },
+  {
+    value: '5',
+    name: '2023',
+  },
+];

 const FeedbackView = (props) => {
+  const [year, setYear] = useState(dataTest[2]);
  return (
-    <View>
+    <View style={{flex: 1, paddingTop: 60}}>
      <Text>FeedbackView screen</Text>
+
+      <PickerItem
+        width={100}
+        data={dataTest}
+        onValueChange={(value, items) => {
+          setYear(items);
+        }}
+      />
    </View>
  );
 };

--- a/src/Screens/Menu/Rose/Item.js
+++ b/src/Screens/Menu/Rose/Item.js
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+import {useNavigation} from '@react-navigation/native';
+import {DETAIL_REQUIRE_MONEY} from '../../../routers/ScreenNames';
+
+const Item = (props) => {
+  const {item} = props;
+  const navigate = useNavigation();
+  return (
+    <TouchableOpacity onPress={() => navigate.navigate(DETAIL_REQUIRE_MONEY)}>
+      <View style={styles.container}>
+        <Block flex={1} row>
+          <View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
+          <View style={styles.wrapDate}>
+            <Text style={styles.txt}>T{item.month}</Text>
+            <Text style={styles.txtTitle}>{item.day}</Text>
+          </View>
+          <Block style={styles.wrapRight} padding={[10, 10]} flex={1}>
+            <View style={styles.rowBet}>
+              <View
+                style={{
+                  flex: 1,
+                  height: HEIGHTXD(200),
+
+                  paddingRight: 10,
+                }}>
+                <View style={{flex: 1}}>
+                  <Text numberOfLines={2} style={styles.txtTitle}>
+                    {item.note}
+                  </Text>
+                </View>
+                <Text style={styles.txtDate}>Ngày {item.date}</Text>
+              </View>
+              <View>
+                <Text
+                  style={{
+                    fontSize: getFontXD(42),
+                    fontWeight: 'bold',
+                    color: '#FFB721',
+                  }}>
+                  +{toPriceVnd(item.money)}
+                </Text>
+              </View>
+            </View>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    height: HEIGHTXD(250),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginTop: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+  wrapRight: {
+    borderLeftColor: R.colors.borderGray,
+    borderLeftWidth: 0.7,
+  },
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: '700',
+  },
+  txt: {
+    fontSize: getFontXD(36),
+    color: '#363636',
+  },
+  txtDate: {
+    fontSize: getFontXD(39),
+    color: '#363636',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+  },
+});
--- a/src/Screens/Menu/Rose/Rose.js
+++ b/src/Screens/Menu/Rose/Rose.js
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, FlatList} from 'react-native';
+import HeaderSB from '../../../components/Header/HeaderSB';
+import Item from './Item';
+
+const data = [
+  {
+    id: '1',
+    month: 2,
+    day: '20',
+    name: 'Nạp tiền',
+    money: 10000000,
+    note: 'Ghi chú nap tiền để đầu tư',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '2',
+    month: 2,
+    day: '20',
+    name: 'Nạp tiền',
+    money: 2000000,
+    note: 'Ghi chú nap tiền để đầu tư',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '3',
+    month: 2,
+    day: '20',
+    name: 'Nạp tiền',
+    money: 3000000,
+    note: 'Ghi chú nap tiền để đầu tư',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '4',
+    month: 2,
+    day: '20',
+    name: 'Nạp tiền',
+    money: 4000000,
+    note: 'Ghi chú nap tiền để đầu tư',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '5',
+    month: 2,
+    day: '20',
+    name: 'Nạp tiền',
+    money: 9000000,
+    note: 'Ghi chú nap tiền để đầu tư',
+    status: 1,
+    date: '20/02/2021',
+  },
+];

 const Rose = (props) => {
  return (
-    <View>
-      <Text>Rose screen</Text>
+    <View style={{flex: 1}}>
+      <HeaderSB title={'HOA HỒNG'} />
+      <View style={{flex: 1}}>
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      </View>
    </View>
  );
 };

--- a/src/assets/images.js
+++ b/src/assets/images.js
@@ -32,6 +32,9 @@ const images = {
  iconBack: require('./images/iconBack.png'),
  bgBtn: require('./images/bgBtn.png'),
  addImg: require('./images/addImg.png'),
+  iconCalendar: require('./images/iconBack.png'),
+  iconImg: require('./images/iconImg.png'),
+  iconCamera: require('./images/iconCamera.png'),
 };

 export default images;
--- a/src/assets/images/iconCamera.png
+++ b/src/assets/images/iconCamera.png
--- a/src/assets/images/iconImg.png
+++ b/src/assets/images/iconImg.png
--- a/src/components/Aleart.tsx
+++ b/src/components/Aleart.tsx
+//@ts-ignore
+import { Alert } from 'react-native';
+
+const AlertMessage = (message: string, title?: string, onPressOk?: any, cancel?: boolean) => {
+    Alert.alert(
+        title || '',
+        message,
+        cancel
+            ? [
+                  {
+                      text:"Hien thi btn khong",
+                      style: 'default',
+                  },
+                  {
+                      text: 'Title btn co',
+                      onPress: () => {
+                          if (typeof onPressOk === 'function') {
+                              onPressOk();
+                          }
+                      },
+                      style: 'default',
+                  },
+              ]
+            : [
+                  {
+                      text:"Hien thi thong bao khong co cancel",
+                      onPress: () => {
+                          if (typeof onPressOk === 'function') {
+                              onPressOk();
+                          }
+                      },
+                  },
+              ],
+        { cancelable: false },
+    );
+};
+export default AlertMessage;
--- a/src/components/Header/HeaderDrawer.js
+++ b/src/components/Header/HeaderDrawer.js
@@ -41,6 +41,7 @@ const HeaderHome = (props) => {
      <Modal
        animationIn={'fadeInLeft'}
        animationOut={'fadeOutLeft'}
+        style={{marginLeft: 20}}
        isVisible={isModalVisible}
        backdropOpacity={0.5}>
        <View

--- a/src/components/Header/HeaderSB.js
+++ b/src/components/Header/HeaderSB.js
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StatusBar,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+  TouchableOpacity,
+  Platform,
+  Button,
+  TouchableWithoutFeedback,
+  TextInput,
+} from 'react-native';
+import R from '../../assets/R';
+import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import LinearGradient from 'react-native-linear-gradient';
+import {connect} from 'react-redux';
+import {HEIGHTXD} from '../../Config/Functions';
+
+import Icon from 'react-native-vector-icons/Ionicons';
+import {useNavigation} from '@react-navigation/native';
+
+const HeaderSearch = (props) => {
+  const {title, isWhite} = props;
+
+  const [openSearch, setOpenSearch] = useState(false);
+  const [txtSearch, setTxtSearch] = useState('');
+  const toggleSearch = () => {
+    setTxtSearch('');
+    setOpenSearch(!openSearch);
+  };
+  const navigate = useNavigation();
+
+  return (
+    <ImageBackground
+      style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
+      source={R.images.bgHeader}>
+      <StatusBar backgroundColor="transparent" translucent={true} />
+      <View style={styles.headerContainer}>
+        <TouchableOpacity onPress={() => navigate.goBack()}>
+          <Image source={R.images.iconBack} style={styles.imgIcon} />
+        </TouchableOpacity>
+
+        {openSearch ? (
+          <TextInput
+            style={styles.txtInput}
+            onChangeText={(val) => setTxtSearch(val)}
+            value={txtSearch}
+          />
+        ) : (
+          <Text style={styles.txtTitle}>{title ? title : ''} </Text>
+        )}
+        <TouchableOpacity onPress={toggleSearch}>
+          {openSearch ? (
+            <Icon name={'refresh-outline'} size={28} color={R.colors.white} />
+          ) : (
+            <Icon name={'search-sharp'} size={28} color={R.colors.white} />
+          )}
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(HeaderSearch);
+
+const styles = StyleSheet.create({
+  img: {
+    height: Platform.OS == 'ios' ? HEIGHTXD(330) : HEIGHTXD(400),
+    width: '100%',
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerContainer: {
+    height: 55,
+    width: '100%',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+    justifyContent: 'space-between',
+  },
+  imgIcon: {
+    width: 25,
+    height: 20,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: R.colors.white,
+    fontWeight: 'bold',
+  },
+  container: {
+    backgroundColor: 'white',
+    height: '100%',
+    width: 300,
+    borderRadius: 20,
+  },
+  txtInput: {
+    backgroundColor: R.colors.white,
+    flex: 1,
+    padding: 2,
+    height: HEIGHTXD(100),
+    fontSize: getFontXD(42),
+    borderRadius: 10,
+    marginHorizontal: 10,
+    paddingHorizontal: 10,
+  },
+  btnIcon: {
+    backgroundColor: R.colors.lightBlue2,
+    padding: 5,
+  },
+});
--- a/src/components/List/StyledIndicator.tsx
+++ b/src/components/List/StyledIndicator.tsx
+import * as React from 'react';
+//@ts-ignore
+import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
+
+const StyledIndicator: React.FunctionComponent<ActivityIndicatorProps> = (props: ActivityIndicatorProps) => {
+    return <ActivityIndicator color={'red'} size={'small'} style={styles.container} {...props} />;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+
+export default StyledIndicator;
--- a/src/components/List/StyledList.tsx
+++ b/src/components/List/StyledList.tsx
+//@ts-ignore
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+//@ts-ignore
+import { FlatList, FlatListProps, RefreshControl, View, TextStyle, StyleProp, ViewStyle } from 'react-native';
+import NoData from './StyledNoData';
+import StyledIndicator from './StyledIndicator';
+
+interface Props extends FlatListProps<any> {
+    [key: string]: any;
+    FlatListComponent?: React.FunctionComponent<any>;
+    loading?: boolean;
+    data: any[];
+    loadingMore?: boolean;
+    noDataText?: string;
+    ListHeaderComponent?: any;
+    scrollEnabled?: boolean;
+    noDataCanRefresh?: boolean;
+    i18Params?: any;
+    noDataTextI18Key?: any;
+    noDataStyle?: StyleProp<ViewStyle>;
+    customStyle?: any;
+
+    onLoadMore?(): void;
+
+    onNoDataRefresh?(): void;
+}
+
+const StyledList = (props: Props, ref: any) => {
+    const [momentumScrolled, setMomentumScrolled] = useState(false);
+    const list = useRef<FlatList>(null);
+    
+    const { loading, loadingMore, data, ListHeaderComponent, refreshing, customStyle } = props;
+    const contentContainerStyle: StyleProp<ViewStyle> = {};
+    const hasData = data?.length !== 0;
+
+    if (!hasData) {
+        contentContainerStyle.flex = 1;
+        // contentContainerStyle.alignItems = 'center'
+        // contentContainerStyle.justifyContent = 'center'
+    }
+
+    let styles: StyleProp<ViewStyle>;
+    if (typeof ListHeaderComponent === 'undefined' && !hasData) {
+        styles = [contentContainerStyle, customStyle];
+    } else {
+        styles = customStyle;
+    }
+
+    function keyExtractor(item: any, i: any): string {
+        return `${i}`;
+    }
+
+    function handleRefresh() {
+        if (props.onRefresh) props.onRefresh();
+    }
+
+    // Bởi vì onEnReached call nhiều lần nên phải trick để chỉ call 1 lần thôi
+    useEffect(() => {
+        if (momentumScrolled) {
+            setMomentumScrolled(true);
+            if (props.onLoadMore) props.onLoadMore();
+        }
+    }, [momentumScrolled]);
+
+    function handleEndReached(info: any) {
+        if (!momentumScrolled) {
+            setMomentumScrolled(true);
+        }
+    }
+
+    function handleNoDataRefresh() {
+        const { onNoDataRefresh } = props;
+        if (onNoDataRefresh) onNoDataRefresh();
+    }
+
+    function onMomentumScrollBegin() {
+        setMomentumScrolled(false);
+    }
+
+    React.useImperativeHandle(ref, () => ({
+        scrollToTop: () => {
+            list?.current?.scrollToOffset({ animated: true, offset: 0 });
+        },
+    }));
+
+    function renderFooter() {
+        if (hasData && loadingMore) {
+            return (
+                <View style={{ alignItems: 'center', marginVertical: 8 }}>
+                    <StyledIndicator size={24} />
+                </View>
+            );
+        }
+        return null;
+    }
+
+    function renderNoData() {
+        const { noDataText, noDataTextI18Key, noDataCanRefresh } = props;
+        return (
+            <NoData
+                customStyle={props.noDataStyle}
+                loading={loading}
+                text={"No data"}
+                canRefresh={noDataCanRefresh}
+                onRefresh={handleNoDataRefresh}
+            />
+        );
+    }
+
+    const FlatListComponent: any = useMemo(() => {
+        return props?.FlatListComponent || FlatList;
+    }, [props?.FlatListComponent]);
+
+    return (
+        <FlatListComponent
+            ref={list}
+            contentContainerStyle={styles}
+            keyExtractor={keyExtractor}
+            initialNumToRender={10}
+            // onEndReached={handleEndReached}
+            onEndReachedThreshold={0.01}
+            onMomentumScrollBegin={onMomentumScrollBegin}
+            ListEmptyComponent={renderNoData}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+                <RefreshControl
+                    refreshing={!!refreshing}
+                    colors={['red']}
+                    tintColor={"blue"}
+                    onRefresh={handleRefresh}
+                />
+            }
+            ListFooterComponent={renderFooter}
+            keyboardShouldPersistTaps={'never'}
+            {...props}
+        />
+    );
+};
+
+export default React.memo(React.forwardRef(StyledList));
--- a/src/components/List/StyledNoData.tsx
+++ b/src/components/List/StyledNoData.tsx
+import * as React from 'react';
+//@ts-ignore
+import { ActivityIndicator,TouchableOpacity, Text,StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
+
+interface StyledListNoDataProps {
+    text?: string;
+    canRefresh?: boolean;
+    loading?: boolean;
+    onRefresh?(): any;
+    customStyle?: StyleProp<ViewStyle>;
+    customStyleText?: StyleProp<TextStyle>;
+}
+
+ 
+const StyledNoData: React.FunctionComponent<StyledListNoDataProps> = (props: StyledListNoDataProps) => {
+    return (
+        <View style={[styles.container, props.customStyle]}>
+            {props.loading ? (
+                <View style={{ alignItems: 'center' }}>
+                    <ActivityIndicator />
+                </View>
+            ) : (
+                <Text>Khong co data</Text>
+            )}
+            {!!props.canRefresh && !props.loading ? (
+                <TouchableOpacity onPress={props.onRefresh}>
+                    <Text>Reload</Text>
+                </TouchableOpacity>
+            ) : (
+                <View />
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 8,
+    },
+    text: {
+        fontWeight: '600',
+        fontSize: 14,
+        color: 'red',
+        textAlign: 'center',
+    },
+    textReload: {
+        margin: 12,
+        color: 'red',
+    },
+});
+
+export default StyledNoData;
--- a/src/components/Picker/PickerDate.js
+++ b/src/components/Picker/PickerDate.js
+import React, {Component} from 'react';
+import {StyleSheet, View, Image, Text} from 'react-native';
+import DatePicker from 'react-native-datepicker';
+import {
+  WIDTHXD,
+  HEIGHTXD,
+  getFontXD,
+  WIDTHXDICON,
+} from '../../Config/Functions';
+import R from '../../assets/R';
+import Icon from 'react-native-vector-icons/AntDesign';
+
+/**
+ * This Function to choice date
+ * @callback onValueChange value of date you choice
+ * @param value value of date you choice
+ * @param containerStyle custom containerStyle of view
+ * @param textStyle style value of date
+ * @param placeholder value of placeholder
+ * @param width width of datePicker
+ * @param date value of date you choice
+ * @param enableEdit status allow edit
+ * other you can make minDate,maxDate... with props of libary react-native-datepicker
+ */
+class PickerDate extends Component {
+  state = {
+    date: new Date(),
+  };
+
+  /**
+   * This Function to set date
+   * @param date value of date you choice
+   */
+  onChangeDate = (date) => {
+    this.setState({date});
+  };
+
+  render() {
+    const {
+      onValueChange,
+      value,
+      containerStyle,
+      textStyle,
+      placeholder,
+      width,
+      disabled,
+      title,
+    } = this.props;
+    return (
+      <View style={{marginVertical: 5}}>
+        <Text
+          style={{
+            fontSize: getFontXD(42),
+            color: R.colors.color777,
+            marginBottom: 5,
+          }}>
+          {title}
+        </Text>
+        <View
+          style={[
+            styles.inputBox,
+            containerStyle !== null && containerStyle,
+            width && {width},
+          ]}>
+          {disabled ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <Text
+                style={{
+                  ...styles.textDate,
+                  ...textStyle,
+                  paddingVertical: 0,
+                  marginRight: WIDTHXD(15),
+                }}>
+                {value !== null && value}
+              </Text>
+              <Text>Hello</Text>
+              <Icon name={'calendar'} size={22} color={'#929292'} />
+            </View>
+          ) : (
+            <DatePicker
+              confirmBtnText={'OK'}
+              cancelBtnText={'Cancel'}
+              locale="vi"
+              style={[
+                {paddingHorizontal: 0, borderWidth: 0, width: WIDTHXD(960)},
+                width && {width: width - WIDTHXD(30)},
+              ]}
+              date={value}
+              mode="date"
+              placeholder={placeholder !== null && placeholder}
+              format="DD/MM/YYYY" // you can change format of date in date picker
+              git
+              iconComponent={
+                <Icon name={'calendar'} size={22} color={'#929292'} />
+              } // to custom icon
+              customStyles={{
+                dateInput: {
+                  flex: 5,
+                  marginLeft: WIDTHXD(0),
+                  borderWidth: 0,
+                  color: R.colors.black0,
+                },
+                dateText: {
+                  ...styles.textDate,
+                },
+              }}
+              onDateChange={(date) => {
+                this.onChangeDate(date);
+                onValueChange && onValueChange(date); // return value of date, Fuction from parent
+              }}
+              {...this.props}
+            />
+          )}
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  inputBox: {
+    borderRadius: WIDTHXD(20),
+
+    height: HEIGHTXD(120),
+    borderWidth: 0.3,
+    borderColor: R.colors.borderGray,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // paddingVertical: HEIGHTXD(17),
+    backgroundColor: 'white',
+  },
+  textDate: {
+    fontSize: getFontXD(42),
+    color: R.colors.black0,
+    alignSelf: 'flex-start',
+    paddingLeft: WIDTHXD(16),
+    paddingVertical: HEIGHTXD(25),
+  },
+});
+
+export default React.memo(PickerDate);
--- a/src/components/Picker/PickerImg.js
+++ b/src/components/Picker/PickerImg.js
-import React from 'react';
-import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
 import R from '../../assets/R';
 import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
 import Icon from 'react-native-vector-icons/AntDesign';
+import Modal from 'react-native-modal';
+import Block from '../Block';
+import ImagePicker from 'react-native-image-crop-picker';
+const options = {
+  title: 'Select Avatar',
+  customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
+  storageOptions: {
+    skipBackup: true,
+    path: 'images',
+  },
+};

 const PickerImg = (props) => {
  const {title} = props;
+
+  const [imgPicker, setImgPicker] = useState();
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [urlImg, setUrlImg] = useState('');
+  // const [imgPicker, setImgPicker] = useState('');
+
+  const onchoosGalery = () => {
+    ImagePicker.openPicker({
+      mediaType: 'photo',
+      multiple: true,
+    }).then((images) => {
+      setModalVisible(false);
+      console.log(images);
+    });
+  };
+
+  const onCapture = () => {
+    ImagePicker.openCamera({
+      mediaType: 'photo',
+      width: 300,
+      height: 400,
+    }).then((image) => {
+      setModalVisible(false);
+      console.log(image);
+    });
+  };
+
  return (
-    <View style={{marginTop: 10, width: WIDTHXD(380)}}>
+    <TouchableOpacity
+      onPress={() => setModalVisible(true)}
+      style={{marginTop: 10, width: WIDTHXD(480)}}>
      <Text style={styles.txt}>{title}</Text>
      <View style={styles.container}>
        <Icon name={'plus'} size={40} color={'#DBDBDB'} />
      </View>
+
+      <Modal
+        isVisible={isModalVisible}
+        style={{margin: 0, justifyContent: 'flex-end'}}
+        onSwipeComplete={() => setModalVisible(false)}
+        swipeDirection={['up', 'left', 'right', 'down']}>
+        <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
+          <View style={{flex: 1}}></View>
+        </TouchableWithoutFeedback>
+
+        <View style={styles.containerSelect}>
+          <Text
+            style={{
+              textAlign: 'center',
+              fontSize: getFontXD(42),
+              fontWeight: 'bold',
+              color: '#1473E6',
+            }}>
+            Chọn nguồn lấy ảnh
+          </Text>
+
+          <View style={styles.line} />
+          <Block row space={'around'} center>
+            <TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
+              <Image style={styles.imgIcon} source={R.images.iconCamera} />
+
+              <Text style={styles.txtTitleBtn}>Chụp ảnh</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.selectionImg}
+              onPress={onchoosGalery}>
+              <Image style={styles.imgIcon} source={R.images.iconImg} />
+
+              <Text style={styles.txtTitleBtn}>Thư viện ảnh</Text>
+            </TouchableOpacity>
+          </Block>
        </View>
+      </Modal>
+    </TouchableOpacity>
  );
 };

@@ -33,6 +118,33 @@ const styles = StyleSheet.create({
    color: R.colors.color777,
    marginBottom: 5,
  },
+  selectionImg: {
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerSelect: {
+    height: HEIGHTXD(420),
+    backgroundColor: 'white',
+    paddingTop: 10,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  line: {
+    height: 1,
+    backgroundColor: '#929292',
+    width: '100%',
+    marginTop: 5,
+  },
+  imgIcon: {
+    width: 40,
+    height: 40,
+  },
+  txtTitleBtn: {
+    textAlign: 'center',
+    fontSize: getFontXD(42),
+    color: '#1473E6',
+  },
 });

-export default PickerImg;
+export default React.memo(PickerImg);
--- a/src/components/PickerItem2.js
+++ b/src/components/PickerItem2.js
-import React, { Component } from "react";
+import React, {Component} from 'react';
 import {
  StyleSheet,
  Text,
@@ -7,10 +7,17 @@ import {
  TouchableOpacity,
  TouchableHighlight,
  Dimensions,
-} from "react-native";
-import ModalDropdown from "react-native-modal-dropdown";
-import R from "../../assets/R";
-import {WIDTHXD, getFontXD, HEIGHTXD, getHeight, WIDTHXDICON} from "../../config/Function";
+} from 'react-native';
+import ModalDropdown from 'react-native-modal-dropdown';
+import R from '../../assets/R';
+import {
+  WIDTHXD,
+  getFontXD,
+  HEIGHTXD,
+  getHeight,
+  WIDTHXDICON,
+} from '../../Config/Functions';
+import Icon from 'react-native-vector-icons/AntDesign';

 const data = [];
 /**
@@ -29,13 +36,13 @@ const data = [];
 * @param iconDropdownStyle to style icon dropdown
 * other you can make minDate,maxDate... with props of libary react-native-datepicker
 */
-export default class PickerItem2 extends Component {
+export default class PickerItem extends Component {
  constructor(props) {
    super(props);
    this._button = null;
    this._buttonFrame = null;
    this.state = {
-      value: "",
+      value: '',
      showInBottom: true,
    };
  }
@@ -45,11 +52,11 @@ export default class PickerItem2 extends Component {
  }

  _dropdownAdjustFrame = (style) => {
-    const { showInBottom } = this.state;
+    const {showInBottom} = this.state;
    // alert(showInBottom);
    let stylez = style;
    if (!showInBottom) {
-      stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 6));
+      stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
    } else {
      stylez.height += HEIGHTXD(99);
    }
@@ -58,12 +65,12 @@ export default class PickerItem2 extends Component {
  };

  _calcPosition() {
-    const { data } = this.props;
+    const {data} = this.props;
    let dropdownStyle = {
      // maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
-      maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12),
+      maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12),
    };
-    const dimensions = Dimensions.get("window");
+    const dimensions = Dimensions.get('window');
    const windowHeight = dimensions.height;

    const dropdownHeight = dropdownStyle.maxHeight;
@@ -72,13 +79,13 @@ export default class PickerItem2 extends Component {
      windowHeight - this._buttonFrame.y - this._buttonFrame.h;
    const showInBottom =
      bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
-    this.setState({ showInBottom });
+    this.setState({showInBottom});
  }

  _updatePosition() {
    if (this._button && this._button.measure) {
      this._button.measure((fx, fy, width, height, px, py) => {
-        this._buttonFrame = { x: px, y: py, w: width, h: height };
+        this._buttonFrame = {x: px, y: py, w: width, h: height};
        this._calcPosition();
      });
    }
@@ -114,100 +121,68 @@ export default class PickerItem2 extends Component {
          style={[
            styles.pickerStyle,
            containerStyle !== null && containerStyle,
-            height && { height },
-            width && { width },
-          ]}
-        >
+            height && {height},
+            width && {width},
+          ]}>
          <Text
            numberOfLines={1}
            style={[
              styles.dropdown_row_text,
-              width && { width: width - WIDTHXD(125) },
+              width && {width: width - WIDTHXD(125)},
              textStyle ? textStyle : {},
-            ]}
-          >
+            ]}>
            {defaultValue || this.state.value}
          </Text>
-          <Image
-            resizeMode="contain"
-            source={
-              iconDropdown || isTriangle
-                ? R.images.iconDropdown
-                : R.images.iconDown
-            }
-            style={
-              iconDropdownStyle || { width: WIDTHXDICON(35), height: WIDTHXDICON(18) }
-            }
-          />
+          {iconDropdown || isTriangle ? (
+            <Icon name={'up'} size={20} color={R.colors.borderGray} />
+          ) : (
+            <Icon name={'down'} size={20} color={R.colors.borderGray} />
+          )}
        </TouchableOpacity>
        <ModalDropdown
          showsVerticalScrollIndicator={false}
          ref={(el) => {
            this._dropdown = el;
          }}
-          style={[styles.dropdown, width && { width }]}
-          defaultValue={defaultValue || "0"}
+          style={[styles.dropdown, width && {width}]}
+          defaultValue={defaultValue || '0'}
          defaultIndex={defaultIndex || 0}
          textStyle={styles.dropdown_text}
          dropdownStyle={[
            styles.dropdown_dropdown,
-            { height: HEIGHTXD(420) },
-            width && { width },
+            {maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)},
+            width && {width},
          ]}
          options={data !== null && data}
          onSelect={(value) => {
            onValueChange && onValueChange(value, data[value]);
-            this.setState({ value: data[value].name });
+            this.setState({value: data[value].name});
          }}
-          renderSeparator={() => (
-            <View
-              style={{ width: "100%", height: 0.5, backgroundColor: "#E2E8F2" }}
-            />
-          )}
-          renderButtonText={(rowData) => this.renderButtonText(rowData)}
-          renderRow={this.renderRow}
-          adjustFrame={(style) => this._dropdownAdjustFrame(style)}
-          // renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
-        />
-      </View>
-    );
-  }
-
-  renderButtonText = () => " ";
-
-  renderRow = (rowData, rowID, highlighted) => {
-    const { width, heightItem, data } = this.props;
-    let evenRow = rowID === (data && data.length - 1);
-    return (
-      <TouchableHighlight underlayColor="cornflowerblue">
+          renderRow={(option, index, isSelected) => (
            <View
              style={[
                styles.dropdown_row,
-            heightItem && { height: heightItem },
-            this.props.defaultValue === rowData.name && {
-              backgroundColor: "#e3e8f2",
-            },
-            evenRow && {
-              borderBottomLeftRadius: WIDTHXD(20),
-              borderBottomRightRadius: WIDTHXD(20),
-              overflow: "hidden",
-            },
-            width && { width },
-          ]}
-        >
+                {backgroundColor: isSelected ? '#ffffff' : '#f2f2f2'},
+              ]}>
              <Text
                numberOfLines={1}
                style={[
                  styles.dropdown_row_text,
-              { marginHorizontal: WIDTHXD(30) },
-            ]}
-          >
-            {`${rowData.name}`}
+                  {marginHorizontal: WIDTHXD(30)},
+                ]}>
+                {`${option.name}`}
              </Text>
            </View>
-      </TouchableHighlight>
+          )}
+          renderButtonText={(rowData) => this.renderButtonText(rowData)}
+          adjustFrame={(style) => this._dropdownAdjustFrame(style)}
+          // renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
+        />
+      </View>
    );
-  };
+  }
+
+  renderButtonText = () => ' ';

  renderSeparator = (rowID) => {
    if (rowID === data.length - 1) return [];
@@ -221,48 +196,37 @@ const styles = StyleSheet.create({
    flex: 0,
  },
  dropdown: {
-    alignSelf: "center",
+    alignSelf: 'center',
    width: WIDTHXD(960),
    height: HEIGHTXD(0),
-    borderBottomLeftRadius: WIDTHXD(20),
-    borderBottomRightRadius: WIDTHXD(20),
-    overflow: "hidden",
  },
  dropdown_text: {
-    fontFamily: R.fonts.RobotoRegular,
    fontSize: getFontXD(42),
  },
  dropdown_dropdown: {
-    flex: 1,
    width: WIDTHXD(960),
-    height: HEIGHTXD(300),
-    // marginTop: -HEIGHTXD(99),
-    borderWidth: 0,
-    // borderColor: R.colors.iconGray,
-    // borderRadius: 3,
+    maxHeight: HEIGHTXD(200),
    borderBottomLeftRadius: WIDTHXD(20),
    borderBottomRightRadius: WIDTHXD(20),
-    // paddingBottom: HEIGHTXD(10),
-    shadowColor: "#000",
+    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
-    overflow: "hidden",
    elevation: 2,
  },
  dropdown_row: {
-    flexDirection: "row",
+    flexDirection: 'row',
    height: HEIGHTXD(100),
-    alignItems: "center",
+    alignItems: 'center',
+    paddingHorizontal: 5,
  },
  dropdown_row_text: {
    // marginHorizontal: 4,
-    fontFamily: R.fonts.RobotoRegular,
    fontSize: getFontXD(42),
-    textAlignVertical: "center",
+    textAlignVertical: 'center',
  },
  dropdown_separator: {
    borderBottomWidth: 0.3,
@@ -271,14 +235,15 @@ const styles = StyleSheet.create({
  pickerStyle: {
    width: WIDTHXD(960),
    height: HEIGHTXD(99),
-    flexDirection: "row",
+    flexDirection: 'row',
    paddingHorizontal: WIDTHXD(30),
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "center",
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'center',
    borderWidth: 0.3,
    borderColor: R.colors.iconGray,
    borderRadius: WIDTHXD(20),
+    backgroundColor: 'white',
    // marginTop: HEIGHTXD(10)
  },
 });
--- a/src/components/TextField.js
+++ b/src/components/TextField.js
@@ -40,4 +40,4 @@ const TextField = (props) => {
  );
 };

-export default TextField;
+export default React.memo(TextField);
--- a/src/components/TextMulti.js
+++ b/src/components/TextMulti.js
@@ -43,4 +43,4 @@ const TextField = (props) => {
  );
 };

-export default TextField;
+export default React.memo(TextField);
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,22 +16,22 @@
  dependencies:
    "@babel/highlight" "^7.12.13"

-"@babel/compat-data@^7.11.0", "@babel/compat-data@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.0.tgz#7889eb7ee6518e2afa5d312b15fd7fd1fe9f3744"
-  integrity sha512-mKgFbYQ+23pjwNGBNPNWrBfa3g/EcmrPnwQpjWoNxq9xYf+M8wcLhMlz/wkWimLjzNzGnl3D+C2186gMzk0VuA==
+"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.8":
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.8.tgz#5b783b9808f15cef71547f1b691f34f8ff6003a6"
+  integrity sha512-EaI33z19T4qN3xLXsGf48M2cDqa6ei9tPZlfLdb2HC+e/cFtREiRd8hdSqDbwdLB0/+gLwqJmCYASH0z2bUdog==

 "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.13.1", "@babel/core@^7.7.5":
-  version "7.13.1"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.1.tgz#7ddd027176debe40f13bb88bac0c21218c5b1ecf"
-  integrity sha512-FzeKfFBG2rmFtGiiMdXZPFt/5R5DXubVi82uYhjGX4Msf+pgYQMCFIqFXZWs5vbIYbf14VeBIgdGI03CDOOM1w==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.8.tgz#c191d9c5871788a591d69ea1dc03e5843a3680fb"
+  integrity sha512-oYapIySGw1zGhEFRd6lzWNLWFX2s5dA/jm+Pw/+59ZdXtjyIuwlXbrId22Md0rgZVop+aVoqow2riXhBLNyuQg==
  dependencies:
    "@babel/code-frame" "^7.12.13"
    "@babel/generator" "^7.13.0"
-    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-compilation-targets" "^7.13.8"
    "@babel/helper-module-transforms" "^7.13.0"
    "@babel/helpers" "^7.13.0"
-    "@babel/parser" "^7.13.0"
+    "@babel/parser" "^7.13.4"
    "@babel/template" "^7.12.13"
    "@babel/traverse" "^7.13.0"
    "@babel/types" "^7.13.0"
@@ -40,7 +40,7 @@
    gensync "^1.0.0-beta.2"
    json5 "^2.1.2"
    lodash "^4.17.19"
-    semver "7.0.0"
+    semver "^6.3.0"
    source-map "^0.5.0"

 "@babel/generator@^7.13.0", "@babel/generator@^7.5.0":
@@ -67,20 +67,20 @@
    "@babel/helper-explode-assignable-expression" "^7.12.13"
    "@babel/types" "^7.12.13"

-"@babel/helper-compilation-targets@^7.10.4", "@babel/helper-compilation-targets@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.0.tgz#c9cf29b82a76fd637f0faa35544c4ace60a155a1"
-  integrity sha512-SOWD0JK9+MMIhTQiUVd4ng8f3NXhPVQvTv7D3UN4wbp/6cAHnB2EmMaU1zZA2Hh1gwme+THBrVSqTFxHczTh0Q==
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.8":
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.8.tgz#02bdb22783439afb11b2f009814bdd88384bd468"
+  integrity sha512-pBljUGC1y3xKLn1nrx2eAhurLMA8OqBtBP/JwG4U8skN7kf8/aqwwxpV1N6T0e7r6+7uNitIa/fUxPFagSXp3A==
  dependencies:
-    "@babel/compat-data" "^7.13.0"
+    "@babel/compat-data" "^7.13.8"
    "@babel/helper-validator-option" "^7.12.17"
    browserslist "^4.14.5"
-    semver "7.0.0"
+    semver "^6.3.0"

 "@babel/helper-create-class-features-plugin@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.0.tgz#28d04ad9cfbd1ed1d8b988c9ea7b945263365846"
-  integrity sha512-twwzhthM4/+6o9766AW2ZBHpIHPSGrPGk1+WfHiu13u/lBnggXGNYCpeAyVfNwGDKfkhEDp+WOD/xafoJ2iLjA==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.8.tgz#0367bd0a7505156ce018ca464f7ac91ba58c1a04"
+  integrity sha512-qioaRrKHQbn4hkRKDHbnuQ6kAxmmOF+kzKGnIfxPK4j2rckSJCpKzr/SSTlohSCiE3uAQpNDJ9FIh4baeE8W+w==
  dependencies:
    "@babel/helper-function-name" "^7.12.13"
    "@babel/helper-member-expression-to-functions" "^7.13.0"
@@ -96,15 +96,15 @@
    "@babel/helper-annotate-as-pure" "^7.12.13"
    regexpu-core "^4.7.1"

-"@babel/helper-define-polyfill-provider@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.0.tgz#a9e8a161bb594a6a26ba93f68efd475c935a1727"
-  integrity sha512-/nX4CQRve5OZsc0FsvkuefeIQFG7GQo2X5GbD/seME7Tu4s2gHuQfXTIKup++/W9K1SWi2dTe7H9zhgJxhn/pA==
+"@babel/helper-define-polyfill-provider@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.4.tgz#b618b087c6a0328127e5d53576df818bcee2b15f"
+  integrity sha512-K5V2GaQZ1gpB+FTXM4AFVG2p1zzhm67n9wrQCJYNzvuLzQybhJyftW7qeDd2uUxPDNdl5Rkon1rOAeUeNDZ28Q==
  dependencies:
-    "@babel/helper-compilation-targets" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/traverse" "^7.11.5"
+    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/traverse" "^7.13.0"
    debug "^4.1.1"
    lodash.debounce "^4.0.8"
    resolve "^1.14.2"
@@ -140,7 +140,7 @@
  dependencies:
    "@babel/types" "^7.13.0"

-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13":
+"@babel/helper-module-imports@^7.12.13":
  version "7.12.13"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
  integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
@@ -244,18 +244,18 @@
    "@babel/types" "^7.13.0"

 "@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.12.13.tgz#8ab538393e00370b26271b01fa08f7f27f2e795c"
-  integrity sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.8.tgz#10b2dac78526424dfc1f47650d0e415dfd9dc481"
+  integrity sha512-4vrIhfJyfNf+lCtXC2ck1rKSzDwciqF7IWFhXXrSOUC2O5DrVp+w4c6ed4AllTxhTkUP5x2tYj41VaxdVMMRDw==
  dependencies:
    "@babel/helper-validator-identifier" "^7.12.11"
    chalk "^2.0.0"
    js-tokens "^4.0.0"

-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.7.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.0.tgz#49b9b6ee213e5634fa80361dae139effef893f78"
-  integrity sha512-w80kxEMFhE3wjMOQkfdTvv0CSdRSJZptIlLhU4eU/coNJeWjduspUFz+IRnBbAq6m5XYBFMoT1TNkk9K9yf10g==
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.13.4", "@babel/parser@^7.7.0":
+  version "7.13.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.4.tgz#340211b0da94a351a6f10e63671fa727333d13ab"
+  integrity sha512-uvoOulWHhI+0+1f9L4BoozY7U5cIkZ9PgJqvb041d6vypgUmtVPG4vmGm4pSggjl8BELzvHyUeJSUyEMY6b+qA==

 "@babel/plugin-external-helpers@^7.0.0":
  version "7.12.13"
@@ -281,38 +281,40 @@
    "@babel/plugin-syntax-export-default-from" "^7.12.13"

 "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.0.tgz#1a96fdf2c43109cfe5568513c5379015a23f5380"
-  integrity sha512-UkAvFA/9+lBBL015gjA68NvKiCReNxqFLm3SdNKaM3XXoDisA7tMAIX4PmIwatFoFqMxxT3WyG9sK3MO0Kting==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz#3730a31dafd3c10d8ccd10648ed80a2ac5472ef3"
+  integrity sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==
  dependencies:
    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"

 "@babel/plugin-proposal-object-rest-spread@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.0.tgz#8f19ad247bb96bd5ad2d4107e6eddfe0a789937b"
-  integrity sha512-B4qphdSTp0nLsWcuei07JPKeZej4+Hd22MdnulJXQa1nCcGSBlk8FiqenGERaPZ+PuYhz4Li2Wjc8yfJvHgUMw==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.8.tgz#5d210a4d727d6ce3b18f9de82cc99a3964eed60a"
+  integrity sha512-DhB2EuB1Ih7S3/IRX5AFVgZ16k3EzfRbq97CxAVI1KSYcW+lexV8VZb7G7L8zuPVSdQMRn0kiBpf/Yzu9ZKH0g==
  dependencies:
+    "@babel/compat-data" "^7.13.8"
+    "@babel/helper-compilation-targets" "^7.13.8"
    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
    "@babel/plugin-transform-parameters" "^7.13.0"

 "@babel/plugin-proposal-optional-catch-binding@^7.0.0":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.13.tgz#4640520afe57728af14b4d1574ba844f263bcae5"
-  integrity sha512-9+MIm6msl9sHWg58NvqpNpLtuFbmpFYk37x8kgnGzAHvX35E1FyAwSUt5hIkSoWJFSAH+iwU8bJ4fcD1zKXOzg==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz#3ad6bd5901506ea996fc31bdcf3ccfa2bed71107"
+  integrity sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==
  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"

 "@babel/plugin-proposal-optional-chaining@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.0.tgz#75b41ce0d883d19e8fe635fc3f846be3b1664f4d"
-  integrity sha512-OVRQOZEBP2luZrvEbNSX5FfWDousthhdEoAOpej+Tpe58HFLvqRClT89RauIvBuCDFEip7GW1eT86/5lMy2RNA==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.8.tgz#e39df93efe7e7e621841babc197982e140e90756"
+  integrity sha512-hpbBwbTgd7Cz1QryvwJZRo1U0k1q8uyBmeXOSQUjdg/A2TASkhR/rz7AyqZ/kS8kbpsNA80rOYbxySBJAqmhhQ==
  dependencies:
    "@babel/helper-plugin-utils" "^7.13.0"
    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"

 "@babel/plugin-syntax-async-generators@^7.8.4":
  version "7.8.4"
@@ -384,7 +386,7 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.10.4"

-"@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
@@ -398,21 +400,21 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.10.4"

-"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.8.0"

-"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
  dependencies:
    "@babel/helper-plugin-utils" "^7.8.0"

-"@babel/plugin-syntax-optional-chaining@^7.0.0", "@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+"@babel/plugin-syntax-optional-chaining@^7.0.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
@@ -536,9 +538,9 @@
    "@babel/helper-plugin-utils" "^7.12.13"

 "@babel/plugin-transform-modules-commonjs@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.0.tgz#276932693a20d12c9776093fdc99c0d9995e34c6"
-  integrity sha512-j7397PkIB4lcn25U2dClK6VLC6pr2s3q+wbE8R3vJvY6U1UTBBj0n6F+5v6+Fd/UwfDPAorMOs2TV+T4M+owpQ==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz#7b01ad7c2dcf2275b06fa1781e00d13d420b3e1b"
+  integrity sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==
  dependencies:
    "@babel/helper-module-transforms" "^7.13.0"
    "@babel/helper-plugin-utils" "^7.13.0"
@@ -614,16 +616,16 @@
    regenerator-transform "^0.14.2"

 "@babel/plugin-transform-runtime@^7.0.0":
-  version "7.13.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.1.tgz#2bf6e25a51c8ab35024dedfee5a55c781a3cf600"
-  integrity sha512-yqvLE/RRlL/3nUlm3ieau2zeaSeDZflLg9D+qsQ7TSZx7xy2TdN6pTmvkflpaaK5LQLajoFLh4EImsCd6V1uLw==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.8.tgz#8c9a16db6cb6c2a1f748e36ae23558b92d223010"
+  integrity sha512-6UbZ7P0FuuJiiUyRCfDgLw4PIG9bR2x6swHocv4qNZItkhXad0WsN6YX0deILuyZY2++meDKiDMuSVcejDZN0Q==
  dependencies:
    "@babel/helper-module-imports" "^7.12.13"
    "@babel/helper-plugin-utils" "^7.13.0"
-    babel-plugin-polyfill-corejs2 "^0.1.2"
-    babel-plugin-polyfill-corejs3 "^0.1.2"
-    babel-plugin-polyfill-regenerator "^0.1.1"
-    semver "7.0.0"
+    babel-plugin-polyfill-corejs2 "^0.1.4"
+    babel-plugin-polyfill-corejs3 "^0.1.3"
+    babel-plugin-polyfill-regenerator "^0.1.2"
+    semver "^6.3.0"

 "@babel/plugin-transform-shorthand-properties@^7.0.0":
  version "7.12.13"
@@ -672,9 +674,9 @@
    "@babel/helper-plugin-utils" "^7.12.13"

 "@babel/register@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.13.0.tgz#865eb78a3ed94c6ad72d0e550180b3d6566dfb8d"
-  integrity sha512-nswFANDBcO661RvGOHfVKVRBZIe9wJuFFIJYJWpO8LwYn8WI+h/2JZhceLvlxjxEvMH6/oGkEBgz5SnqUUMkCg==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.13.8.tgz#d9051dc6820cb4e86375cc0e2d55a4862b31184f"
+  integrity sha512-yCVtABcmvQjRsX2elcZFUV5Q5kDDpHdtXKKku22hNDma60lYuhKmtp1ykZ/okRCPLT2bR5S+cA1kvtBdAFlDTQ==
  dependencies:
    find-cache-dir "^2.0.0"
    lodash "^4.17.19"
@@ -683,9 +685,9 @@
    source-map-support "^0.5.16"

 "@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.1", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4":
-  version "7.13.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.1.tgz#808f9adeff8defffbf763b56de4f235d02307a9f"
-  integrity sha512-VtWX6tACQ/pVAkvDPerMfkkInu1+oea+Y3bmcsXO4g+RkpScDdNKla8NtfwrqdHkBGfmTMEZpVIE2I6umuDPaQ==
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.8.tgz#cc886a85c072df1de23670dc1aa59fc116c4017c"
+  integrity sha512-CwQljpw6qSayc0fRG1soxHAKs1CnQMOChm4mlQP6My0kf9upVGizj/KhlTTgyUnETmHpcUXjaluNAkteRFuafg==
  dependencies:
    regenerator-runtime "^0.13.4"

@@ -698,7 +700,7 @@
    "@babel/parser" "^7.12.13"
    "@babel/types" "^7.12.13"

-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.11.5", "@babel/traverse@^7.13.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
  version "7.13.0"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.0.tgz#6d95752475f86ee7ded06536de309a65fc8966cc"
  integrity sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==
@@ -742,10 +744,10 @@
  dependencies:
    "@types/hammerjs" "^2.0.36"

-"@eslint/eslintrc@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
-  integrity sha512-1JTKgrOKAHVivSvOYw+sJOunkBjUOvjqWk1DPja7ZFhIS2mX/4EgTT8M7eTK9jrKhL/FvXXEbQwIs3pg1xp3dg==
+"@eslint/eslintrc@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
+  integrity sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==
  dependencies:
    ajv "^6.12.4"
    debug "^4.1.1"
@@ -754,7 +756,6 @@
    ignore "^4.0.6"
    import-fresh "^3.2.1"
    js-yaml "^3.13.1"
-    lodash "^4.17.20"
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

@@ -1860,29 +1861,29 @@ babel-plugin-jest-hoist@^26.6.2:
    "@types/babel__core" "^7.0.0"
    "@types/babel__traverse" "^7.0.6"

-babel-plugin-polyfill-corejs2@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.2.tgz#3e5e7ef339dd84ca34c6a20605e6d4ef62aba3b1"
-  integrity sha512-sSGAKN95gTnXjg3RtGI9QBW/xSqXy5fo2Bt+W5WkhconIO+QxuDZChyjZYiY90xE3MQRI1k73Dh/HAe86cWf8A==
+babel-plugin-polyfill-corejs2@^0.1.4:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.8.tgz#54ef37b1c4b2311e515029e8f1f07bbd4d7a5321"
+  integrity sha512-kB5/xNR9GYDuRmVlL9EGfdKBSUVI/9xAU7PCahA/1hbC2Jbmks9dlBBYjHF9IHMNY2jV/G2lIG7z0tJIW27Rog==
  dependencies:
-    "@babel/compat-data" "^7.11.0"
-    "@babel/helper-define-polyfill-provider" "^0.1.0"
+    "@babel/compat-data" "^7.13.0"
+    "@babel/helper-define-polyfill-provider" "^0.1.4"
    semver "^6.1.1"

-babel-plugin-polyfill-corejs3@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.2.tgz#39b0d46744360738237bd54052af852c84d74ebf"
-  integrity sha512-7neRvPKcdvZ4X9IpYBCmT+ceVUKC1idX7DJN5sRtiPP9d0ABD6k5x/QvXTiz/9wMp86FBDX6Gz0g7WQY2lRfgw==
+babel-plugin-polyfill-corejs3@^0.1.3:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.6.tgz#ed1b02fba4885e0892e06094e27865f499758d27"
+  integrity sha512-IkYhCxPrjrUWigEmkMDXYzM5iblzKCdCD8cZrSAkQOyhhJm26DcG+Mxbx13QT//Olkpkg/AlRdT2L+Ww4Ciphw==
  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.1.0"
+    "@babel/helper-define-polyfill-provider" "^0.1.4"
    core-js-compat "^3.8.1"

-babel-plugin-polyfill-regenerator@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.1.tgz#3b9b907d1554747ff131bd5c6da81713e342db73"
-  integrity sha512-QZlnPDLX2JEXP8RQGeP4owNxRKUAqHD+rdlyRHV8ENeCcI9ni2qT9IzxT9jYW1aZrxCgehD31LztlMaA68zoqQ==
+babel-plugin-polyfill-regenerator@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.5.tgz#f42a58fd86a1c97fbe3a2752d80a4a3e017203e1"
+  integrity sha512-EyhBA6uN94W97lR7ecQVTvH9F5tIIdEw3ZqHuU4zekMlW82k5cXNXniiB7PRxQm06BqAjVr4sDT1mOy4RcphIA==
  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.1.0"
+    "@babel/helper-define-polyfill-provider" "^0.1.4"

 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
  version "7.0.0-beta.0"
@@ -2131,9 +2132,9 @@ camelcase@^6.0.0:
  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==

 caniuse-lite@^1.0.30001181:
-  version "1.0.30001191"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz#bacb432b6701f690c8c5f7c680166b9a9f0843d9"
-  integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw==
+  version "1.0.30001192"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001192.tgz#b848ebc0ab230cf313d194a4775a30155d50ae40"
+  integrity sha512-63OrUnwJj5T1rUmoyqYTdRWBqFFxZFlyZnRRjDR8NSUQFB6A+j/uBORU/SyJ5WzDLg4SPiZH40hQCBNdZ/jmAw==

 capture-exit@^2.0.0:
  version "2.0.0"
@@ -2315,9 +2316,9 @@ color@^3.1.3:
    color-string "^1.5.4"

 colorette@^1.0.7, colorette@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
-  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==

 combined-stream@^1.0.6, combined-stream@~1.0.6:
  version "1.0.8"
@@ -2409,9 +2410,9 @@ copy-descriptor@^0.1.0:
  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

 core-js-compat@^3.8.1:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.0.tgz#29da39385f16b71e1915565aa0385c4e0963ad56"
-  integrity sha512-YK6fwFjCOKWwGnjFUR3c544YsnA/7DoLL0ysncuOJ4pwbriAtOpvM2bygdlcXbvQCQZ7bBU9CL4t7tGl7ETRpQ==
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
+  integrity sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA==
  dependencies:
    browserslist "^4.16.3"
    semver "7.0.0"
@@ -2670,9 +2671,9 @@ ee-first@1.1.1:
  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=

 electron-to-chromium@^1.3.649:
-  version "1.3.672"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.672.tgz#3a6e335016dab4bc584d5292adc4f98f54541f6a"
-  integrity sha512-gFQe7HBb0lbOMqK2GAS5/1F+B0IMdYiAgB9OT/w1F4M7lgJK2aNOMNOM622aEax+nS1cTMytkiT0uMOkbtFmHw==
+  version "1.3.675"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.675.tgz#7ad29f98d7b48da581554eb28bb9a71fd5fd4956"
+  integrity sha512-GEQw+6dNWjueXGkGfjgm7dAMtXfEqrfDG3uWcZdeaD4cZ3dKYdPRQVruVXQRXtPLtOr5GNVVlNLRMChOZ611pQ==

 emittery@^0.7.1:
  version "0.7.2"
@@ -2910,12 +2911,12 @@ eslint-visitor-keys@^2.0.0:
  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==

 eslint@^7.20.0:
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.20.0.tgz#db07c4ca4eda2e2316e7aa57ac7fc91ec550bdc7"
-  integrity sha512-qGi0CTcOGP2OtCQBgWZlQjcTuP0XkIpYFj25XtRTQSHC+umNnp7UMshr2G8SLsRFYDdAPFeHOsiteadmMH02Yw==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.21.0.tgz#4ecd5b8c5b44f5dedc9b8a110b01bbfeb15d1c83"
+  integrity sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==
  dependencies:
    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.3.0"
+    "@eslint/eslintrc" "^0.4.0"
    ajv "^6.10.0"
    chalk "^4.0.0"
    cross-spawn "^7.0.2"
@@ -2928,7 +2929,7 @@ eslint@^7.20.0:
    espree "^7.3.1"
    esquery "^1.4.0"
    esutils "^2.0.2"
-    file-entry-cache "^6.0.0"
+    file-entry-cache "^6.0.1"
    functional-red-black-tree "^1.0.1"
    glob-parent "^5.0.0"
    globals "^12.1.0"
@@ -3225,7 +3226,7 @@ figures@^2.0.0:
  dependencies:
    escape-string-regexp "^1.0.5"

-file-entry-cache@^6.0.0:
+file-entry-cache@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
@@ -3310,9 +3311,9 @@ flatted@^3.1.0:
  integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==

 follow-redirects@^1.10.0:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
-  integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==

 for-in@^1.0.2:
  version "1.0.2"
@@ -3518,9 +3519,9 @@ has-flag@^4.0.0:
  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==

 has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==

 has-value@^0.3.1:
  version "0.3.1"
@@ -5351,7 +5352,7 @@ mkdirp@^0.5.1:
  dependencies:
    minimist "^1.2.5"

-moment@^2.29.1:
+moment@^2.22.0, moment@^2.29.1:
  version "2.29.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -5459,14 +5460,14 @@ node-notifier@^8.0.0:
    which "^2.0.2"

 node-releases@^1.1.70:
-  version "1.1.70"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
-  integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
+  version "1.1.71"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
+  integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==

 node-stream-zip@^1.9.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.1.tgz#2f8f9a360ec7ae23a80744c4c3862bf3aa3e7892"
-  integrity sha512-7vFtf27xgafGV1e440J+FrQSf+5kvkMM9lX/dHRcyAP1dT9+JqM/5L0PDlbeWsdpQjsPWJk7YZHqkHUWf+4Izg==
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.2.tgz#2fce9d001fa7fda943a906eff239eb83fda124ba"
+  integrity sha512-159NUO3quDIRVSVOQiQ/0VG8NFrGvVyUa+MUUleiOys3NLtrGtNkodqYYTRHU/kiXu/ygHZcNy/tZ4NUCcDUmQ==

 normalize-package-data@^2.5.0:
  version "2.5.0"
@@ -5598,13 +5599,13 @@ object.pick@^1.3.0:
    isobject "^3.0.1"

 object.values@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.2.tgz#7a2015e06fcb0f546bd652486ce8583a4731c731"
-  integrity sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
+  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
  dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.18.0-next.2"
    has "^1.0.3"

 on-finished@~2.3.0:
@@ -5942,7 +5943,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5980,9 +5981,9 @@ qs@~6.5.2:
  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

 query-string@^6.13.6:
-  version "6.14.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.0.tgz#0b7b7ca326f5facf10dd2d45d26645cd287f8c92"
-  integrity sha512-In3o+lUxlgejoVJgwEdYtdxrmlL0cQWJXj0+kkI7RWVo7hg5AhFtybeKlC9Dpgbr8eOC4ydpEh8017WwyfzqVQ==
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
+  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
  dependencies:
    decode-uri-component "^0.2.0"
    filter-obj "^1.1.0"
@@ -6019,10 +6020,17 @@ react-native-animatable@1.3.3:
  dependencies:
    prop-types "^15.7.2"

+react-native-datepicker@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz#58d0822591a0ac9b32aba082650222a0ee29669d"
+  integrity sha1-WNCCJZGgrJsyq6CCZQIioO4pZp0=
+  dependencies:
+    moment "^2.22.0"
+
 react-native-gesture-handler@^1.9.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.2.tgz#3e42329797e8d22bdb2a4d7bf84a41da7e19498b"
-  integrity sha512-j9ifSk2KX/3Lg7Yiku9URJEAJH0NZLjhE52eGHG0QZQ/oKnfcQrJY1DjHefrcNwNAjvoQp+IWkBdyoGlcT2GqA==
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0"
+  integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==
  dependencies:
    "@egjs/hammerjs" "^2.0.17"
    fbjs "^3.0.0"
@@ -6030,6 +6038,16 @@ react-native-gesture-handler@^1.9.0:
    invariant "^2.2.4"
    prop-types "^15.7.2"

+react-native-image-crop-picker@^0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.0.tgz#adf5a5677c3ae0e0bdaa18c73d880db2190e3023"
+  integrity sha512-1S8+0EZJmUMWMcdo2tTadqIIsJo7aPxPed0P7Cop3DhBqEeYrAWfgdrJq9VoTXI+cIrOOcTAxn4NZPz+DQEn7g==
+
+react-native-image-picker@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-3.2.1.tgz#97119ffef0ac2de2862f61ac38c2f5af99e9de18"
+  integrity sha512-nOBZzYGmE5qZ8JBCvhWHQA+umYnQ8Jd3HGmgxBnmi0/82mU2nwCCnrzHsb29Q+DD7YasYr64rm8uWBBow8L5Fw==
+
 react-native-indicators@^0.17.0:
  version "0.17.0"
  resolved "https://registry.yarnpkg.com/react-native-indicators/-/react-native-indicators-0.17.0.tgz#92f95efaf5fb53be576dfe4e1980a25655a93f55"
@@ -6047,6 +6065,20 @@ react-native-linear-gradient@^2.5.6:
  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
  integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==

+react-native-modal-datetime-picker@^8.7.1:
+  version "8.9.3"
+  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-8.9.3.tgz#4ab01386c525bf8df9e8e71a93cdd61aa0916212"
+  integrity sha512-bLqwvSRYZb3LD5AUWhGd2iJxeUoOMkTg81Z8TbNQP4SFsHpoqEi6LoUJ+DJvaxwTvpN8/LgqJ5bNRGJl4VwATQ==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-native-modal-dropdown@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-modal-dropdown/-/react-native-modal-dropdown-1.0.0.tgz#3985950c025c6d83c8c15968ab33e4e49e5bf634"
+  integrity sha512-+ghOIKgdRk4p3VLY2EcpKGE3IxCLcdjXkPJu6dNm4hRvre8et4T5fNiqhezYCg5aZUlTYn31Ba0dG9OOFAJHmg==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-native-modal@^11.7.0:
  version "11.7.0"
  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.7.0.tgz#6637d757eeac6eda85f7017a9dfdee0c0fe3a34c"
@@ -6068,9 +6100,9 @@ react-native-safe-area-context@^3.1.9:
  integrity sha512-wmcGbdyE/vBSL5IjDPReoJUEqxkZsywZw5gPwsVUV1NBpw5eTIdnL6Y0uNKHE25Z661moxPHQz6kwAkYQyorxA==

 react-native-screens@^2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.17.1.tgz#c3c0ac750af48741c5b1635511e6af2a27b74309"
-  integrity sha512-B4gD5e4csvlVwlhf+RNqjQZ9mHTwe/iL3rXondgZxnKz4oW0QAmtLnLRKOrYVxoaJaF9Fy7jhjo//24/472APQ==
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.18.0.tgz#8652f8e77fdfd38ffb355eab32a22644e956745c"
+  integrity sha512-8+lCEsxzSu55GWRw6yZpyt3OszxN1OngfBsFXdqspaEfq6uIChanzlcD2PLVQl+iN82GAcrZM800Kd1pA477ZQ==

 react-native-tab-view@^2.15.2:
  version "2.15.2"
@@ -6078,9 +6110,9 @@ react-native-tab-view@^2.15.2:
  integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==

 react-native-vector-icons@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.0.0.tgz#deb8b344ff68ea67f4659c8de493fef8a9e717d2"
-  integrity sha512-u3NWvO+b7nTCxx7IU4EzukFyiApHdpjbsjKgMFEI2Ma+r1Mq48s0ajvBCIPI7LCgKBGYclOxWmMV9DHV2cJFlw==
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz#e8ee2b17bc4d9f636da1c6f67feee8e2a850c3d8"
+  integrity sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==
  dependencies:
    lodash.frompairs "^4.0.1"
    lodash.isequal "^4.5.0"
@@ -6892,9 +6924,9 @@ string-width@^3.0.0, string-width@^3.1.0:
    strip-ansi "^5.1.0"

 string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
  dependencies:
    emoji-regex "^8.0.0"
    is-fullwidth-code-point "^3.0.0"
@@ -6914,19 +6946,19 @@ string.prototype.matchall@^4.0.2:
    side-channel "^1.0.4"

 string.prototype.trimend@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
-  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
  dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
    define-properties "^1.1.3"

 string.prototype.trimstart@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
-  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
  dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
    define-properties "^1.1.3"

 string_decoder@~1.1.1:
@@ -7461,9 +7493,9 @@ whatwg-encoding@^1.0.5:
    iconv-lite "0.4.24"

 whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.1.tgz#93bc4005af6c2cc30ba3e42ec3125947c8f54ed3"
-  integrity sha512-IEmN/ZfmMw6G1hgZpVd0LuZXOQDisrMOZrzYd5x3RAK4bMPlJohKUZWZ9t/QsTvH0dV9TbPDcc2OSuIDcihnHA==
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==

 whatwg-mimetype@^2.3.0:
  version "2.3.0"