fix(android): add proper icons for native bottom tabs on Android

- Add react-native-bottom-tabs plugin to app.config.ts for Material 3 styling
- Install react-native-vector-icons for synchronous icon loading on Android
- Use Ionicons.getImageSourceSync() to pre-load Android tab bar icons
- iOS continues to use SF Symbols, Android now uses Ionicons
- Update tabBarIcon to return platform-appropriate icon format

Author: BillChirico

app.config.ts

@@ -159,6 +159,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       },
     ],
     '@react-native-firebase/app',
+    'react-native-bottom-tabs', // Material 3 styling for native Android bottom tabs
   ],
   experiments: {
     typedRoutes: true,

app/(tabs)/_layout.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { Tabs } from 'expo-router';
 import { Home, BookOpen, TrendingUp, CheckSquare, User } from 'lucide-react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 import { useTheme } from '@/contexts/ThemeContext';
 import type { SFSymbol } from 'sf-symbols-typescript';
 import WebTopNav from '@/components/navigation/WebTopNav';
@@ -15,52 +16,71 @@ const NativeTabs =
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   Platform.OS !== 'web' ? require('@/components/navigation/NativeBottomTabs').NativeTabs : null;
 
+// Pre-load Android icons using Ionicons (only on Android)
+// These are loaded synchronously to avoid flickering during navigation
+const androidIcons =
+  Platform.OS === 'android'
+    ? {
+        home: Ionicons.getImageSourceSync('home', 24),
+        book: Ionicons.getImageSourceSync('book', 24),
+        trending: Ionicons.getImageSourceSync('trending-up', 24),
+        tasks: Ionicons.getImageSourceSync('checkbox', 24),
+        profile: Ionicons.getImageSourceSync('person', 24),
+      }
+    : null;
+
 // =============================================================================
 // Types & Interfaces
 // =============================================================================
 
-/** Tab route configuration with SF Symbols and Lucide fallbacks */
+/** Tab route configuration with SF Symbols (iOS) and Ionicons (Android) */
 interface TabRoute {
   name: string;
   title: string;
   sfSymbol: SFSymbol;
+  androidIconKey: keyof NonNullable<typeof androidIcons>;
   icon: React.ComponentType<{ size?: number; color?: string }>;
 }
 
 // =============================================================================
 // Constants
 // =============================================================================
 
-/** Tab route configuration with SF Symbols and Lucide fallbacks */
+/** Tab route configuration with SF Symbols (iOS) and Ionicons (Android) */
 const tabRoutes: TabRoute[] = [
   {
     name: 'index',
     title: 'Home',
     sfSymbol: 'house.fill',
+    androidIconKey: 'home',
     icon: Home,
   },
   {
     name: 'steps',
     title: 'Steps',
     sfSymbol: 'book.fill',
+    androidIconKey: 'book',
     icon: BookOpen,
   },
   {
     name: 'journey',
     title: 'Journey',
     sfSymbol: 'chart.line.uptrend.xyaxis',
+    androidIconKey: 'trending',
     icon: TrendingUp,
   },
   {
     name: 'tasks',
     title: 'Tasks',
     sfSymbol: 'checklist',
+    androidIconKey: 'tasks',
     icon: CheckSquare,
   },
   {
     name: 'profile',
     title: 'Profile',
     sfSymbol: 'person.fill',
+    androidIconKey: 'profile',
     icon: User,
   },
 ];
@@ -127,7 +147,11 @@ export default function TabLayout(): React.ReactElement {
           name={route.name}
           options={{
             title: route.title,
-            tabBarIcon: () => ({ sfSymbol: route.sfSymbol }),
+            // iOS uses SF Symbols, Android uses pre-loaded Ionicons
+            tabBarIcon: () =>
+              Platform.OS === 'ios'
+                ? { sfSymbol: route.sfSymbol }
+                : androidIcons![route.androidIconKey],
           }}
         />
       ))}

package.json

@@ -79,6 +79,7 @@
     "react-native-screens": "~4.16.0",
     "react-native-svg": "^15.12.1",
     "react-native-url-polyfill": "^3.0.0",
+    "react-native-vector-icons": "^10.3.0",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.5.1",
     "sf-symbols-typescript": "^2.2.0"
@@ -87,6 +88,7 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.17",
+    "@types/react-native-vector-icons": "^6.4.18",
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^54.0.8",
     "eslint": "^9.25.0",