selfserve/clients/mobile/app/(tabs)/_layout.tsx at af4bf8c2b387fb3d7c198c641ef07c19bf202adf · GenerateNU/selfserve · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { Tabs } from "expo-router";
import React from "react";

import { HapticTab } from "@/components/haptic-tab";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useColorScheme } from "@/hooks/use-color-scheme";
import { View, Text } from "react-native";

type TabBarIconProps = {
  name: React.ComponentProps<typeof IconSymbol>["name"];
  focused: boolean;
  activeColor: string;
  highlightColor: string;
  label: string;
};

const TabBarIcon = ({ name, focused, activeColor, label }: TabBarIconProps) => (
  <View
    className={`rounded-xl px-3 py-1 items-center gap-1 min-w-20 ${focused ? "bg-card" : "bg-transparent"}`}
  >
    <IconSymbol size={22} name={name} color={activeColor} />
    <Text numberOfLines={1} className="text-xs font-medium text-primary">
      {label}
    </Text>
  </View>
);

const PlusButton = () => (
  <View className="bg-primary rounded-full w-14 h-14 items-center justify-center -mb-2">
    <IconSymbol size={22} name="plus" color={Colors["light"].background} />
  </View>
);

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const c = Colors[colorScheme ?? "light"];

  return (
    <Tabs
      screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarActiveTintColor: c.tabBarActive,
        tabBarInactiveTintColor: c.tabBarActive,
        tabBarItemStyle: {
          paddingVertical: 10,
        },
        tabBarStyle: {
          height: 70,
        },
      }}
    >
      <Tabs.Screen
        name="tasks"
        options={{
          title: "Tasks",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon
              name="checklist"
              focused={focused}
              activeColor={c.tabBarActive}
              highlightColor={c.tabBarHighlight}
              label="Tasks"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Floor",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon
              name="map"
              focused={focused}
              activeColor={c.tabBarActive}
              highlightColor={c.tabBarHighlight}
              label="Floor"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="index"
        options={{
          title: "",
          tabBarLabel: () => null,
          tabBarIcon: () => <PlusButton />,
        }}
      />
      <Tabs.Screen
        name="guests"
        options={{
          title: "Guest",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon
              name="suitcase.cart"
              focused={focused}
              activeColor={c.tabBarActive}
              highlightColor={c.tabBarHighlight}
              label="Guests"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon
              name="person.circle"
              focused={focused}
              activeColor={c.tabBarActive}
              highlightColor={c.tabBarHighlight}
              label="Profile"
            />
          ),
        }}
      />
    </Tabs>
  );
}