Tab bar page
import React, { useEffect, useRef } from 'react';
//Bottom Navigation import
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
import * as Animatable from 'react-native-animatable';
import IonIcon from 'react-native-vector-icons/Ionicons';
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
BackHandler,
Alert
} from 'react-native';
import {
Dashboard,
Employees,
ShiftMaster,
Attendance,
Profile,
MenuPage
} from '../screens';
import { useDispatch, useSelector } from 'react-redux';
import { useIsFocused, useFocusEffect, useNavigationState } from '@react-navigation/native';
import Page1 from './Screen/Page1';
import Page2 from './Screen/Page2';
import Page3 from './Screen/Page3';
const TabArr = [
{
route: 'Page1',
label: 'Dashboard',
activeIcon: 'home-outline',
component: Page1,
},{
route: 'Page2',
label: 'Attendance',
activeIcon: 'heart-outline',
component: Page2,
},{
route: 'Page3',
label: 'Employees',
activeIcon: 'person-outline',
component: Page3,
}
];
const TabButton = props => {
const { item, onPress, accessibilityState } = props;
const focused = accessibilityState.selected;
const tabClick = (()=>{
onPress();
//dispatch(_setParentPageStatus(true))
})
useFocusEffect(
React.useCallback(() => {
//dispatch(_setParentPageStatus(true))
return () => {
};
}, [])
);
return (
<TouchableOpacity
onPress={onPress}
activeOpacity={1}
style={[styles.container,{marginVertical:12,backgroundColor:focused ? 'yellow' : '#0E1F33',borderRadius: focused ? 40 : 0}]}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{ flex: 3.5, }}>
<View
//ref={viewRef}
duration={1000}
style={styles.animatable_container}>
<IonIcon name={item.activeIcon} size={24} color={focused ? '#ff6347' : '#868F9A'} />
<Text
style={{
paddingLeft: 7,
color: focused ? 'red' : '#868F9A',
fontSize: 12,
//fontFamily: FontFamily.regular,
// marginTop: 8
}}>
{item.label}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
export default function TabNavigator() {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
headerShadowVisible: false,
tabBarStyle: {
paddingLeft: 10,
paddingRight: 10,
elevation: 5,
shadowColor: '#000000',
shadowOffset: { height: 5 },
shadowOpacity: 0.75,
shadowRadius: 5,
backgroundColor: '#0E1F33',
height: 85,
bottom:10,
//top:10,
width:'95%',
marginLeft:8,
borderRadius:12,
marginTop:20
},
}}>
{TabArr.map((item, index) => {
return (
<Tab.Screen
key={index}
name={item.route}
component={item.component}
options={{
tabBarShowLabel: false,
tabBarButton: props => <TabButton {...props} item={item} />,
}}
/>
);
})}
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// Bottom-right corner
},
animatable_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
});
import { createSlice } from '@reduxjs/toolkit';
import { LocalData } from '../../constants';
const date = new Date();
const initialState = {
placeholderLoading: false,
PulltoRefresh: false,
homePageData: '',
categoriesData: [],
subcategoriesData: [],
productListData: [],
userDetails: "",
token: "",
userMode: "4", // customer user type - 4 and wholeseller user type - 3
productDetails: '',
productSizeArr: [],
productColorArr: [],
productAddonArr: [],
selectedSize: "",
selectedColor: "",
deviceToken: "",
globalCartCount: 0,
selectedProductId: "",
myFavouritesArr: [],
cartData: "",
showCouponSuccessMsg: false,
selectedCouponCode: "",
addressList: [],
paymentModes: "",
orderListData: [],
orderDetails: "",
cmsContent: "",
faqContent: "",
searchData: "",
blogData: "",
eventData: '',
notificationData: '',
selectedAddress: "",
selectedSubCat: "",
transactionlist: "",
applied_sortType: "",
applied_sortOptions: [
{ name: 'What\'s new', value: 'new_product', selected: false },
{ name: 'Price - high to low', value: 'h_to_l', selected: false },
{ name: 'Price - low to high', value: 'l_to_h', selected: false },
{ name: 'Customer rating', value: 'customer_rating', selected: false },
],
applied_discountType: "",
applied_discountOptions: [
{ name: 'Above 10%', value: '10', selected: false },
{ name: 'Above 20%', value: '20', selected: false },
{ name: 'Above 30%', value: '30', selected: false },
{ name: 'Above 40%', value: '40', selected: false },
{ name: 'Above 50%', value: '50', selected: false },
{ name: 'Above 60%', value: '60', selected: false },
{ name: 'Above 70%', value: '70', selected: false },
{ name: 'Above 80%', value: '80', selected: false },
],
applied_colorOptions:[],
applied_colorName:[],
applied_sizeOptions:[],
applied_sizeName:[],
appliedMaxPriceRange: 0,
appliedMinPriceRange: 0,
offerProducts:""
};
export const projectReducer = createSlice({
name: 'project',
initialState,
reducers: {
_setApplied_sortType: (state, action) => {
state.applied_sortType = action.payload;
},
_setApplied_sortOptions: (state, action) => {
state.applied_sortOptions = action.payload;
},
_setApplied_discountOptions: (state, action) => {
state.applied_discountOptions = action.payload;
},
_setApplied_discountType: (state, action) => {
state.applied_discountType = action.payload;
},
_setApplied_maxPriceRange: (state, action) => {
state.appliedMaxPriceRange = action.payload;
},
_setApplied_minPriceRange: (state, action) => {
state.appliedMinPriceRange = action.payload;
},
_setApplied_colorOptions: (state, action) => {
state.applied_colorOptions = action.payload;
},
_setApplied_colorName: (state, action) => {
state.applied_colorName = action.payload;
},
_setApplied_sizeOptions: (state, action) => {
state.applied_sizeOptions = action.payload;
},
_setApplied_sizeName: (state, action) => {
state.applied_sizeName = action.payload;
},
_setPlaceholderLoading: (state, action) => {
state.placeholderLoading = action.payload;
},
_setPulltoRefresh: (state, action) => {
state.PulltoRefresh = action.payload;
},
_setDashboardData: (state, action) => {
state.homePageData = action.payload;
},
_setallCategories: (state, action) => {
state.categoriesData = action.payload;
},
_setallSubCategories: (state, action) => {
state.subcategoriesData = action.payload;
},
_setProductData: (state, action) => {
state.productListData = action.payload;
},
_setUserData: (state, action) => {
state.userDetails = action.payload;
},
_setToken: (state, action) => {
state.token = action.payload;
},
_setUserMode: (state, action) => {
state.userMode = action.payload;
},
_setdeviceToken: (state, action) => {
state.deviceToken = action.payload;
},
_setProductDetails: (state, action) => {
state.productDetails = action.payload;
},
_setProductSizeArr: (state, action) => {
state.productSizeArr = action.payload;
},
_setSelectedSizeObj: (state, action) => {
state.selectedSize = action.payload;
},
_setproductColorArr: (state, action) => {
state.productColorArr = action.payload;
},
_setSelectedColorObj: (state, action) => {
state.selectedColor = action.payload;
},
_setProductAddonArr: (state, action) => {
state.productAddonArr = action.payload;
},
_setGlobalCartCount: (state, action) => {
state.globalCartCount = action.payload;
},
_setSelectedProductId: (state, action) => {
state.selectedProductId = action.payload;
},
_setMyFavouritesProducts: (state, action) => {
state.myFavouritesArr = action.payload;
},
_setCartData: (state, action) => {
state.cartData = action.payload
},
_setCouponSuccessMsgShow: (state, action) => {
state.showCouponSuccessMsg = action.payload
},
_setSelectedCouponCode: (state, action) => {
state.selectedCouponCode = action.payload
},
_setAddressList: (state, action) => {
state.addressList = action.payload
},
_setPaymentModes: (state, action) => {
state.paymentModes = action.payload
},
_setorderList: (state, action) => {
state.orderListData = action.payload
},
_setorderDetails: (state, action) => {
state.orderDetails = action.payload
},
_setcmsContent: (state, action) => {
state.cmsContent = action.payload
},
_setfaqContent: (state, action) => {
state.faqContent = action.payload
},
_setSearchResult: (state, action) => {
state.searchData = action.payload
},
_setBlogData: (state, action) => {
state.blogData = action.payload
},
_seteventData: (state, action) => {
state.eventData = action.payload
},
_setNotificationData: (state, action) => {
state.notificationData = action.payload
},
_setselectedAddr: (state, action) => {
state.selectedAddress = action.payload
},
_setselecctedSubCat: (state, action) => {
state.selectedSubCat = action.payload
},
_settransactionList: (state, action) => {
state.transactionlist = action.payload
},
_setSortType: (state, action) => {
state.sortType = action.payload
},
_setOfferProducts: (state, action) => {
state.offerProducts = action.payload
},
},
});
// Action creators are generated for each case reducer function
export const {
_setPlaceholderLoading,
_setDashboardData,
_setPulltoRefresh,
_setallCategories,
_setallSubCategories,
_setProductData,
_setUserData,
_setToken,
_setUserMode,
_setProductDetails,
_setProductSizeArr,
_setproductColorArr,
_setSelectedSizeObj,
_setSelectedColorObj,
_setProductAddonArr,
_setdeviceToken,
_setGlobalCartCount,
_setSelectedProductId,
_setMyFavouritesProducts,
_setCartData,
_setCouponSuccessMsgShow,
_setSelectedCouponCode,
_setAddressList,
_setPaymentModes,
_setorderList,
_setorderDetails,
_setcmsContent,
_setfaqContent,
_setSearchResult,
_setBlogData,
_seteventData,
_setNotificationData,
_setselectedAddr,
_setselecctedSubCat,
_settransactionList,
_setApplied_sortOptions,
_setApplied_sortType,
_setApplied_colorOptions,
_setApplied_colorName,
_setApplied_sizeOptions,
_setApplied_sizeName,
_setApplied_discountOptions,
_setApplied_discountType,
_setApplied_maxPriceRange,
_setApplied_minPriceRange,
_setOfferProducts
} = projectReducer.actions;
export default projectReducer.reducer;
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ImageBackground,
StatusBar,
Image,
ScrollView,
FlatList,
RefreshControl,
Pressable,
ActivityIndicator,
Dimensions,
BackHandler,
Alert
} from 'react-native'
import React, {
useEffect,
useState,
useRef
} from 'react';
import {
colors,
height,
sizes,
width,
FontFamily
} from '../../constants/Theme';
import { LOCAL_IMAGES, LOCAL_ICONS, AllSourcePath } from '../../constants/PathConfig';
import { HelperFunctions } from '../../constants';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useIsFocused, useFocusEffect } from '@react-navigation/native';
import { postApi } from '../../Service/service';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
import Loader from '../../components/Loader/Loader'
import { getData, setData, deleteData } from '../../Service/localStorage';
import { SliderBox } from "react-native-image-slider-box";
import { useDispatch, useSelector } from 'react-redux';
import OneSignal from 'react-native-onesignal';
import {
_setPlaceholderLoading,
_setDashboardData,
_setPulltoRefresh,
_setUserData,
_setToken,
_setUserMode,
_setGlobalCartCount,
_setSelectedProductId,
_setdeviceToken,
_setSelectedCouponCode,
} from '../../Store/Reducers/ProjectReducer';
const Home = props => {
const isFocused = useIsFocused();
const route = useRoute();
const dispatch = useDispatch();
const { placeholderLoading, homePageData, PulltoRefresh, token, userMode, deviceToken, globalCartCount } = useSelector(state => state.project);
const [imageLoader, setimageLoader] = useState(true);
const [actionType, setAction] = useState('');
const parentPageRoute = 'ParentPageRoute'; // Replace with the actual name of your parent page's route
const [loader, setLoader] = React.useState(false);
const [placeHolderLoader, setplaceHolderLoader] = React.useState(true);
const [pullToRefreshFlag, setPullToRefresh] = React.useState(false);
const gotoPage = (page, Selecteditem) => {
//dispatch(_setPlaceholderLoading(true));
props.navigation.navigate(page, { pData: Selecteditem });
}
useEffect(() => {
if (isFocused == true) {
fetchHomePageDetails('DEFAULT');
}
HelperFunctions.networkStatus(props);
//initializeOnesignal()
}, [isFocused]);
useFocusEffect(
React.useCallback(() => {
//BackButtonHandle()
const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);
return () => {
backHandler.remove();
setplaceHolderLoader(true)
};
return () => {
};
}, [])
);
const handleBackButton = () => {
Alert.alert('Hold on!', 'Are you sure you want to go back?', [
{
text: 'Cancel',
onPress: () => null,
style: 'cancel',
},
{ text: 'YES', onPress: () => BackHandler.exitApp() },
]);
return true;
};
const onRefresh = React.useCallback(() => {
//dispatch(_setPulltoRefresh(true))
setPullToRefresh(true)
//wait(2000).then(() => {
fetchHomePageDetails('PULL_TO_REFESH');
// });
}, []);
const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout));
}
const fetchHomePageDetails = (TYPE) => {
// TYPE == 'PULL_TO_REFESH' ? dispatch(_setPulltoRefresh(true)) : dispatch(_setPlaceholderLoading(true));
postApi("home", {}, token ? token : '', deviceToken)
.then((resp) => {
if (resp.status == true) {
let data = {
othersData: resp?.data,
dashboard: resp.dashboard,
}
console.log("Home page api response", JSON.stringify(data));
dispatch(_setDashboardData(data));
dispatch(_setGlobalCartCount(resp?.mycartcount))
//TYPE == 'PULL_TO_REFESH' ? dispatch(_setPulltoRefresh(false)) : dispatch(_setPlaceholderLoading(false));
if (resp?.status_text == 'Blocked' || resp?.status_text == 'Deleted') {
//HelperFunctions.showToastMsg(resp.message);
dispatch(_setUserData(""));
dispatch(_setToken(""));
dispatch(_setUserMode("4"));
deleteData();
setData("introVisit", 'true');
}
} else {
//TYPE == 'PULL_TO_REFESH' ? dispatch(_setPulltoRefresh(false)) : dispatch(_setPlaceholderLoading(false));
HelperFunctions.showToastMsg(resp.message);
}
})
.catch((error) => {
HelperFunctions.showToastMsg('Sorry! Something went to wrong');
}).finally(() => {
//TYPE == 'PULL_TO_REFESH' ? dispatch(_setPulltoRefresh(false)) : dispatch(_setPlaceholderLoading(false));
TYPE == 'PULL_TO_REFESH' ? setPullToRefresh(false) : setplaceHolderLoader(false);
})
}
const _categoryItemClick = (item) => {
if (item.id == '') {
props.navigation.navigate('Search');
} else {
console.log(item)
props.navigation.navigate('ProductList', {
paramData: item,
productFor: 'category'
})
}
}
const showBestSellerItems = () => {
//dispatch(_setPlaceholderLoading(true));
props.navigation.navigate('ProductList', {
paramData: '',
title: 'Best Seller',
productFor: 'specialCat' // can be use for best seller/ any other special category
})
}
const showAllProduct = () => {
//dispatch(_setPlaceholderLoading(true));
props.navigation.navigate('ProductList', {
paramData: '',
title: 'All Products',
productFor: 'all' // can be use for best seller/ any other special category
})
}
const categoryList = ({ index, item }) => (
<Pressable style={styles.catItemMain} onPress={() => { _categoryItemClick(item) }}>
<View style={styles.catitemImageContainer}>
<Image source={{ uri: item?.logo }} style={styles.catListImg} />
</View>
<Text numberOfLines={1} ellipsizeMode='tail' style={styles.catListText}>{item.title}</Text>
</Pressable>
)
const Placeholder_categoryList = ({ index, item }) => (
<SkeletonPlaceholder >
<View style={styles.catItemMain}>
<View style={styles.catitemImageContainer}></View>
<View style={{ height: 12, width: 35, borderRadius: 6 }}></View>
</View>
</SkeletonPlaceholder>
)
const handleImageLoad = () => {
//console.log('Image loaded successfully!');
setimageLoader(false)
// Perform any additional actions or state updates here
};
//Ref: user role - 4 and wholeseller role - 3
const _addtoFavourite = (item) => {
// alert(item.wishlist)
if (token) {
setLoader(true)
let data = {
product_id: item.id,
status: item.wishlist == true ? 'true' : 'false',
category_id: item?.category_id
}
postApi("api/wishlist", data, token ? token : '', deviceToken)
.then((resp) => {
if (resp.status == true) {
setLoader(false)
HelperFunctions.showToastMsg(resp?.message);
fetchHomePageDetails('DEFAULT');
// console.log(JSON.stringify(resp?.dashboard))
// let data = HelperFunctions.copyArrayOfObj(homePageData);
// data.dashboard.categorywiseproducts = resp?.dashboard?.categorywiseproducts;
// data.dashboard.bestsellerproducts = resp?.dashboard?.bestsellerproducts;
// let data = {
// othersData: resp?.data,
// dashboard: resp.dashboard,
// }
// console.log("Home page api response", JSON.stringify(resp?.dashboard?.categorywiseproducts));
// dispatch(_setDashboardData(data));
} else {
setLoader(false);
HelperFunctions.showToastMsg(resp?.message);
}
}).catch((error) => {
setLoader(false);
HelperFunctions.showToastMsg('Sorry! Something went to wrong....');
})
} else {
HelperFunctions.showToastMsg('Please do login first to enjoy wishlist feature');
props.navigation.navigate('Login', { page: 'ProductList' })
}
}
const Product_Render = ({ index, item }) => (
//onPress={() => { gotoPage('ProductDetails') }}
<View style={{ width: 175, marginRight: 8, marginTop: 12 }}>
<View style={{ width: '100%', backgroundColor: '#F2F2F2' }}>
<Pressable onPress={() => { gotoPage('ProductDetails', item) }} style={{ position: 'relative' }}>
<Image source={{ uri: item?.image_with_path }} style={styles.listImage} />
</Pressable>
<Pressable onPress={() => { _addtoFavourite(item) }} style={{ position: 'absolute', right: 6, bottom: 0, top: 5, }}>
<Image source={LOCAL_ICONS.heart_fill} style={[styles.heartIcon, { tintColor: item.wishlist == true ? 'red' : null }]} />
</Pressable>
</View>
<Pressable onPress={() => { gotoPage('ProductDetails', item) }} style={styles.descriptionContainer}>
{/* <Text style={[styles.ListText]}>{item?.name}</Text> */}
<Text numberOfLines={1} style={[styles.subText]}>{item?.title}</Text>
<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 4 }}>
<Text style={[styles.priceMain]}>{userMode == '4' ? AllSourcePath.CURRENCY + item?.mrp : AllSourcePath.CURRENCY + item?.mrp_wholeseller}</Text>
<Text style={[styles.price]}>{userMode == '4' ? AllSourcePath.CURRENCY + item?.net_price : AllSourcePath.CURRENCY + item?.net_price_wholeseller}</Text>
<Text style={[styles.price, { color: '#DB1414' }]}>{userMode == '4' ? item?.discount > 0 ? item?.discount + '% OFF' : null : item?.discount_wholeseller > 0 ? item?.discount_wholeseller + '% OFF' : null}</Text>
</View>
</Pressable>
</View>
)
const Placeholder_productList = ({ index, item }) => (
<SkeletonPlaceholder>
<Pressable style={{ width: 175, marginRight: 8, marginTop: 12 }}>
<View style={{ width: '100%', backgroundColor: '#F2F2F2' }}>
<View style={styles.listImage}></View>
</View>
<View style={[styles.descriptionContainer, { marginTop: 6 }]}>
<View style={{ height: 12, width: '90%', borderRadius: 6, marginBottom: 4 }}></View>
<View style={{ height: 12, width: '50%', borderRadius: 6 }}></View>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', marginTop: 4 }}>
<View style={{ height: 8, width: 35, borderRadius: 6 }}></View>
</View>
</View>
</Pressable>
</SkeletonPlaceholder>
)
const CategoryWiseProduct_Render = ({ index, item }) => (
<>
{index == parseInt(homePageData?.dashboard?.categorywiseproducts.length - 1 / 2) ?
(homePageData?.dashboard?.homemiddlebanner?.image ?
<View style={{ position: 'relative' }}>
<Pressable style={[styles.listItem]}>
<ImageBackground
source={{ uri: homePageData?.dashboard?.homemiddlebanner?.image }}
resizeMode="cover"
style={styles.bg_image}
onLoad={handleImageLoad}
>
</ImageBackground>
</Pressable>
{imageLoader ?
<ActivityIndicator size="small" color={colors.primary} style={{ position: 'absolute', top: 60, left: '50%' }} />
: null}
</View>
:
<SkeletonPlaceholder >
<Pressable style={[styles.listItem]}>
<View style={{ height: 160, width: '100%', borderRadius: 4 }}></View>
</Pressable>
</SkeletonPlaceholder>
)
: null}
<View style={[{ marginBottom: 25 }]}>
{item?.products && !placeHolderLoader ? <>
{item?.products.length > 0 ?
<View style={styles.headingContent}>
<Text style={styles.saveAddrTitleText}>{item?.title}</Text>
<Pressable style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} onPress={() => { _categoryItemClick(item) }}>
<Text style={[styles.saveAddrTitleText, { color: colors.primary }]}>SEE ALL</Text>
<Image source={LOCAL_ICONS.right_arrow} style={[styles.listImage, { tintColor: colors.primary, height: 16, width: 16 }]} />
</Pressable>
</View> : null}
<FlatList
horizontal
data={item?.products}
renderItem={Product_Render}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
/>
</>
:
<>
<View style={styles.headingContent}>
<View style={{ height: 8, width: '40%', borderRadius: 6, backgroundColor: '#F2F2F2' }}></View>
<View style={{ height: 8, width: '10%', borderRadius: 6, backgroundColor: '#F2F2F2', marginRight: 16 }}></View>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={[1, 1, 1, 1, 1, 1]}
renderItem={Placeholder_productList}
keyExtractor={item => item.id}
/>
</>
}
</View>
</>
)
const Blog_Render = ({ index, item }) => (
//onPress={() => { gotoPage('ProductDetails') }}
<Pressable onPress={() => {
// dispatch(_setPlaceholderLoading(true))
props.navigation.navigate('BlogDetails', { param: item })
}} style={{ width: 210, marginRight: 8, marginTop: 12 }}>
<View style={{ width: '100%', backgroundColor: '#F2F2F2' }}>
<View style={{ position: 'relative' }}>
<Image source={{ uri: item?.image }} style={styles.listImage} />
</View>
</View>
<View style={styles.descriptionContainer}>
<Text style={[styles.subText]}>{item?.title}</Text>
</View>
</Pressable>
)
const Placeholder_bloglist = ({ index, item }) => (
<SkeletonPlaceholder >
<Pressable style={{ width: 175, marginRight: 8, marginTop: 12 }}>
<View style={{ width: '100%', backgroundColor: '#F2F2F2' }}>
<View style={styles.listImage}></View>
</View>
<View style={[styles.descriptionContainer, { marginTop: 8 }]}>
<View style={{ height: 12, width: '40%', borderRadius: 6 }}></View>
</View>
</Pressable>
</SkeletonPlaceholder>
)
return (
<View style={styles.main}>
<StatusBar barStyle={'light-content'} backgroundColor={colors.primary} />
<View style={styles.header}>
<Image source={LOCAL_IMAGES.logo} style={styles.logo} />
<View style={styles.iconContainer}>
<Pressable onPress={() => { token ? gotoPage('MyFavourites', {}) : props.navigation.navigate('Login', { page: 'Home' }); }} ><Image source={LOCAL_ICONS.favourite} style={styles.quickIcon} /></Pressable>
<View style={{ position: 'relative' }}>
<Pressable onPress={() => { gotoPage('CartPage', {}); }} ><Image source={LOCAL_ICONS.cart} style={[styles.quickIcon, { marginLeft: 24 }]} /></Pressable>
{globalCartCount > 0 ?
<Pressable onPress={() => { gotoPage('CartPage', {}); }} style={{ height: 18, width: 18, borderRadius: 50, backgroundColor: 'red', position: 'absolute', left: 35, bottom: 10 }}>
<Text style={{ color: '#fff', fontFamily: FontFamily.regular, fontSize: sizes.tiny, textAlign: 'center', marginTop: 2 }}>
{globalCartCount}
</Text>
</Pressable> : null}
</View>
</View>
</View>
<ScrollView style={{ backgroundColor: '#fff' }} showsVerticalScrollIndicator={false} refreshControl={
<RefreshControl
refreshing={pullToRefreshFlag}
onRefresh={onRefresh}
colors={[colors.primary, '#225FD8', '#DB1414']}
/>
}>
<View style={styles.listContent}>
{homePageData?.dashboard?.categories != '' && placeHolderLoader == false ?
<>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={homePageData?.dashboard?.categories}
renderItem={categoryList}
keyExtractor={item => item.id}
/>
</>
:
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={[1, 1, 1, 1, 1, 1]}
renderItem={Placeholder_categoryList}
keyExtractor={item => item.id}
/>
}
{homePageData?.dashboard?.banners != '' && !placeHolderLoader ?
<View style={{ marginRight: 20 }}>
{/* <SliderBox
images={homePageData?.dashboard?.banners}
currentImageEmitter={index => { }}
sliderBoxHeight={140}
parentWidth={Dimensions.get('window').width - 35}
dotColor="#fff"
inactiveDotColor="#dedede"
dotStyle={{
width: 0,
height: 0,
borderRadius: 50,
opacity: 0
}}
autoplay
//circleLoop
imageLoadingColor="#2196F3"
resizeMethod={'resize'}
resizeMode={'cover'}
/> */}
</View>
:
<SkeletonPlaceholder >
<Pressable style={[styles.listItem]}>
<View style={{ height: 160, width: '100%', borderRadius: 4 }}></View>
</Pressable>
</SkeletonPlaceholder>
}
{/* Best Seller Start */}
<View style={[{ marginBottom: 25, marginTop: 10 }]}>
{homePageData?.dashboard?.categories && !placeHolderLoader ? <>
<View style={styles.headingContent}>
<Text style={styles.saveAddrTitleText}>Best Seller</Text>
<Pressable onPress={() => { showBestSellerItems() }} style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={[styles.saveAddrTitleText, { color: colors.primary }]}>SEE ALL</Text>
<Image source={LOCAL_ICONS.right_arrow} style={[styles.listImage, { tintColor: colors.primary, height: 16, width: 16 }]} />
</Pressable>
</View>
<FlatList
horizontal
data={homePageData?.dashboard?.bestsellerproducts}
renderItem={Product_Render}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
/>
</>
: <>
<View style={styles.headingContent}>
<View style={{ height: 8, width: '40%', borderRadius: 6, backgroundColor: '#F2F2F2' }}></View>
<View style={{ height: 8, width: '10%', borderRadius: 6, backgroundColor: '#F2F2F2', marginRight: 16 }}></View>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={[1, 1, 1, 1, 1, 1]}
renderItem={Placeholder_productList}
keyExtractor={item => item.id}
/>
</>
}
</View>
{/* Category wise product */}
<FlatList
data={homePageData?.dashboard?.categorywiseproducts}
renderItem={CategoryWiseProduct_Render}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
/>
<View style={[{ marginBottom: 25, marginTop: 10 }]}>
{homePageData?.dashboard?.categories && !placeHolderLoader ? <>
<View style={styles.headingContent}>
<Text style={styles.saveAddrTitleText}>All products</Text>
{/* <Pressable onPress={() => { showAllProduct() }} style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={[styles.saveAddrTitleText, { color: colors.primary }]}>SEE ALL</Text>
<Image source={LOCAL_ICONS.right_arrow} style={[styles.listImage, { tintColor: colors.primary, height: 16, width: 16 }]} />
</Pressable> */}
</View>
<FlatList
horizontal
data={homePageData?.dashboard?.all_products}
renderItem={Product_Render}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
/>
</>
: <>
<View style={styles.headingContent}>
<View style={{ height: 8, width: '40%', borderRadius: 6, backgroundColor: '#F2F2F2' }}></View>
<View style={{ height: 8, width: '10%', borderRadius: 6, backgroundColor: '#F2F2F2', marginRight: 16 }}></View>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={[1, 1, 1, 1, 1, 1]}
renderItem={Placeholder_productList}
keyExtractor={item => item.id}
/>
</>
}
</View>
{/* Blog Part */}
<View style={[{ marginBottom: 25, marginTop: 10 }]}>
{homePageData?.dashboard?.categories && !placeholderLoading ? <>
<View style={styles.headingContent}>
<Text style={styles.saveAddrTitleText}>Blogs</Text>
<Pressable onPress={() => {
dispatch(_setPlaceholderLoading(true))
props.navigation.navigate('BlogList')
}} style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={[styles.saveAddrTitleText, { color: colors.primary }]}>SEE ALL</Text>
<Image source={LOCAL_ICONS.right_arrow} style={[styles.listImage, { tintColor: colors.primary, height: 16, width: 16 }]} />
</Pressable>
</View>
<FlatList
horizontal
data={homePageData?.dashboard?.blogs}
renderItem={Blog_Render}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
/>
</>
: <>
<View style={styles.headingContent}>
<View style={{ height: 8, width: '40%', borderRadius: 6, backgroundColor: '#F2F2F2' }}></View>
<View style={{ height: 8, width: '10%', borderRadius: 6, backgroundColor: '#F2F2F2', marginRight: 16 }}></View>
</View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={[1, 1, 1, 1, 1, 1]}
renderItem={Placeholder_bloglist}
keyExtractor={item => item.id}
/>
</>
}
</View>
</View>
</ScrollView>
<Loader
isLoading={loader}
/>
</View>
)
}
const styles = StyleSheet.create({
main: {
flex: 1
},
header: {
width: '100%',
height: 72,
backgroundColor: colors.white,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
borderBottomColor: '#0000000D',
borderBottomWidth: 2,
paddingHorizontal: 20,
},
logo: {
width: 72,
height: 48,
resizeMode: "cover",
},
quickIcon: {
width: 24,
height: 24,
resizeMode: "cover",
tintColor: '#000'
},
heartIcon: {
width: 18,
height: 18,
resizeMode: "cover",
},
listContent: {
marginTop: 6,
paddingVertical: 6,
backgroundColor: colors.white,
paddingLeft: 18
},
iconContainer: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
catItemMain: { width: 80, borderRadius: 15, marginRight: 0, marginBottom: 16, paddingTop: 2, justifyContent: 'center', alignItems: 'center' },
catitemImageContainer: { width: 60, height: 60, borderRadius: 30, marginBottom: 10, backgroundColor: '#F2F2F2', justifyContent: "center", alignItems: 'center' },
catListImg: {
width: '100%',
height: '100%',
resizeMode: "contain",
borderRadius: 50
},
catListText: {
color: colors.black,
fontFamily: FontFamily.medium,
fontSize: sizes.sm,
},
listItem: {
paddingRight: 12,
paddingLeft: 2,
height: 160,
marginBottom: 14
},
bg_image: {
height: '100%',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row'
},
listImage: {
width: '100%',
height: 190,
//borderRadius: 8,
//flex:1,
resizeMode: "cover"
},
descriptionContainer: {
paddingLeft: 0,
width: '100%'
},
ListText: {
fontFamily: FontFamily.medium,
color: '#C49A6C',
fontSize: sizes.tiny,
//marginLeft: 2,
marginTop: 4,
paddingRight: 12
},
headingContent: {
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row'
},
saveAddrTitleText: {
fontFamily: FontFamily.bold,
color: colors.black,
fontSize: sizes.sm,
textTransform: 'capitalize'
},
subText: {
fontFamily: FontFamily.regular,
color: colors.black,
fontSize: 13,
//marginLeft: 2,
marginTop: 8,
paddingRight: 12,
textTransform: 'capitalize'
},
priceMain: {
fontFamily: FontFamily.regular,
color: '#979797',
fontSize: 10,
textDecorationLine: 'line-through',
textDecorationStyle: 'solid'
},
price: {
fontFamily: FontFamily.medium,
color: colors.black,
fontSize: 10,
marginLeft: 5
//textDecorationLine: 'line-through',
//textDecorationStyle: 'solid'
}
});
export default Home;
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import BottomNavigator from './BottomNavigator';
import SideBar from './Screen/SideBar';
import Page1 from './Screen/Page1';
import UseContextExample from './Screen/UseContextExample';
import UseReducerExample from './Screen/UseReducerExample';
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => <SideBar {...props} />}>
<Drawer.Screen name="BottomNavigator" component={BottomNavigator} options={{ headerShown: false }} />
<Drawer.Screen name="Page1" component={Page1} options={{ headerShown: false }} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;