change bank view

src/Screens/MethodPay/AddMethod.js

@@ -25,6 +25,7 @@ import {getListBank, addMethodBank} from '../../apis/Functions/Widthdraw';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
+import SelectBankModal from './SelectBankModal';
 
 const {width} = Dimensions.get('window');
 
@@ -104,12 +105,20 @@ const AddMethodPay = (props) => {
           <View style={styles.container}>
             <View style={{flex: 1}}>
               <Text style={styles.txtTitle}>Chọn ngân hàng </Text>
-              <PickerItem
-                value={bank_id}
-                data={data}
-                onValueChange={(value, items) => {
-                  setBankID(items);
-                }}
+              {/*<PickerItem*/}
+              {/*  value={bank_id}*/}
+              {/*  data={data}*/}
+              {/*  onValueChange={(value, items) => {*/}
+              {/*    setBankID(items);*/}
+              {/*  }}*/}
+              {/*/>*/}
+              <SelectBankModal
+                  title={'Chọn ngân hàng'}
+                  data={data}
+                  onPressItem = {(item) => {
+                    console.log(item)
+                    setBankID(item)
+                  }}
               />
               <TextField
                 onChangeText={(val) => setBankName(val)}

src/Screens/MethodPay/ItemBank.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd, getWidth} from '../../Config/Functions';
+import R from '../../assets/R';
+import Block from '../../components/Block';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useNavigation} from '@react-navigation/native';
+import {METHODPAYDETAIL} from '../../routers/ScreenNames';
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <TouchableOpacity onPress={() => props.onPress(item)}>
+      <View style={[styles.container, {marginBottom: props.isEndItem ? HEIGHTXD(100) : HEIGHTXD(15)}]}>
+        <Block flex={1} row center padding={[HEIGHTXD(10), WIDTHXD(10)]}>
+          <Image source={{uri: item.logo}} style={styles.imgIcon} />
+          <Block padding={[0, 10]}>
+            <Text style={styles.txtBig}>{item.title}</Text>
+            <Block space={'between'} row flex={1}>
+              <Block>
+                <Text style={styles.txtRight}>{item.code}</Text>
+                <Text style={styles.txtRight}>{item.name}</Text>
+              </Block>
+            </Block>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Item);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: HEIGHTXD(10),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 2,
+    marginHorizontal: HEIGHTXD(10),
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(15),
+    width: getWidth() - WIDTHXD(105),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(200),
+    height: WIDTHXD(200),
+    resizeMode: 'contain',
+  },
+  txtLeft: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    marginBottom: 5,
+  },
+  txtBig: {
+    fontSize: getFontXD(42),
+    color: '#00359C',
+  },
+  txtRight: {
+    fontSize: getFontXD(36),
+    marginBottom: 5,
+  },
+});

src/assets/colors.js

@@ -43,6 +43,7 @@ const colors = {
   gray2: '#cccccc',
   gray1: '#bfbfbf',
   gray4: '#e6e6e6',
+  gray5: 'rgba(226,232,235, 1)',
   orange: '#FF9C00',
   lightBlue: '#1a8cff',
   lightBlue1: '#008ae6',
@@ -51,7 +52,7 @@ const colors = {
   rgbaBtn: 'rgba(127, 127, 191, 0.2)',
   yellow: '#e6e600',
   red: '#A60014',
-  red1: '#ff4d4d',
+  red1: '#e2e8eb',
 };
 
 export default colors;

src/helper/i18/locales/en.js

@@ -74,4 +74,7 @@ export default {
   Success: 'Success',
   OK: 'Ok',
   Can_not_get_data: "Can't get data",
+  Search: 'Search',
+  NullDataSearch: "Data not found",
+
 };

src/helper/i18/locales/vn.js

@@ -75,4 +75,7 @@ export default {
 
   Can_not_get_data: 'Không lấy được dữ liệu!',
   Cancel: 'Huỷ',
+  Search: 'Tìm kiếm',
+  NullDataSearch: "Không tìm thấy kết quả",
+
 };