update picker uni

android/app/src/main/java/com/invest/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import io.invertase.firebase.RNFirebasePackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;

android/settings.gradle

 rootProject.name = 'Invest'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-firebase'
 project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
 include ':react-native-vector-icons'

ios/Invest/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>To upload images</string>
 	<key>UIAppFonts</key>

ios/Podfile

@@ -85,6 +85,8 @@ target 'Invest' do
  
 
 
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'InvestTests' do
     inherit! :complete
     # Pods for testing

src/Screens/Account/AccountView.js

@@ -19,7 +19,7 @@ const AccountView = (props) => {
 
   return (
     <View>
-      <HeaderDrawer />
+      <HeaderDrawer title={'Tài khoản'} />
       <View style={styles.container}>
         <TouchableOpacity
           onPress={() => navigate.navigate(PROFILE)}

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import TextField from '../../../components/Input/TextField';
 import TextMulti from '../../../components/Input/TextMulti';
-import PickerImg from '../../../components/Picker/PickerImg';
+import PickerImgUni from '../../../components/Picker/PickerImgUni';
 import PickerDate from '../../../components/Picker/PickerDate';
 import R from '../../../assets/R';
 import Button from '../../../components/Button';
@@ -24,9 +24,9 @@ const BankInfor = (props) => {
           justifyContent: 'space-between',
           flexWrap: 'wrap',
         }}>
-        <PickerImg title={'Ảnh mặt trước CMND'} />
-        <PickerImg title={'Ảnh mặt sau CMND'} />
-        <PickerImg title={'Ảnh chữ ký'} />
+        <PickerImgUni title={'Ảnh mặt trước CMND'} />
+        <PickerImgUni title={'Ảnh mặt sau CMND'} />
+        <PickerImgUni title={'Ảnh chữ ký'} />
       </View>
       <View style={styles.btnSend}>
         <Button title={'Xác minh'} />

src/Screens/Authen/ConfirmEmail.js

@@ -48,6 +48,7 @@ const ConfirmEmail = (props) => {
           <View style={styles.containerCode}>
             <Text style={styles.txtTitle}>Vui lòng nhập email:</Text>
             <TextInput
+              placeholderTextColor={R.colors.placeHolder}
               style={styles.txtInput}
               placeholder="Nhập email"
               value={value}

src/Screens/Authen/NewPassWord.js

@@ -64,6 +64,7 @@ const NewPassword = (props) => {
             <TextInput
               style={styles.txtInput}
               placeholder="Nhập Email hoặc số điện thoại"
+              placeholderTextColor={R.colors.placeHolder}
               value={password}
               secureTextEntry={true}
               onChangeText={(val) => setPassword(val)}
@@ -76,6 +77,7 @@ const NewPassword = (props) => {
               placeholder="Nhập Email hoặc số điện thoại"
               value={cfPassword}
               secureTextEntry={true}
+              placeholderTextColor={R.colors.placeHolder}
               onChangeText={(val) => setcfPassword(val)}
             />
           </View>

src/Screens/Feedback/FeedbackView.js

@@ -92,6 +92,7 @@ const FeedbackView = (props) => {
           <View style={styles.footer}>
             <TextInput
               style={styles.txtInput}
+              placeholderTextColor={R.colors.placeHolder}
               multiline={true}
               placeholder={'Hãy chia sẻ cảm nhận về dịch vụ nhé'}
               onChangeText={(val) => setTxtInput(val)}

src/Screens/NewFeed/NewFeed.js

@@ -7,12 +7,13 @@ import Tab3 from './Tab3/Tab3';
 
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 const Tab = createMaterialTopTabNavigator();
+import HeaderDrawer from '../../components/Header/HeaderDrawer';
 
 const NewFeed = (props) => {
   return (
     <View style={{flex: 1}}>
-      <StatusBar backgroundColor={'#BCD7F8'} />
-      <SafeAreaView style={{backgroundColor: '#BCD7F8'}} />
+      <HeaderDrawer title={'Thông tin'} isWhite={true} />
+      <View style={{flex: 1, backgroundColor: 'white'}}>
         <Tab.Navigator
           initialRouteName="GeneralInfor"
           tabBarOptions={{
@@ -33,6 +34,7 @@ const NewFeed = (props) => {
           />
         </Tab.Navigator>
       </View>
+    </View>
   );
 };
 

src/components/Header/HeaderDrawer.js

@@ -20,7 +20,8 @@ import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 
-const HeaderHome = (props) => {
+const HeaderDrawer = (props) => {
+  const {title, isWhite} = props;
   const [isModalVisible, setModalVisible] = useState(false);
 
   const toggleModal = () => {
@@ -28,14 +29,16 @@ const HeaderHome = (props) => {
   };
 
   return (
-    <ImageBackground style={styles.img} source={R.images.bgHeader}>
+    <ImageBackground
+      style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
+      source={R.images.bgHeader}>
       <StatusBar backgroundColor="transparent" translucent={true} />
       <View style={styles.headerContainer}>
         <TouchableOpacity onPress={toggleModal}>
           <Image source={R.images.iconMenu} style={styles.imgIcon} />
         </TouchableOpacity>
 
-        <Text style={styles.txtTitle}>Tài khoản</Text>
+        <Text style={styles.txtTitle}>{title}</Text>
         <View />
       </View>
       <Modal
@@ -70,7 +73,7 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps, {})(HeaderHome);
+export default connect(mapStateToProps, {})(HeaderDrawer);
 
 const styles = StyleSheet.create({
   img: {

src/components/Header/HeaderSearch.js

@@ -50,6 +50,7 @@ const HeaderSearch = (props) => {
 
         {openSearch ? (
           <TextInput
+            placeholderTextColor={R.colors.placeHolder}
             style={styles.txtInput}
             onChangeText={(val) => setTxtSearch(val)}
             value={txtSearch}

src/components/Picker/PickerImgUni.js

+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 PickerImgUni = (props) => {
+  const {title, height, width} = props;
+
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [urlImg, setUrlImg] = useState('');
+  // const [imgPicker, setImgPicker] = useState('');
+
+  const onchoosGalery = () => {
+    ImagePicker.openPicker({
+      mediaType: 'photo',
+      multiple: false,
+    }).then((image) => {
+      setModalVisible(false);
+      setUrlImg(image.path);
+    });
+  };
+
+  const onCapture = () => {
+    ImagePicker.openCamera({
+      mediaType: 'photo',
+      width: 300,
+      height: 400,
+    }).then((image) => {
+      setModalVisible(false);
+      setUrlImg(image.path);
+    });
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={() => setModalVisible(true)}
+      style={{marginTop: 10, width: WIDTHXD(480)}}>
+      <Text style={styles.txt}>{title}</Text>
+
+      {urlImg ? (
+        <Image source={{uri: urlImg}} style={styles.container} />
+      ) : (
+        <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>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: WIDTHXD(350),
+    height: HEIGHTXD(280),
+    backgroundColor: R.colors.white,
+    borderRadius: 10,
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txt: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginBottom: 5,
+    paddingLeft: 10,
+  },
+  selectionImg: {
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerSelect: {
+    height: HEIGHTXD(520),
+    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 React.memo(PickerImgUni);

src/routers/StackNavigation.js

@@ -42,7 +42,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.TABNAVIGATOR}>
+      initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />

src/routers/TabNavigation.js

@@ -8,7 +8,7 @@ import Home from '../Screens/Home/Home';
 import {connect} from 'react-redux';
 import R from '../assets/R';
 import PlussModal from './PlussModal';
-import Notification from '../Screens/Notification/Notification';
+
 import Account from '../Screens/Account/Account';
 import Exchange from '../Screens/Exchange/Exchange';
 import NewFeed from '../Screens/NewFeed/NewFeed';