@idealyst/navigation 1.0.65 → 1.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -38,8 +38,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.65",
-    "@idealyst/theme": "^1.0.65",
+    "@idealyst/components": "^1.0.67",
+    "@idealyst/theme": "^1.0.67",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",

package/src/examples/CustomTabLayout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Button, View, Text } from "@idealyst/components";
-import { TabLayoutProps } from "src/routing";
+import { Button, View, Text, Pressable } from "@idealyst/components";
+import { RouteParam, TabBarScreenOptions, TabLayoutProps } from "src/routing";
 
 export default function CustomTabLayout({
     routes,
@@ -9,7 +9,7 @@ export default function CustomTabLayout({
     onNavigate,
     currentPath
 }: TabLayoutProps) {
-
+    console.log(routes)
     return (
         <View>
             <View>
@@ -25,14 +25,12 @@ export default function CustomTabLayout({
             </View>
             <View style={{ flexDirection: 'row' }}>
                 {routes.map(route => (
-                    <Button
-                        variant={currentPath === route.fullPath ? 'contained' : 'outlined'}
+                    <TabButton
                         key={route.path}
-                        onPress={() => onNavigate(route.path)}
-                        style={{ margin: 4 }}
-                    >
-                        {route.fullPath === '/' ? 'Home' : route.fullPath}
-                    </Button>
+                        route={route}
+                        onNavigate={onNavigate}
+                        currentPath={currentPath}
+                    />
                 ))}
             </View>
             <View>
@@ -41,4 +39,26 @@ export default function CustomTabLayout({
         </View>
     )
 
+}
+
+type TabButtonProps = {
+    route: RouteParam<TabBarScreenOptions>
+    onNavigate: (path: string) => void
+    currentPath: string
+}
+
+function TabButton({route, onNavigate, currentPath}: TabButtonProps) {
+    if (route.type !== 'screen') return null
+    return (
+        <Pressable
+        key={route.path}
+        onPress={() => onNavigate(route.path)}
+        style={{ margin: 4 }}
+    >
+        {route.options?.tabBarIcon?.({ size: 20, color: currentPath === route.path ? 'blue' : 'black' })}
+        <Text style={{ color: currentPath === route.fullPath ? 'blue' : 'black' }}>
+            {route.fullPath === '/' ? 'Home' : route.fullPath}
+        </Text>
+    </Pressable>
+    )
 }

package/src/examples/ExampleTabRouter.tsx

@@ -5,6 +5,7 @@ import { UnistylesRuntime } from 'react-native-unistyles';
 import { NavigatorParam, RouteParam } from '../routing';
 import { useNavigator } from '../context';
 import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
+import CustomTabLayout from './CustomTabLayout';
 
 const HomeTabScreen = () => {
     const navigator = useNavigator();
@@ -195,6 +196,7 @@ const ThemeTabScreen = () => (
 const TabRouter: NavigatorParam = {
     path: "/",
     layout: 'tab',
+    layoutComponent: CustomTabLayout,
     routes: [
         {
             path: '/',

package/src/routing/router.native.tsx

@@ -13,7 +13,7 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
     const NavigatorType = getNavigatorType(params);
     return () => (
-        <NavigatorType.Navigator options={{
+        <NavigatorType.Navigator screenOptions={{
             headerShown: params.options?.headerShown
         }}>
             {params.routes.map((child) => buildScreen(child, NavigatorType))}

package/src/routing/types.ts

@@ -15,10 +15,7 @@ export type TabBarScreenOptions = {
     /**
      * Icon component for tab/drawer navigation (React.ComponentType, React.ReactElement, function, or string)
      */
-    tabBarIcon?: React.ComponentType<{ focused: boolean; color: string; size: number }> 
-                | React.ReactElement 
-                | ((props: { focused: boolean; color: string; size: string }) => React.ReactElement)
-                | string;
+    tabBarIcon?: ((props: { focused: boolean; color: string; size: string | number }) => React.ReactElement)
     
     /**
      * Label for tab/drawer navigation