-
Notifications
You must be signed in to change notification settings - Fork 0
/
BottomTabs.js
92 lines (85 loc) · 2.63 KB
/
BottomTabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Entypo } from "@expo/vector-icons";
import HomeScreen from "./screens/HomeScreen";
import OrderListScreen from "./screens/OrderListScreen";
import ProfileScreen from "./screens/ProfileScreen";
import { Badge } from "@rneui/themed";
import { useSelector } from "react-redux";
import { View } from "react-native";
import { useUser } from "./appwrite/UserContext";
import { Image } from "react-native";
const Tab = createBottomTabNavigator();
const BottomTabs = () => {
const orders = useSelector((state) => state.cart.restaurants);
const ordersCount = Object.keys(orders).length;
const { user } = useUser();
const { avatar } = user;
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === "Home") {
iconName = "home";
} else if (route.name === "Orders") {
iconName = "shopping-bag";
} else if (route.name === "Profile") {
iconName = "user";
}
if (route.name === "Orders") {
return (
<View>
<Entypo name={iconName} size={size} color={color} />
{ordersCount > 0 && (
<Badge
status="success"
value={ordersCount}
containerStyle={{
position: "absolute",
top: 0.1,
right: 0.1,
}}
/>
)}
</View>
);
}
if (route.name === "Profile") {
return user ? (
<Image
source={{
uri: avatar,
}}
style={{ borderRadius: "100%", height: size, width: size }}
/>
) : (
<Entypo name={iconName} size={size} color={color} />
);
}
return <Entypo name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: "#4ade80",
tabBarInactiveTintColor: "gray",
tabBarStyle: [{ display: "flex" }, null],
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen
name="Orders"
component={OrderListScreen}
options={{
headerShown: false,
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Tab.Navigator>
);
};
export default BottomTabs;