Implement custom tab bar and introduce core styling utilities

app/(tabs)/_layout.tsx

@@ -1,6 +1,72 @@
-import "@/global.css";
+import { tabs } from "@/constants/data";
+import clsx from "clsx";
 import { Tabs } from "expo-router";
+import { Image, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-export default function RootLayout() {
-  return <Tabs screenOptions={{ headerShown: false }} />;
-}
+import { COLORS, COMPONENTS } from "@/constants/theme";
+
+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>
+  );
+};
+
+const TabsLayout = () => {
+  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((item) => (
+        <Tabs.Screen
+          key={item.name}
+          name={item.name}
+          options={{
+            title: item.title,
+            tabBarIcon: ({ focused }) => (
+              <TabIcon focused={focused} icon={item.icon} />
+            ),
+          }}
+        />
+      ))}
+
+      <Tabs.Screen
+        name="subscriptions/[id]"
+        options={{
+          href: null,
+        }}
+      />
+    </Tabs>
+  );
+};
+
+export default TabsLayout;

app/(tabs)/index.tsx

@@ -1,10 +1,14 @@
 import "@/global.css";
 import { Link } from "expo-router";
-import { Text, View } from "react-native";
+import { styled } from "nativewind";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 export default function App() {
   return (
-    <View className="flex-1 items-center justify-center bg-background">
+    <SafeAreaView className="flex-1 bg-background p-5">
       <Text className="text-xl font-bold text-success">
         Welcome to Nativewind!
       </Text>
@@ -23,11 +27,11 @@ export default function App() {
 
       {/* Subscription Examples */}
       <Link
-        href="/subscriptions/claude-ai"
+        href={{ pathname: "/subscriptions/[id]", params: { id: "claude-ai" } }}
         className="bg-accent text-white text-xl p-3 rounded-md m-5"
       >
         Claude Max Subscription
       </Link>
-    </View>
+    </SafeAreaView>
   );
 }

app/(tabs)/insights.tsx

@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Insights = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Insights</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 

app/(tabs)/settings.tsx

@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Settings = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Settings</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 

app/(tabs)/subscriptions.tsx

@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Subscriptions = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Subscriptions</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 

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"
+  }
+}

constants/data.ts

@@ -0,0 +1,8 @@
+import icons from "./icons";
+
+export const tabs = [
+  { name: "index", title: "Home", icon: icons.home },
+  { name: "subscriptions", title: "Subscriptions", icon: icons.wallet },
+  { name: "insights", title: "Insights", icon: icons.activity },
+  { name: "settings", title: "Settings", icon: icons.setting },
+];

constants/icons.ts

@@ -0,0 +1,66 @@
+import activity from "@/assets/icons/activity.png";
+import add from "@/assets/icons/add.png";
+import adobe from "@/assets/icons/adobe.png";
+import back from "@/assets/icons/back.png";
+import canva from "@/assets/icons/canva.png";
+import claude from "@/assets/icons/claude.png";
+import dropbox from "@/assets/icons/dropbox.png";
+import figma from "@/assets/icons/figma.png";
+import github from "@/assets/icons/github.png";
+import home from "@/assets/icons/home.png";
+import logo from "@/assets/icons/logo.png";
+import medium from "@/assets/icons/medium.png";
+import menu from "@/assets/icons/menu.png";
+import netflix from "@/assets/icons/netflix.png";
+import notion from "@/assets/icons/notion.png";
+import openai from "@/assets/icons/openai.png";
+import plus from "@/assets/icons/plus.png";
+import setting from "@/assets/icons/setting.png";
+import spotify from "@/assets/icons/spotify.png";
+import wallet from "@/assets/icons/wallet.png";
+
+export {
+    activity,
+    add,
+    adobe,
+    back,
+    canva,
+    claude,
+    dropbox,
+    figma,
+    github,
+    home,
+    logo,
+    medium,
+    menu,
+    netflix,
+    notion,
+    openai,
+    plus,
+    setting,
+    spotify,
+    wallet
+};
+
+export default {
+  activity,
+  add,
+  adobe,
+  back,
+  canva,
+  claude,
+  dropbox,
+  figma,
+  github,
+  home,
+  logo,
+  medium,
+  menu,
+  netflix,
+  notion,
+  openai,
+  plus,
+  setting,
+  spotify,
+  wallet,
+};

constants/theme.ts

@@ -0,0 +1,52 @@
+
+export const COLORS = {
+  background: "#fff9e3",
+  foreground: "#081126",
+  card: "#fff8e7",
+  muted: "#f6eecf",
+  mutedForeground: "rgba(0, 0, 0, 0.6)",
+  primary: "#081126",
+  accent: "#ea7a53",
+  border: "rgba(0, 0, 0, 0.1)",
+  success: "#16a34a",
+  destructive: "#dc2626",
+  subscription: "#8fd1bd",
+} as const;
+
+export const SPACING = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  18: 72,
+  20: 80,
+  24: 96,
+  30: 120,
+} as const;
+
+export const COMPONENTS = {
+  tabBar: {
+    height: SPACING[18],
+    horizontalInset: SPACING[5],
+    radius: SPACING[8],
+    iconFrame: SPACING[12],
+    itemPaddingVertical: SPACING[2],
+  },
+} as const;
+
+export const theme = {
+  colors: COLORS,
+  spacing: SPACING,
+  components: COMPONENTS,
+} as const;

image.d.ts

@@ -0,0 +1,24 @@
+declare module "*.png" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.jpeg" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.gif" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: any;
+  export default value;
+}

package.json

@@ -15,6 +15,7 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "clsx": "^2.1.1",
     "expo": "~54.0.34",
     "expo-constants": "~18.0.13",
     "expo-font": "~14.0.11",