import React from 'react'; import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import R from '../../assets/R'; import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { AccountVerification, METHODPAY, SERVICECUSTOMER, FEEDBACK, SETTING, } from '../../routers/ScreenNames'; import {useNavigation} from '@react-navigation/native'; const menus = [ { id: '1', title: 'Xác minh tài khoản', icon: R.images.iconUserCheck, screen: AccountVerification, }, { id: '2', title: 'Cài đặt phương thức thanh toán', icon: R.images.iconMethodPay, screen: METHODPAY, }, { id: '3', title: 'Liên hệ với dịch vụ khách hàng', icon: R.images.iconPhone, screen: SERVICECUSTOMER, }, { id: '4', title: 'Phản hồi', icon: R.images.iconMess, screen: FEEDBACK, }, { id: '5', title: 'Cài đặt', icon: R.images.iconSetting, screen: SETTING, }, ]; const Drawer = (props) => { const navigate = useNavigation(); return ( <View style={styles.container}> <View style={styles.header}> <Image source={R.images.avartar} style={styles.imgAvatar} /> <Text style={styles.txtTitle}>NGUYEN VAN A</Text> </View> <View style={styles.body}> {menus.map((e) => ( <TouchableOpacity onPress={() => { navigate.navigate(e.screen); props.toggleModal(); }} key={e.id} style={styles.containerItem}> <Image source={e.icon} style={styles.imgIcon} /> <Text style={styles.txtTitle}>{e.title}</Text> </TouchableOpacity> ))} </View> <TouchableOpacity onPress={() => console.log('Hello')} style={styles.footer}> <Icon name={'logout'} size={25} color={'#F81515'} /> <Text style={styles.txtTitle}>Đăng xuất</Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, header: { paddingVertical: 10, borderWidth: 1, borderRadius: WIDTHXD(64), borderColor: '#C9D3FF', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, }, body: { flex: 1, marginVertical: 30, }, imgAvatar: { width: WIDTHXD(140), height: WIDTHXD(140), borderRadius: WIDTHXD(100), }, imgIcon: { width: WIDTHXD(62), height: HEIGHTXD(52), resizeMode: 'contain', }, txtTitle: { fontSize: getFontXD(36), marginLeft: 10, color: '#0C0D2C', }, footer: { paddingVertical: 10, backgroundColor: '#EEEEEE', borderRadius: WIDTHXD(75), flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, }, containerItem: { flexDirection: 'row', alignItems: 'center', marginVertical: 10, borderRadius: WIDTHXD(75), paddingVertical: 10, paddingHorizontal: 10, }, }); export default Drawer;