@dark-engine/native-navigation - npm Package Compare versions

Comparing version 0.18.1 to 0.18.2

dist/cjs/history/history.js

@@ -12,3 +12,2 @@ 'use strict';
   page;
-  fromUserEvent = false;
   params = {};
@@ -31,10 +30,2 @@ dispose = null;
     } else {
-      const handleBack = e => {
-        if (this.fromUserEvent) {
-          this.fromUserEvent = false;
-          return;
-        }
-        e.isBackNavigation && this.back(false);
-      };
-      this.page.on(NAVIGATED_FROM_EVENT, handleBack);
       this.dispose = () => {
@@ -44,3 +35,2 @@ this.subscribers.clear();
         this.cursor = -1;
-        this.page.off(NAVIGATED_FROM_EVENT, handleBack);
       };
@@ -109,3 +99,2 @@ }
     const cursor = this.cursor;
-    this.fromUserEvent = sync;
     this.cursor -= 1;
@@ -129,5 +118,4 @@ if (this.params[pathname]) {
 })((HistoryAction = exports.HistoryAction || (exports.HistoryAction = {})));
-const NAVIGATED_FROM_EVENT = 'navigatedFrom';
 const createNavigationHistory = (root, frame, page) => new NavigationHistory(root, frame, page);
 exports.createNavigationHistory = createNavigationHistory;
 //# sourceMappingURL=history.js.map

dist/cjs/navigation-container/navigation-container.js

@@ -88,20 +88,6 @@ 'use strict';
       const hasActionBar = (0, core_2.detectIsFunction)(renderActionBar);
-      const renderAndroid = () => {
-        return (0, core_2.h)(
-          core_2.Fragment,
-          null,
-          (0, core_2.h)(
-            'frame',
-            null,
-            (0, core_2.h)('page', { actionBarHidden: !hasActionBar }, hasActionBar && renderActionBar(pathname), slot),
-          ),
-          (0, core_2.h)(
-            'frame',
-            { ref: frameRef, hidden: true },
-            (0, core_2.h)('page', { ref: pageRef, actionBarHidden: true }),
-          ),
-        );
-      };
-      const renderIOS = () => {
-        return (0, core_2.h)(
+      return (0, core_2.h)(
+        NavigationContext.Provider,
+        { value: contextValue },
+        (0, core_2.h)(
           'frame',
@@ -112,20 +98,11 @@ null,
             { actionBarHidden: !hasActionBar },
-            hasActionBar && renderActionBar(pathname),
-            (0, core_2.h)(
-              'stack-layout',
-              null,
-              (0, core_2.h)(
-                'frame',
-                { ref: frameRef, hidden: true },
-                (0, core_2.h)('page', { ref: pageRef, actionBarHidden: true }),
-              ),
-              slot,
-            ),
+            hasActionBar && renderActionBar({ pathname, goBack: back }),
+            slot,
           ),
-        );
-      };
-      return (0, core_2.h)(
-        NavigationContext.Provider,
-        { value: contextValue },
-        core_1.isAndroid ? renderAndroid() : renderIOS(),
+        ),
+        (0, core_2.h)(
+          'frame',
+          { ref: frameRef, hidden: true },
+          (0, core_2.h)('page', { ref: pageRef, actionBarHidden: true }),
+        ),
       );
@@ -132,0 +109,0 @@ },

dist/cjs/stack-navigator/stack-navigator.js

@@ -33,7 +33,7 @@ 'use strict';
         const targetTo = matchRef(scope.refsMap, transition.to);
-        const size = getMeasuredSizeInDPI(rootRef.current);
+        const size = rootRef.current.getActualSize();
         const animation = createAnimation({ targetFrom, targetTo, transition, size });
         setTimeout(() => {
           animation.play().then(() => {
-            targetFrom.opacity = 1;
+            targetFrom.opacity = 0;
             targetFrom.translateX = 0;
@@ -44,2 +44,5 @@ targetFrom.hidden = true;
             targetTo.hidden = false;
+            setTimeout(() => {
+              targetFrom.opacity = 1;
+            });
           });
@@ -49,8 +52,3 @@ });
       (0, core_2.useEffect)(() => {
-        const syncNavigation = pathname => {
-          if ((0, core_2.detectIsFunction)(onNavigate)) {
-            const idx = (0, utils_1.getMatchedIdx)(pathnames, pathname);
-            onNavigate(pathname, idx);
-          }
-        };
+        const syncNavigation = pathname => (0, core_2.detectIsFunction)(onNavigate) && onNavigate(pathname);
         syncNavigation(pathname);
@@ -60,5 +58,3 @@ const unsubscribe = subscribe(pathname => syncNavigation(pathname));
       }, []);
