customdrawer
with white bg, and removed other sectionunknown
plain_text
a year ago
6.6 kB
5
Indexable
/* eslint-disable react/no-unstable-nested-components */ import React from 'react'; import { Alert, FlatList, Image, Pressable, StatusBar, StyleSheet, Text, TouchableOpacity, View, } from 'react-native'; import { colors } from '../theme'; import { dummyProfilePic, width } from '../constants/constants'; import fonts from '../assets/fonts'; import Icon from 'react-native-vector-icons/Ionicons'; import Images from '../assets/Images'; import { PencilIcon } from '../assets/Icons'; import { useNavigation } from '@react-navigation/native'; import { useDispatch } from 'react-redux'; import { setLogOut } from '../redux/actions/users'; import routes from './routes'; function CustomDrawer({ navigation }) { const dispatch = useDispatch(); const mainMenuArray = [ { title: 'Home', onPress: () => { } }, { title: 'Track your Activity', onPress: () => navigation.navigate(routes.trackActivityStack) }, { title: 'Connected Device and Apps', onPress: () => navigation.navigate(routes.connectDevicesStack) }, { title: 'All Reports', onPress: () => navigation.navigate(routes.allReportsStack) }, { title: 'Expert Panel', onPress: () => navigation.navigate(routes.expertPanelStack) }, { title: 'Share with Friends', onPress: () => navigation.navigate(routes.shareAppStack) }, { title: 'Blogs', onPress: () => navigation.navigate(routes.blogsStack) }, { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } }, { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) }, { title: 'Settings', onPress: () => navigation.navigate(routes.settingsStack), }, ]; // const otherMenuArray = [ // { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } }, // { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) }, // { // title: 'Settings', // onPress: () => navigation.navigate(routes.settingsStack), // }, // ]; function LogOut() { dispatch(setLogOut()); } function ListFooterComponent() { return ( <> {/* <Text style={[styles.headingText, { marginTop: 15, marginBottom: 5 }]}> Others </Text> <FlatList data={otherMenuArray} renderItem={renderItem} /> */} <TouchableOpacity onPress={() => navigation?.closeDrawer()} style={styles.closeIconContainer}> <Icon name="close" size={25} color={colors.c666666} /> </TouchableOpacity> </> ); } const ListHeaderComponent = () => { return ( <View style={{ alignItems: 'center', flex: 1 }}> <View style={styles.planContainer}> <Text style={styles.planText}>Membership plan</Text> </View> <Pressable style={styles.profileCardContainer} onPress={() => navigation.navigate(routes.profileStack)} > <Image style={{ width: width / 6, height: width / 6, borderRadius: 100 }} source={{ uri: dummyProfilePic }} /> <View style={{ flex: 1, paddingLeft: 15 }}> <Text style={styles.profileHeadText}>Machille John</Text> <Text style={styles.profileText}>Weight loss</Text> <Text style={[styles.profileText, { fontFamily: fonts.PoppinsRegular }]}> +91 8475254859 </Text> </View> <TouchableOpacity style={styles.editIconContainer}> <PencilIcon width={width / 20} height={width / 20} /> </TouchableOpacity> </Pressable> <Text style={styles.headingText}>Main</Text> </View> ); }; const renderItem = ({ item }): React.JSX.Element => { return ( <TouchableOpacity onPress={item.onPress} style={styles.itemContainer}> <Text style={styles.itemContainerText}>{item?.title}</Text> <Icon name={'chevron-forward'} // color={colors.white} color={colors.c434343} size={18} /> </TouchableOpacity> ); }; return ( <View style={styles.container}> {/* <StatusBar translucent backgroundColor={'transparent'} barStyle={'dark-content'} /> */} <FlatList showsVerticalScrollIndicator={false} style={{ alignSelf: 'center' }} ListHeaderComponent={ListHeaderComponent} ListFooterComponent={ListFooterComponent} data={mainMenuArray} renderItem={renderItem} /> <Image style={styles.logoIcon} source={Images.toneopicon} /> </View> ); } export default CustomDrawer; const styles = StyleSheet.create({ container: { flex: 1, // backgroundColor: colors.green, backgroundColor: colors.cf3f3f3, paddingTop: width / 7, }, logoIcon: { width: width / 3, height: width / 2, resizeMode: 'contain', position: 'absolute', bottom: 0, right: 0, }, itemContainerText: { fontFamily: fonts.PoppinsMedium, // color: colors.white, color: colors.c434343, fontSize: 16, }, itemContainer: { width: width / 1.1, height: width / 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, planContainer: { width: width / 1.1, flexDirection: 'row', alignItems: 'center', marginBottom: 5, }, planText: { fontFamily: fonts.PoppinsMedium, fontSize: 16, // color: colors.white, color: colors.c434343 }, profileCardContainer: { width: width / 1.1, height: width / 4.8, backgroundColor: colors.white, borderRadius: 10, marginTop: 10, marginBottom: width / 12, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 15, }, profileHeadText: { fontFamily: fonts.PoppinsMedium, color: colors.black }, profileText: { fontFamily: fonts.PoppinsMedium, fontSize: 12, color: colors.c999999, }, headingText: { fontFamily: fonts.PoppinsRegular, fontSize: 12, // color: colors.white, color: colors.c999999, textAlign: 'left', width: width / 1.1, }, closeIconContainer: { width: width / 7, height: width / 7, alignItems: 'center', justifyContent: 'center', marginTop: width / 10, backgroundColor: colors.white, borderRadius: 100, alignSelf: 'center', }, editIconContainer: { width: width / 12, height: width / 12, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.cf9f9f9, borderRadius: 100, }, });
Editor is loading...
Leave a Comment