apps/mobile/app/dashboard/(tabs)/_layout.tsx


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

import React from "react";
import {
  Icon,
  Label,
  NativeTabs,
  VectorIcon,
} from "expo-router/unstable-native-tabs";
import { useColorScheme } from "@/lib/useColorScheme";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";

export default function TabLayout() {
  const { colors } = useColorScheme();
  return (
    <NativeTabs backgroundColor={colors.grey6} minimizeBehavior="onScrollDown">
      <NativeTabs.Trigger name="(home)">
        <Icon
          sf="house.fill"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="home" />
          }
        />
        <Label>Home</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(lists)">
        <Icon
          sf="list.clipboard.fill"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="clipboard-list" />
          }
        />
        <Label>Lists</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(tags)">
        <Icon
          sf="tag.fill"
          androidSrc={<VectorIcon family={MaterialCommunityIcons} name="tag" />}
        />
        <Label>Tags</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(highlights)">
        <Icon
          sf="highlighter"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="marker" />
          }
        />
        <Label>Highlights</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(settings)">
        <Icon
          sf="gearshape.fill"
          androidSrc={<VectorIcon family={MaterialCommunityIcons} name="cog" />}
        />
        <Label>Settings</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}