-      (0, core_2.useImperativeHandle)(ref, () => ({
-        getPathnameByIdx: idx => pathnames[idx],
-      }));
+      (0, core_2.useImperativeHandle)(ref, () => ({}));
       return (0, core_2.h)(
@@ -245,10 +241,3 @@ 'absolute-layout',
 }
-function getMeasuredSizeInDPI(view) {
-  return {
-    width: view.getMeasuredWidth() / SCALE_FACTOR,
-    height: view.getMeasuredHeight() / SCALE_FACTOR,
-  };
-}
-const SCALE_FACTOR = core_1.Screen.mainScreen.scale;
 const FULL = '100%';
 //# sourceMappingURL=stack-navigator.js.map

dist/cjs/tab-navigator/tab-navigator.js

 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 exports.TabNavigator = void 0;
-const core_1 = require('@dark-engine/core');
+const core_1 = require('@nativescript/core');
+const core_2 = require('@dark-engine/core');
 const stack_navigator_1 = require('../stack-navigator');
 const navigation_container_1 = require('../navigation-container');
-const Navigator = (0, core_1.createComponent)(
-  ({ slot }) => {
-    const { push } = (0, navigation_container_1.useNavigationContext)();
-    const navRef = (0, core_1.useRef)(null);
-    const [idx, setIdx] = (0, core_1.useState)(0);
-    const update = (0, core_1.useUpdate)();
-    const contextValue = (0, core_1.useMemo)(() => ({ descriptorsMap: {} }), []);
+const utils_1 = require('../utils');
+const Navigator = (0, core_2.createComponent)(
+  ({ bottomNavigationOptions, slot }) => {
+    const navRef = (0, core_2.useRef)(null);
+    const layoutRef = (0, core_2.useRef)(null);
+    const bottomRef = (0, core_2.useRef)(null);
+    const update = (0, core_2.useUpdate)();
+    const {
+      height = 64,
+      borderRadius = 10,
+      shift = 4,
+      compensate = 0,
+      backgroundColor = '#000a12',
+      opacity = 1,
+      padding = 8,
+      activeTabColor = '#e91e63',
+      tabColor = '#fff',
+    } = bottomNavigationOptions || {};
+    const contextValue = (0, core_2.useMemo)(
+      () => ({ descriptorsMap: {}, count: slot.length, activeTabColor, tabColor }),
+      [],
+    );
     const { descriptorsMap } = contextValue;
-    (0, core_1.useLayoutEffect)(() => update(), []);
-    const handleIdxChange = (0, core_1.useEvent)(e => {
-      const nextIdx = Number(e.sourceEvent.value);
-      if (nextIdx !== idx) {
-        const pathname = navRef.current.getPathnameByIdx(nextIdx);
-        push(pathname, { animated: true });
-      }
+    (0, core_2.useLayoutEffect)(() => update(), []);
+    const handleLayoutChange = (0, core_2.useEvent)(() => {
+      const bottomNavigation = bottomRef.current;
+      const size = layoutRef.current.getActualSize();
+      setTimeout(() => {
+        bottomNavigation.top = size.height - height - (shift + compensate);
+        bottomNavigation.left = shift;
+        bottomNavigation.width = size.width - 2 * shift;
+        bottomNavigation.height = height;
+        bottomNavigation.borderRadius = borderRadius;
+      });
     });
-    const handleNavigate = (0, core_1.useEvent)((_, idx) => setIdx(idx));
+    const handleTap = (0, core_2.useEvent)(() => {});
     const descriptorKeys = Object.keys(descriptorsMap);
-    return (0, core_1.h)(
+    return (0, core_2.h)(
       TabNavigatorContext.Provider,
       { value: contextValue },
-      (0, core_1.h)(
-        'grid-layout',
-        { columns: '*', rows: 'auto, *' },
-        (0, core_1.h)(
+      (0, core_2.h)(
+        'absolute-layout',
+        { ref: layoutRef, onLayoutChanged: handleLayoutChange },
+        (0, core_2.h)(
           'stack-layout',
-          { col: 1, row: 1, marginBottom: 50 },
+          { width: '100%', height: '100%' },
           descriptorKeys.length > 0 &&
-            (0, core_1.h)(
+            (0, core_2.h)(
               stack_navigator_1.StackNavigator.Root,
-              { ref: navRef, onNavigate: handleNavigate },
+              { ref: navRef },
               descriptorKeys.map(key => {
                 const { component, slot } = descriptorsMap[key];
-                return (0, core_1.h)(
+                return (0, core_2.h)(
                   stack_navigator_1.StackNavigator.Screen,
@@ -48,5 +68,14 @@ { key: key, name: key, component: component },
         ),
-        (0, core_1.h)(
-          'tab-view',
-          { col: 1, row: 2, androidTabsPosition: 'bottom', selectedIndex: idx, onSelectedIndexChange: handleIdxChange },
+        (0, core_2.h)(
+          'flexbox-layout',
+          {
+            ref: bottomRef,
+            backgroundColor: backgroundColor,
+            opacity: opacity,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingLeft: padding,
+            paddingRight: padding,
+            onTap: handleTap,
+          },
           slot,
@@ -59,25 +88,41 @@ ),
 );
-const Screen = (0, core_1.createComponent)(
-  ({ name, component, title, iconSource, class: className, slot }) => {
-    const value = useTabNavigatorContext();
-    value.descriptorsMap[name] = {
-      name,
-      component,
-      slot,
-    };
-    return (0, core_1.h)(
-      'tab-view-item',
-      { title: title || name, iconSource: iconSource, class: className, canBeLoaded: true },
-      (0, core_1.h)('label', { text: '' }),
+const Screen = (0, core_2.createComponent)(
+  ({ name, component, renderTab, slot }) => {
+    const { push, pathname: currentPathname } = (0, navigation_container_1.useNavigationContext)();
+    const { descriptorsMap, count, activeTabColor, tabColor } = useTabNavigatorContext();
+    const { prefix } = (0, stack_navigator_1.useScreenNavigatorContext)();
+    const pathname = (0, utils_1.createPathname)(name, prefix);
+    const isActive = (0, utils_1.detectIsMatch)(currentPathname, pathname);
+    const width = 100 / count;
+    const handleTap = (0, core_2.useEvent)(() => push(pathname, { animated: true }));
+    descriptorsMap[name] = { name, component, slot };
+    return (0, core_2.h)(
+      'stack-layout',
+      { accessibilityRole: core_1.AccessibilityRole.Button, width: `${width}%`, onTap: handleTap },
+      (0, core_2.h)(
+        'flexbox-layout',
+        {
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: isActive ? activeTabColor : tabColor,
+        },
+        renderTab(name, isActive),
+      ),
     );
   },
-  { displayName: 'TabNavigator.Screen' },
+  {
+    displayName: 'TabNavigator.Screen',
+    defaultProps: {
+      renderTab: name => (0, core_2.h)('label', null, name),
+    },
+  },
 );
-const TabNavigatorContext = (0, core_1.createContext)(null);
+const TabNavigatorContext = (0, core_2.createContext)(null);
 function useTabNavigatorContext() {
-  const value = (0, core_1.useContext)(TabNavigatorContext);
+  const value = (0, core_2.useContext)(TabNavigatorContext);
   return value;
 }
 const TabNavigator = {
-  Root: (0, core_1.memo)(Navigator),
+  Root: (0, core_2.memo)(Navigator),
   Screen,
@@ -84,0 +129,0 @@ };

dist/cjs/utils/utils.js

 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.detectIsVisited =
-  exports.getMatchedIdx =
+exports.detectIsMatch =
+  exports.detectIsVisited =
   exports.getSegments =
@@ -31,6 +31,2 @@ exports.prependSlash =
 exports.getSegments = getSegments;
-function getMatchedIdx(pathnames, pathname) {
-  return pathnames.findIndex(x => pathname.indexOf(x) !== -1);
-}
-exports.getMatchedIdx = getMatchedIdx;
 function detectIsVisited(map, pathname) {
@@ -40,3 +36,3 @@ for (const key of Object.keys(map)) {
     const target = key.length < pathname.length ? key : pathname;
-    if (source.indexOf(target) !== -1) return true;
+    if (detectIsMatch(source, target)) return true;
   }
@@ -46,2 +42,7 @@ return false;
 exports.detectIsVisited = detectIsVisited;
+function detectIsMatch(currentPathname, pathname) {
+  const isMatch = currentPathname.indexOf(pathname) !== -1;
+  return isMatch;
+}
+exports.detectIsMatch = detectIsMatch;
 //# sourceMappingURL=utils.js.map

dist/esm/history/history.js

@@ -9,3 +9,2 @@ import { isAndroid, AndroidApplication } from '@nativescript/core';
   page;
-  fromUserEvent = false;
   params = {};
@@ -28,10 +27,2 @@ dispose = null;
     } else {
-      const handleBack = e => {
-        if (this.fromUserEvent) {
-          this.fromUserEvent = false;
-          return;
-        }
-        e.isBackNavigation && this.back(false);
-      };
-      this.page.on(NAVIGATED_FROM_EVENT, handleBack);
       this.dispose = () => {
@@ -41,3 +32,2 @@ this.subscribers.clear();
         this.cursor = -1;
-        this.page.off(NAVIGATED_FROM_EVENT, handleBack);
       };
@@ -106,3 +96,2 @@ }
     const cursor = this.cursor;
-    this.fromUserEvent = sync;
     this.cursor -= 1;
@@ -125,5 +114,4 @@ if (this.params[pathname]) {
 })(HistoryAction || (HistoryAction = {}));
-const NAVIGATED_FROM_EVENT = 'navigatedFrom';
 const createNavigationHistory = (root, frame, page) => new NavigationHistory(root, frame, page);
 export { NavigationHistory, createNavigationHistory };
 //# sourceMappingURL=history.js.map

dist/esm/navigation-container/navigation-container.js

@@ -1,5 +0,4 @@
-import { CoreTypes, isAndroid } from '@nativescript/core';
+import { CoreTypes } from '@nativescript/core';
 import {
   h,
-  Fragment,
   createComponent,
@@ -101,16 +100,6 @@ forwardRef,
       const hasActionBar = detectIsFunction(renderActionBar);
-      const renderAndroid = () => {
-        return h(
-          Fragment,
-          null,
-          h(
-            'frame',
-            null,
-            h('page', { actionBarHidden: !hasActionBar }, hasActionBar && renderActionBar(pathname), slot),
-          ),
-          h('frame', { ref: frameRef, hidden: true }, h('page', { ref: pageRef, actionBarHidden: true })),
-        );
-      };
-      const renderIOS = () => {
-        return h(
+      return h(
+        NavigationContext.Provider,
+        { value: contextValue },
+        h(
           'frame',
@@ -121,13 +110,8 @@ null,
             { actionBarHidden: !hasActionBar },
-            hasActionBar && renderActionBar(pathname),
-            h(
-              'stack-layout',
-              null,
-              h('frame', { ref: frameRef, hidden: true }, h('page', { ref: pageRef, actionBarHidden: true })),
-              slot,
-            ),
+            hasActionBar && renderActionBar({ pathname, goBack: back }),
+            slot,
           ),
-        );
-      };
-      return h(NavigationContext.Provider, { value: contextValue }, isAndroid ? renderAndroid() : renderIOS());
+        ),
+        h('frame', { ref: frameRef, hidden: true }, h('page', { ref: pageRef, actionBarHidden: true })),
+      );
     },
@@ -134,0 +118,0 @@ { displayName: 'NavigationContainer' },

dist/esm/stack-navigator/stack-navigator.js

@@ -1,2 +0,2 @@
-import { Screen as DeviceScreen, Animation, CoreTypes } from '@nativescript/core';
+import { Animation, CoreTypes } from '@nativescript/core';
 import {
@@ -17,3 +17,3 @@ h,
 import { SLASH, TransitionName } from '../constants';
-import { createPathname, getMatchedIdx, getSegments, detectIsVisited } from '../utils';
+import { createPathname, getSegments, detectIsVisited } from '../utils';
 import { useNavigationContext } from '../navigation-container';
@@ -41,7 +41,7 @@ const visitedMap = {};
         const targetTo = matchRef(scope.refsMap, transition.to);
-        const size = getMeasuredSizeInDPI(rootRef.current);
+        const size = rootRef.current.getActualSize();
         const animation = createAnimation({ targetFrom, targetTo, transition, size });
         setTimeout(() => {
           animation.play().then(() => {
-            targetFrom.opacity = 1;
+            targetFrom.opacity = 0;
             targetFrom.translateX = 0;
@@ -52,2 +52,5 @@ targetFrom.hidden = true;
             targetTo.hidden = false;
+            setTimeout(() => {
+              targetFrom.opacity = 1;
+            });
           });
@@ -57,8 +60,3 @@ });
       useEffect(() => {
-        const syncNavigation = pathname => {
-          if (detectIsFunction(onNavigate)) {
-            const idx = getMatchedIdx(pathnames, pathname);
-            onNavigate(pathname, idx);
-          }
-        };
+        const syncNavigation = pathname => detectIsFunction(onNavigate) && onNavigate(pathname);
         syncNavigation(pathname);
@@ -68,5 +66,3 @@ const unsubscribe = subscribe(pathname => syncNavigation(pathname));
       }, []);
-      useImperativeHandle(ref, () => ({
-        getPathnameByIdx: idx => pathnames[idx],
-      }));
+      useImperativeHandle(ref, () => ({}));
       return h(
@@ -247,11 +243,4 @@ 'absolute-layout',
 }
-function getMeasuredSizeInDPI(view) {
-  return {
-    width: view.getMeasuredWidth() / SCALE_FACTOR,
-    height: view.getMeasuredHeight() / SCALE_FACTOR,
-  };
-}
-const SCALE_FACTOR = DeviceScreen.mainScreen.scale;
 const FULL = '100%';
 export { StackNavigator, useScreenNavigatorContext };
 //# sourceMappingURL=stack-navigator.js.map

dist/esm/tab-navigator/tab-navigator.js

@@ -0,1 +1,2 @@
+import { AccessibilityRole } from '@nativescript/core';
 import {
@@ -5,3 +6,2 @@ h,
   createContext,
-  useState,
   useUpdate,
@@ -15,21 +15,37 @@ useMemo,
 } from '@dark-engine/core';
-import { StackNavigator } from '../stack-navigator';
+import { StackNavigator, useScreenNavigatorContext } from '../stack-navigator';
 import { useNavigationContext } from '../navigation-container';
+import { createPathname, detectIsMatch } from '../utils';
 const Navigator = createComponent(
-  ({ slot }) => {
-    const { push } = useNavigationContext();
+  ({ bottomNavigationOptions, slot }) => {
     const navRef = useRef(null);
-    const [idx, setIdx] = useState(0);
+    const layoutRef = useRef(null);
+    const bottomRef = useRef(null);
     const update = useUpdate();
-    const contextValue = useMemo(() => ({ descriptorsMap: {} }), []);
+    const {
+      height = 64,
+      borderRadius = 10,
+      shift = 4,
+      compensate = 0,
+      backgroundColor = '#000a12',
+      opacity = 1,
+      padding = 8,
+      activeTabColor = '#e91e63',
+      tabColor = '#fff',
+    } = bottomNavigationOptions || {};
+    const contextValue = useMemo(() => ({ descriptorsMap: {}, count: slot.length, activeTabColor, tabColor }), []);
     const { descriptorsMap } = contextValue;
     useLayoutEffect(() => update(), []);
-    const handleIdxChange = useEvent(e => {
-      const nextIdx = Number(e.sourceEvent.value);
-      if (nextIdx !== idx) {
-        const pathname = navRef.current.getPathnameByIdx(nextIdx);
-        push(pathname, { animated: true });
-      }
+    const handleLayoutChange = useEvent(() => {
+      const bottomNavigation = bottomRef.current;
+      const size = layoutRef.current.getActualSize();
+      setTimeout(() => {
+        bottomNavigation.top = size.height - height - (shift + compensate);
+        bottomNavigation.left = shift;
+        bottomNavigation.width = size.width - 2 * shift;
+        bottomNavigation.height = height;
+        bottomNavigation.borderRadius = borderRadius;
+      });
     });
-    const handleNavigate = useEvent((_, idx) => setIdx(idx));
+    const handleTap = useEvent(() => {});
     const descriptorKeys = Object.keys(descriptorsMap);
@@ -40,11 +56,11 @@ return h(
       h(
-        'grid-layout',
-        { columns: '*', rows: 'auto, *' },
+        'absolute-layout',
+        { ref: layoutRef, onLayoutChanged: handleLayoutChange },
         h(
           'stack-layout',
-          { col: 1, row: 1, marginBottom: 50 },
+          { width: '100%', height: '100%' },
           descriptorKeys.length > 0 &&
             h(
               StackNavigator.Root,
-              { ref: navRef, onNavigate: handleNavigate },
+              { ref: navRef },
               descriptorKeys.map(key => {
@@ -57,4 +73,13 @@ const { component, slot } = descriptorsMap[key];
         h(
-          'tab-view',
-          { col: 1, row: 2, androidTabsPosition: 'bottom', selectedIndex: idx, onSelectedIndexChange: handleIdxChange },
+          'flexbox-layout',
+          {
+            ref: bottomRef,
+            backgroundColor: backgroundColor,
+            opacity: opacity,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingLeft: padding,
+            paddingRight: padding,
+            onTap: handleTap,
+          },
           slot,
@@ -68,16 +93,32 @@ ),
 const Screen = createComponent(
-  ({ name, component, title, iconSource, class: className, slot }) => {
-    const value = useTabNavigatorContext();
-    value.descriptorsMap[name] = {
-      name,
-      component,
-      slot,
-    };
+  ({ name, component, renderTab, slot }) => {
+    const { push, pathname: currentPathname } = useNavigationContext();
+    const { descriptorsMap, count, activeTabColor, tabColor } = useTabNavigatorContext();
+    const { prefix } = useScreenNavigatorContext();
+    const pathname = createPathname(name, prefix);
+    const isActive = detectIsMatch(currentPathname, pathname);
+    const width = 100 / count;
+    const handleTap = useEvent(() => push(pathname, { animated: true }));
+    descriptorsMap[name] = { name, component, slot };
     return h(
-      'tab-view-item',
-      { title: title || name, iconSource: iconSource, class: className, canBeLoaded: true },
-      h('label', { text: '' }),
+      'stack-layout',
+      { accessibilityRole: AccessibilityRole.Button, width: `${width}%`, onTap: handleTap },
+      h(
+        'flexbox-layout',
+        {
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: isActive ? activeTabColor : tabColor,
+        },
+        renderTab(name, isActive),
+      ),
     );
   },
-  { displayName: 'TabNavigator.Screen' },
+  {
+    displayName: 'TabNavigator.Screen',
+    defaultProps: {
+      renderTab: name => h('label', null, name),
+    },
+  },
 );
@@ -84,0 +125,0 @@ const TabNavigatorContext = createContext(null);

dist/esm/utils/utils.js

@@ -16,5 +16,2 @@ import { SLASH } from '../constants';
 }
-function getMatchedIdx(pathnames, pathname) {
-  return pathnames.findIndex(x => pathname.indexOf(x) !== -1);
-}
 function detectIsVisited(map, pathname) {
@@ -24,7 +21,11 @@ for (const key of Object.keys(map)) {
     const target = key.length < pathname.length ? key : pathname;
-    if (source.indexOf(target) !== -1) return true;
+    if (detectIsMatch(source, target)) return true;
   }
   return false;
 }
-export { createPathname, normalizePathname, prependSlash, getSegments, getMatchedIdx, detectIsVisited };
+function detectIsMatch(currentPathname, pathname) {
+  const isMatch = currentPathname.indexOf(pathname) !== -1;
+  return isMatch;
+}
+export { createPathname, normalizePathname, prependSlash, getSegments, detectIsVisited, detectIsMatch };
 //# sourceMappingURL=utils.js.map

dist/types/history/history.d.ts

@@ -9,3 +9,2 @@ import { Frame, Page } from '@nativescript/core';
   private page;
-  private fromUserEvent;
   private params;
@@ -12,0 +11,0 @@ dispose: () => void;

dist/types/index.d.ts

 export { TransitionName } from './constants';
-export { type NavigationOptions, NavigationContainer } from './navigation-container';
+export { type NavigationOptions, type RenderActionBarOptions, NavigationContainer } from './navigation-container';
 export * from './stack-navigator';
@@ -4,0 +4,0 @@ export * from './tab-navigator';

dist/types/navigation-container/navigation-container.d.ts

@@ -7,3 +7,3 @@ import { type DarkElement } from '@dark-engine/core';
   defaultPathname: string;
-  renderActionBar?: (pathname: string) => DarkElement;
+  renderActionBar?: (options: RenderActionBarOptions) => DarkElement;
   onNavigate?: (pathname: string) => void;
@@ -15,2 +15,6 @@ };
 };
+export type RenderActionBarOptions = {
+  pathname: string;
+  goBack: () => void;
+};
 declare const NavigationContainer: (
@@ -17,0 +21,0 @@ props: NavigationContainerProps & import('@dark-engine/core').RefProps<any>,

dist/types/stack-navigator/stack-navigator.d.ts

@@ -10,7 +10,5 @@ import {
   slot: Array<ScreenComponent>;
-  onNavigate?: (pathname: string, idx: number) => void;
+  onNavigate?: (pathname: string) => void;
 };
-export type StackNavigatorRef = {
-  getPathnameByIdx: (idx: number) => string;
-};
+export type StackNavigatorRef = {};
 export type StackScreenProps = {
@@ -17,0 +15,0 @@ name: string;

dist/types/tab-navigator/tab-navigator.d.ts

@@ -1,11 +0,21 @@
-import { type ComponentFactory, type StandardComponentProps } from '@dark-engine/core';
+import { type DarkElement, type ComponentFactory, type StandardComponentProps } from '@dark-engine/core';
 import { type StackScreenProps } from '../stack-navigator';
 type TabNavigatorProps = {
+  bottomNavigationOptions?: Partial<BottomNavigationOptions>;
   slot: Array<ComponentFactory<TabScreenProps & StandardComponentProps>>;
 };
 type TabScreenProps = {
-  title?: string;
-  iconSource?: string;
-  class?: string;
+  renderTab?: (name: string, isActive: boolean) => DarkElement;
 } & StackScreenProps;
+type BottomNavigationOptions = {
+  height: number;
+  borderRadius: number;
+  shift: number;
+  compensate: number;
+  backgroundColor: string;
+  opacity: number;
+  padding: number;
+  activeTabColor: string;
+  tabColor: string;
+};
 declare const TabNavigator: {
@@ -21,5 +31,3 @@ Root: import('@dark-engine/core').Component<
     props?: {
-      title?: string;
-      iconSource?: string;
-      class?: string;
+      renderTab?: (name: string, isActive: boolean) => DarkElement;
     } & StackScreenProps &
@@ -32,5 +40,3 @@ import('@dark-engine/core').KeyProps &
     {
-      title?: string;
-      iconSource?: string;
-      class?: string;
+      renderTab?: (name: string, isActive: boolean) => DarkElement;
     } & StackScreenProps &
@@ -37,0 +43,0 @@ import('@dark-engine/core').KeyProps &

dist/types/utils/utils.d.ts

@@ -5,4 +5,4 @@ declare const createPathname: (name: string, prefix: string) => string;
 declare function getSegments(pathname: string, prefix: string): string[];
-declare function getMatchedIdx(pathnames: Array<string>, pathname: string): number;
 declare function detectIsVisited(map: Record<string, boolean>, pathname: string): boolean;
-export { createPathname, normalizePathname, prependSlash, getSegments, getMatchedIdx, detectIsVisited };
+declare function detectIsMatch(currentPathname: string, pathname: string): boolean;
+export { createPathname, normalizePathname, prependSlash, getSegments, detectIsVisited, detectIsMatch };

package.json

 {
   "name": "@dark-engine/native-navigation",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Dark navigation for NativeScript platform",
@@ -5,0 +5,0 @@ "author": "AlexPlex",

README.md

@@ -56,2 +56,3 @@ # @dark-engine/native-navigation 🌖
 ```
+
 ## Navigation via `TabNavigator`
@@ -80,2 +81,4 @@
 
+You can customize Tabs view through passing `bottomNavigationOptions` to `TabNavigator.Root` and `renderTab` to `TabNavigator.Screen` to render tabs with icons.
+
 ## Navigating to screen
@@ -82,0 +85,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123160

increased by0.63%

Lines of code

1836

increased by0.55%

Number of lines in readme file

175

increased by1.74%

No dependency changes