Develop

app/(auth)/_layout.tsx

@@ -0,0 +1,6 @@
+import { Stack } from "expo-router";
+import "@/global.css";
+
+export default function RootLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

app/(auth)/sign-in.tsx

@@ -0,0 +1,18 @@
+import { Link } from "expo-router";
+import { Text, View } from "react-native";
+
+const SignIn = () => {
+  return (
+    <View className="flex-1 items-center justify-center">
+      <Text className="font-bold text-lg">SignIn</Text>
+      <Link
+        href="/(auth)/sign-up"
+        className="p-4 bg-primary rounded-lg mt-4 text-white"
+      >
+        Create Account
+      </Link>
+    </View>
+  );
+};
+
+export default SignIn;

app/(auth)/sign-up.tsx

@@ -0,0 +1,18 @@
+import { Link } from "expo-router";
+import { Text, View } from "react-native";
+
+const SignUp = () => {
+  return (
+    <View className="flex-1 items-center justify-center">
+      <Text className="font-bold text-lg">SignUp</Text>
+      <Link
+        href="/(auth)/sign-in"
+        className="p-4 bg-primary rounded-lg mt-4 text-white"
+      >
+        Sign In
+      </Link>
+    </View>
+  );
+};
+
+export default SignUp;

app/(tabs)/_layout.tsx

@@ -0,0 +1,66 @@
+import { tabs } from "@/constants/data";
+import { colors, components } from "@/constants/theme";
+import { clsx } from "clsx";
+import { Tabs } from "expo-router";
+import { Image, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const tabBar = components.tabBar;
+
+const TabIcon = ({ focused, icon }: TabIconProps) => {
+  return (
+    <View className="tabs-icon">
+      <View className={clsx("tabs-pill", focused && "tabs-active")}>
+        <Image source={icon} resizeMode="contain" className="tabs-glyph" />
+      </View>
+    </View>
+  );
+};
+
+/* This `TabLayout` component is creating a tab navigation layout using the `Tabs` component from Expo
+Router. Here's a breakdown of what it's doing: */
+const TabLayout = () => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          position: "absolute",
+          bottom: Math.max(insets.bottom, tabBar.horizontalInset),
+          height: tabBar.height,
+          marginHorizontal: tabBar.horizontalInset,
+          borderRadius: tabBar.radius,
+          backgroundColor: colors.primary,
+          borderTopWidth: 0,
+          elevation: 0,
+        },
+        tabBarItemStyle: {
+          paddingVertical: tabBar.height / 2 - tabBar.iconFrame / 1.6,
+        },
+        tabBarIconStyle: {
+          width: tabBar.iconFrame,
+          height: tabBar.iconFrame,
+          alignItems: "center",
+        },
+      }}
+    >
+      {tabs.map((tab) => (
+        <Tabs.Screen
+          key={tab.name}
+          name={tab.name}
+          options={{
+            title: tab.title,
+            tabBarIcon: ({ focused }) => (
+              <TabIcon focused={focused} icon={tab.icon} />
+            ),
+          }}
+        />
+      ))}
+    </Tabs>
+  );
+};
+
+export default TabLayout;

app/(tabs)/index.tsx

@@ -0,0 +1,52 @@
+import "@/global.css";
+import { Link } from "expo-router";
+import { styled } from "nativewind";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
+
+/* This component is responsible for rendering the UI of the application. Here's
+a breakdown of what the component is doing: */
+export default function App() {
+  return (
+    <SafeAreaView className="flex-1 bg-background p-5">
+      <Text className="text-xl font-bold text-success">
+        Welcome to Nativewind!
+      </Text>
+      <Link
+        href="/onboarding"
+        className="text-white mt-4 rounded-lg bg-primary p-4"
+      >
+        Go to Onboarding
+      </Link>
+      <Link
+        href="/(auth)/sign-in"
+        className="text-white mt-4 rounded-lg bg-primary p-4"
+      >
+        Go to Sign In
+      </Link>
+      <Link
+        href="/(auth)/sign-up"
+        className="text-white mt-4 rounded-lg bg-primary p-4"
+      >
+        Go to Sign Up
+      </Link>
+      <Link
+        href="/subscriptions/spotify"
+        className="text-white mt-4 rounded-lg bg-primary p-4"
+      >
+        Spotify Subscriptions
+      </Link>
+      <Link
+        href={{
+          pathname: "/subscriptions/[id]",
+          params: { id: "claude" },
+        }}
+        className="text-white mt-4 rounded-lg bg-primary p-4"
+      >
+        Claude Max Subscriptions
+      </Link>
+    </SafeAreaView>
+  );
+}

app/(tabs)/insights.tsx

@@ -0,0 +1,16 @@
+import { styled } from "nativewind";
+import React from "react";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
+
+const Insights = () => {
+  return (
+    <SafeAreaView className="flex-1 bg-background p-5">
+      <Text>Insights</Text>
+    </SafeAreaView>
+  );
+};
+
+export default Insights;

app/(tabs)/settings.tsx

@@ -0,0 +1,16 @@
+import { styled } from "nativewind";
+import React from "react";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
+
+const Settings = () => {
+  return (
+    <SafeAreaView className="flex-1 bg-background p-5">
+      <Text>Settings</Text>
+    </SafeAreaView>
+  );
+};
+
+export default Settings;

app/(tabs)/subscriptions.tsx

@@ -0,0 +1,16 @@
+import { styled } from "nativewind";
+import React from "react";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
+
+const Subscriptions = () => {
+  return (
+    <SafeAreaView className="flex-1 bg-background p-5">
+      <Text>Subscriptions</Text>
+    </SafeAreaView>
+  );
+};
+
+export default Subscriptions;

app/_layout.tsx

@@ -1,5 +1,17 @@
 import { Stack } from "expo-router";
+import "@/global.css";
+
+export const unstable_settings = {
+  initialRouteName: "(tabs)",
+};
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="(tabs)" />
+      <Stack.Screen name="(auth)" />
+      <Stack.Screen name="onboarding" />
+      <Stack.Screen name="subscriptions/[id]" />
+    </Stack>
+  );
 }

app/onboarding.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+const Onboarding = () => {
+  return (
+    <View>
+      <Text>Onboarding</Text>
+    </View>
+  );
+};
+
+export default Onboarding;

app/subscriptions/[id].tsx

@@ -0,0 +1,15 @@
+import { Link, useLocalSearchParams } from "expo-router";
+import React from "react";
+import { Text, View } from "react-native";
+
+const SubscriptionsDetails = () => {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  return (
+    <View>
+      <Text>Subscriptions Details: {id}</Text>
+      <Link href={"/"}>Go Back</Link>
+    </View>
+  );
+};
+
+export default SubscriptionsDetails;

assets/expo.icon/icon.json

@@ -0,0 +1,40 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.47843,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "image-name" : "expo-symbol 2.svg",
+          "name" : "expo-symbol 2",
+          "position" : {
+            "scale" : 1,
+            "translation-in-points" : [
+              1.1008400065293245e-05,
+              -16.046875
+            ]
+          }
+        },
+        {
+          "image-name" : "grid.png",
+          "name" : "grid"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

components/index.ts

@@ -0,0 +1 @@
+export {};