@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

package/src/templates/mobile/ui-auth-payments/template/app/(tabs)/_layout.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tabs } from 'expo-router';
+import { useAuth } from '@digilogiclabs/saas-factory-auth/native';
+import { Redirect } from 'expo-router';
+
+// UI Components - Updated for v0.22.0
+import { 
+  BottomTabBar,
+  PageTransition,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  Home, 
+  User, 
+  Settings, 
+  CreditCard, 
+  BarChart3,
+  ShoppingBag 
+} from 'react-native-heroicons/outline';
+import { 
+  Home as HomeSolid, 
+  User as UserSolid, 
+  Settings as SettingsSolid, 
+  CreditCard as CreditCardSolid,
+  BarChart3 as BarChart3Solid,
+  ShoppingBag as ShoppingBagSolid
+} from 'react-native-heroicons/solid';
+
+// Tab configuration for BottomTabBar
+const tabConfig = [
+  {
+    id: 'index',
+    label: 'Home',
+    icon: Home,
+    activeIcon: HomeSolid,
+    route: '/dashboard'
+  },
+  {
+    id: 'orders',
+    label: 'Orders',
+    icon: ShoppingBag,
+    activeIcon: ShoppingBagSolid,
+    route: '/orders'
+  },
+  {
+    id: 'analytics',
+    label: 'Analytics',
+    icon: BarChart3,
+    activeIcon: BarChart3Solid,
+    route: '/analytics'
+  },
+  {
+    id: 'billing',
+    label: 'Billing',
+    icon: CreditCard,
+    activeIcon: CreditCardSolid,
+    route: '/billing'
+  },
+  {
+    id: 'profile',
+    label: 'Profile',
+    icon: User,
+    activeIcon: UserSolid,
+    route: '/profile'
+  }
+];
+
+export default function TabLayout() {
+  const { user, loading } = useAuth();
+  const { colors } = useTheme();
+
+  // Show loading state while checking authentication
+  if (loading) {
+    return null; // or a loading component
+  }
+
+  // Redirect to auth if user is not authenticated
+  if (!user) {
+    return <Redirect href="/auth/login" />;
+  }
+
+  return (
+    <PageTransition type="slide" direction="horizontal">
+      <View style={{ flex: 1 }}>
+        <Tabs
+          screenOptions={{
+            headerShown: false,
+            tabBarStyle: { display: 'none' } // Hide default tab bar since we use BottomTabBar
+          }}
+        >
+          <Tabs.Screen
+            name="index"
+            options={{
+              title: 'Dashboard',
+            }}
+          />
+          <Tabs.Screen
+            name="orders"
+            options={{
+              title: 'Orders',
+            }}
+          />
+          <Tabs.Screen
+            name="analytics"
+            options={{
+              title: 'Analytics',
+            }}
+          />
+          <Tabs.Screen
+            name="billing"
+            options={{
+              title: 'Billing',
+            }}
+          />
+          <Tabs.Screen
+            name="profile"
+            options={{
+              title: 'Profile',
+            }}
+          />
+        </Tabs>
+        
+        {/* Enhanced BottomTabBar from v0.22.0 */}
+        <BottomTabBar
+          tabs={tabConfig}
+          activeTabId="index" // This should be dynamic based on current route
+          onTabPress={(tabId) => {
+            // Handle tab navigation
+            console.log('Tab pressed:', tabId);
+          }}
+          style={{
+            position: 'absolute',
+            bottom: 16,
+            left: 16,
+            right: 16,
+            borderRadius: 24,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 8 },
+            shadowOpacity: 0.12,
+            shadowRadius: 24,
+            elevation: 12,
+          }}
+          variant="floating"
+          showLabels={true}
+          hapticFeedback={true}
+        />
+      </View>
+    </PageTransition>
+  );
+}