@react-navigation/elements - npm Package Compare versions

Comparing version 2.0.0-alpha.12 to 2.0.0-alpha.13

lib/commonjs/getDefaultSidebarWidth.js

@@ -7,21 +7,19 @@ "use strict";
 exports.getDefaultSidebarWidth = void 0;
-var _reactNative = require("react-native");
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
 const getDefaultSidebarWidth = _ref => {
   let {
-    height,
     width
   } = _ref;
-  /*
-   * Default sidebar width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
    */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = _reactNative.Platform.OS === 'ios' ? isLandscape ? 32 : 44 : 56;
-  const maxWidth = isTablet ? 320 : 280;
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
+  return DEFAULT_DRAWER_WIDTH;
 };
 exports.getDefaultSidebarWidth = getDefaultSidebarWidth;
 //# sourceMappingURL=getDefaultSidebarWidth.js.map

lib/module/getDefaultSidebarWidth.js

@@ -1,19 +0,17 @@
-import { Platform } from 'react-native';
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
 export const getDefaultSidebarWidth = _ref => {
   let {
-    height,
     width
   } = _ref;
-  /*
-   * Default sidebar width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
    */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = Platform.OS === 'ios' ? isLandscape ? 32 : 44 : 56;
-  const maxWidth = isTablet ? 320 : 280;
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
+  return DEFAULT_DRAWER_WIDTH;
 };
 //# sourceMappingURL=getDefaultSidebarWidth.js.map

lib/typescript/src/getDefaultSidebarWidth.d.ts

@@ -1,5 +0,4 @@
-export declare const getDefaultSidebarWidth: ({ height, width, }: {
-    height: number;
+export declare const getDefaultSidebarWidth: ({ width }: {
     width: number;
 }) => number;
 //# sourceMappingURL=getDefaultSidebarWidth.d.ts.map

package.json

 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "keywords": [
@@ -44,3 +44,3 @@ "react-native",
     "@react-native-masked-view/masked-view": "0.3.0",
-    "@react-navigation/native": "^7.0.0-alpha.14",
+    "@react-navigation/native": "^7.0.0-alpha.15",
     "@testing-library/react-native": "^12.4.3",
@@ -55,3 +55,3 @@ "@types/react": "~18.2.45",
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.14",
+    "@react-navigation/native": "^7.0.0-alpha.15",
     "react": ">= 18.2.0",
@@ -75,3 +75,3 @@ "react-native": ">= 0.72.0",
   },
-  "gitHead": "d0b5489cb3eb8092d05b8d058ba5774d0538cec6"
+  "gitHead": "b1ed6b0d299189c62f0dc8d7171c243adc674a30"
 }

No alert changes

Worsened metrics

Total package byte prevSize

305175

decreased by-0.38%

Lines of code

4813

decreased by-0.25%

No dependency changes