From 94fe9fcc7205e0debeb20d810aa0a6d8d74cf9cc Mon Sep 17 00:00:00 2001 From: Dave Pack Date: Tue, 17 Oct 2017 16:24:56 -0700 Subject: [PATCH] Fixes default drawerWidth to match Material UI patterns. (#2773) * Fixes default drawerWidth to match material ui patterns. Previously: calculated based on device width regardless of orientation and did not recalculate when orientation changed. Now: calculates based on minimum of device height/width, remains constant and guaranteed to always fit screen regardless of orientation. This is the expected behavior based on observing Google apps (e.g. Gmail). This is also better than recalculating on every orientation change, which would result in variable width drawers and awkward empty space when in landscape in most cases. * Remove console.log --- .../react-navigation/examples/NavigationPlayground/js/App.js | 3 +++ packages/react-navigation/src/navigators/DrawerNavigator.js | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js index 1efa26ae..d4b05ff8 100644 --- a/packages/react-navigation/examples/NavigationPlayground/js/App.js +++ b/packages/react-navigation/examples/NavigationPlayground/js/App.js @@ -1,6 +1,9 @@ /* @flow */ import React from 'react'; +import { ScreenOrientation } from 'expo'; + +ScreenOrientation.allow(ScreenOrientation.Orientation.ALL); import { Platform, diff --git a/packages/react-navigation/src/navigators/DrawerNavigator.js b/packages/react-navigation/src/navigators/DrawerNavigator.js index f6f9e1f9..012c5ece 100644 --- a/packages/react-navigation/src/navigators/DrawerNavigator.js +++ b/packages/react-navigation/src/navigators/DrawerNavigator.js @@ -23,13 +23,14 @@ export type DrawerNavigatorConfig = { } & NavigationTabRouterConfig & DrawerViewConfig; +const { height, width } = Dimensions.get('window'); + const DefaultDrawerConfig = { /* * Default drawer width is screen width - header width * https://material.io/guidelines/patterns/navigation-drawer.html */ - drawerWidth: - Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64), + drawerWidth: Math.min(height, width) - (Platform.OS === 'android' ? 56 : 64), contentComponent: DrawerItems, drawerPosition: 'left', drawerBackgroundColor: 'white',