Add Categories tab

app/_layout.tsx

@@ -1,5 +1,3 @@
 import { Stack } from "expo-router/stack";
 
-export default function Layout() {
-  return <Stack />;
-}
+export default Stack;

app/accounts/[id]/_layout.tsx

@@ -0,0 +1,30 @@
+import { Stack, Tabs, useSearchParams } from "expo-router";
+import React from "react";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+
+export default function AccountLayout() {
+  const params = useSearchParams();
+  return (
+    <>
+      <Stack.Screen options={{ title: `${params.id}` }} />
+      <Tabs initialRouteName="transactions">
+        <Tabs.Screen
+          name="transactions"
+          options={{
+            headerShown: false,
+            tabBarIcon: () => <MaterialCommunityIcons name="cash" size={24} />,
+            tabBarLabel: "Transactions",
+          }}
+        />
+        <Tabs.Screen
+          name="categories"
+          options={{
+            headerShown: false,
+            tabBarIcon: () => <MaterialCommunityIcons name="shape" size={24} />,
+            tabBarLabel: "Categories",
+          }}
+        />
+      </Tabs>
+    </>
+  );
+}

app/accounts/[id]/categories.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Categories(): JSX.Element {
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Categories</Text>
+    </View>
+  );
+}

app/accounts/[id].tsx → app/accounts/[id]/transactions.tsx

@@ -1,4 +1,4 @@
-import { Stack, useSearchParams } from "expo-router";
+import { Stack, Tabs, useSearchParams } from "expo-router";
 import {
   addDoc,
   collection,
@@ -16,7 +16,7 @@ import {
   Provider,
   TextInput,
 } from "react-native-paper";
-import { db } from "../../firebase";
+import { db } from "../../../firebase";
 import {
   AccountEvent,
   createTransaction,
@@ -25,7 +25,7 @@ import {
   restoreTransactions,
   Transactions,
   updateTransaction,
-} from "../../lib/transactions";
+} from "../../../lib/transactions";
 
 // API
 
@@ -155,7 +155,7 @@ function EditTransactionDialog({
   );
 }
 
-export default function Account(): JSX.Element {
+export default function TransactionsRoot(): JSX.Element {
   const params = useSearchParams();
   const accountId = `${params.id}`;
   const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "^1.17.12",
     "expo": "~48.0.6",
     "expo-constants": "~14.2.1",