@sigmela/router 0.0.12 → 0.0.14

package/lib/module/Navigation.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import { ScreenStack, ScreenStackItem as RNNScreenStackItem } from 'react-native-screens';
-import { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 import { RenderTabBar } from "./TabBar/RenderTabBar.js";
 import { ScreenStackItem } from "./ScreenStackItem.js";
 import { RouterContext } from "./RouterContext.js";
 import { StyleSheet } from 'react-native';
+import { ScreenStackItem as RNNScreenStackItem, ScreenStack } from 'react-native-screens';
+import { useSyncExternalStore, memo, useCallback, useEffect, useState } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
@@ -50,19 +50,17 @@ export const Navigation = /*#__PURE__*/memo(({
         stackAnimation: rootTransition,
         children: /*#__PURE__*/_jsx(RenderTabBar, {
           tabBar: router.tabBar,
-          appearance: appearance?.tabBar
+          appearance: appearance
         })
       }), rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
         stackId: rootId,
         item: item,
         stackAnimation: rootTransition,
-        screenStyle: appearance?.screenStyle,
-        headerAppearance: appearance?.header
+        appearance: appearance
       }, item.key)), globalItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+        appearance: appearance,
         stackId: globalId,
-        item: item,
-        screenStyle: appearance?.screenStyle,
-        headerAppearance: appearance?.header
+        item: item
       }, item.key))]
     })
   });

package/lib/module/ScreenStackItem.js

@@ -9,7 +9,7 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
   item,
   stackId,
   stackAnimation,
-  screenStyle
+  appearance
 }) => {
   const router = useRouter();
   const onDismissed = () => {
@@ -32,22 +32,16 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
     header,
     ...screenProps
   } = item.options || {};
-  // Merge global header appearance with per-screen header options
-  // const mergedHeader = {
-  //   ...(headerAppearance ?? {}),
-  //   ...(header ?? {}),
-  // } as any;
-  // Hide header by default if not specified
-  const headerConfig = header ?? {
-    hidden: true
+  const headerConfig = {
+    ...header,
+    hidden: !header?.title || header?.hidden,
+    backgroundColor: appearance?.header?.backgroundColor ?? 'transparent'
   };
-
-  // console.log('headerConfig', headerAppearance, item.key);
   return /*#__PURE__*/_jsx(RNSScreenStackItem, {
     screenId: item.key,
     onDismissed: onDismissed,
     style: StyleSheet.absoluteFill,
-    contentStyle: screenStyle,
+    contentStyle: appearance?.screenStyle,
     headerConfig: headerConfig,
     ...screenProps,
     stackAnimation: stackAnimation ?? item.options?.stackAnimation,

package/lib/module/StackRenderer.js

@@ -7,7 +7,8 @@ import { useRouter } from "./RouterContext.js";
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StackRenderer = /*#__PURE__*/memo(({
-  stack
+  stack,
+  appearance
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
@@ -15,10 +16,11 @@ export const StackRenderer = /*#__PURE__*/memo(({
   const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
   const historyForThisStack = useSyncExternalStore(subscribe, get, get);
   return /*#__PURE__*/_jsx(ScreenStack, {
-    style: styles.flex,
+    style: [styles.flex, appearance?.screenStyle],
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
-      item: item,
-      stackId: stackId
+      appearance: appearance,
+      stackId: stackId,
+      item: item
     }, item.key))
   });
 });

package/lib/module/TabBar/RenderTabBar.js

@@ -45,7 +45,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     tabBarItemStyle,
     tintColor,
     backgroundColor
-  } = appearance ?? {};
+  } = appearance?.tabBar ?? {};
   useEffect(() => {
     router.ensureTabSeed(index);
   }, [index, router]);
@@ -113,6 +113,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
           isFocused: isFocused,
           ...mappedTabProps,
           children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
+            appearance: appearance,
             stack: stack
           }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
         }, tab.tabKey);

package/lib/typescript/src/Navigation.d.ts

@@ -1,5 +1,5 @@
-import { Router } from './Router';
 import type { NavigationAppearance } from './types';
+import { Router } from './Router';
 export interface NavigationProps {
     router: Router;
     appearance?: NavigationAppearance;

package/lib/typescript/src/ScreenStackItem.d.ts

@@ -1,11 +1,9 @@
 import type { HistoryItem, ScreenOptions, NavigationAppearance } from './types';
-import { type StyleProp, type ViewStyle } from 'react-native';
 interface ScreenStackItemProps {
     item: HistoryItem;
     stackId?: string;
     stackAnimation?: ScreenOptions['stackAnimation'];
-    screenStyle?: StyleProp<ViewStyle>;
-    headerAppearance?: NavigationAppearance['header'];
+    appearance?: NavigationAppearance;
 }
 export declare const ScreenStackItem: import("react").NamedExoticComponent<ScreenStackItemProps>;
 export {};

package/lib/typescript/src/StackRenderer.d.ts

@@ -1,6 +1,8 @@
+import type { NavigationAppearance } from './types';
 import { NavigationStack } from './NavigationStack';
 export interface StackRendererProps {
     stack: NavigationStack;
+    appearance?: NavigationAppearance;
 }
 export declare const StackRenderer: import("react").NamedExoticComponent<StackRendererProps>;
 //# sourceMappingURL=StackRenderer.d.ts.map

package/lib/typescript/src/TabBar/RenderTabBar.d.ts

@@ -2,7 +2,7 @@ import type { NavigationAppearance } from '../types';
 import type { TabBar } from './TabBar';
 export interface RenderTabBarProps {
     tabBar: TabBar;
-    appearance?: NavigationAppearance['tabBar'];
+    appearance?: NavigationAppearance;
 }
 export declare const RenderTabBar: import("react").NamedExoticComponent<RenderTabBarProps>;
 //# sourceMappingURL=RenderTabBar.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",