chore: publish

- @react-navigation/stack@5.2.3

example/src/index.tsx

@@ -6,6 +6,8 @@ import {
   Platform,
   StatusBar,
   I18nManager,
+  Dimensions,
+  ScaledSize,
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
@@ -196,10 +198,24 @@ export default function App() {
     };
   }, [theme.colors, theme.dark]);
 
+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+
+  React.useEffect(() => {
+    const onDimensionsChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
+
+    Dimensions.addEventListener('change', onDimensionsChange);
+
+    return () => Dimensions.removeEventListener('change', onDimensionsChange);
+  }, []);
+
   if (!isReady) {
     return null;
   }
 
+  const isLargeScreen = dimensions.width > 900;
+
   return (
     <PaperProvider theme={paperTheme}>
       {Platform.OS === 'ios' && (
@@ -216,7 +232,7 @@ export default function App() {
         }
         theme={theme}
       >
-        <Drawer.Navigator>
+        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
           <Drawer.Screen
             name="Root"
             options={{
@@ -240,13 +256,15 @@ export default function App() {
                   name="Home"
                   options={{
                     title: 'Examples',
-                    headerLeft: () => (
+                    headerLeft: isLargeScreen
-                      <Appbar.Action
+                      ? undefined
-                        color={theme.colors.text}
+                      : () => (
-                        icon="menu"
+                          <Appbar.Action
-                        onPress={() => navigation.toggleDrawer()}
+                            color={theme.colors.text}
-                      />
+                            icon="menu"
-                    ),
+                            onPress={() => navigation.toggleDrawer()}
+                          />
+                        ),
                   }}
                 >
                   {({

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.1...@react-navigation/bottom-tabs@5.2.2) (2020-03-19)
+
+
+### Bug Fixes
+
+* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/7485)
+* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6789)
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.0...@react-navigation/bottom-tabs@5.2.1) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)
 
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -51,7 +51,12 @@ export default function BottomTabBar({
 }: Props) {
   const { colors } = useTheme();
 
-  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+  const [dimensions, setDimensions] = React.useState(() => {
+    const { height = 0, width = 0 } = Dimensions.get('window');
+
+    return { height, width };
+  });
+
   const [layout, setLayout] = React.useState({
     height: 0,
     width: dimensions.width,

packages/bottom-tabs/src/views/ResourceSavingScene.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-
 // eslint-disable-next-line import/no-unresolved
 import { Screen, screensEnabled } from 'react-native-screens';
 
@@ -10,12 +9,14 @@ type Props = {
   style?: any;
 };
 
-const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    if (screensEnabled?.()) {
+    // react-native-screens is buggy on web
+    if (screensEnabled?.() && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
+
       // @ts-ignore
       return <Screen active={isVisible ? 1 : 0} {...rest} />;
     }
@@ -24,7 +25,13 @@ export default class ResourceSavingScene extends React.Component<Props> {
 
     return (
       <View
-        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
+        style={[
+          styles.container,
+          Platform.OS === 'web'
+            ? { display: isVisible ? 'flex' : 'none' }
+            : null,
+          style,
+        ]}
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused

packages/compat/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.3...@react-navigation/compat@5.1.4) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.2...@react-navigation/compat@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.1...@react-navigation/compat@5.1.2) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/react": "^16.9.23",
     "react": "~16.9.0",
     "typescript": "^3.7.5"

packages/core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.2...@react-navigation/core@5.2.3) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 ## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "keywords": [
     "react",
     "react-native",

packages/core/src/BaseNavigationContainer.tsx

@@ -136,6 +136,7 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     const { trackState, trackAction } = useDevTools({
+      enabled: false,
       name: '@react-navigation',
       reset,
       state,

packages/core/src/useDevTools.tsx

@@ -8,6 +8,7 @@ import {
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
 type Options = {
+  enabled: boolean;
   name: string;
   reset: (state: NavigationState) => void;
   state: State;
@@ -35,10 +36,11 @@ declare global {
   }
 }
 
-export default function useDevTools({ name, reset, state }: Options) {
+export default function useDevTools({ name, reset, state, enabled }: Options) {
   const devToolsRef = React.useRef<DevTools>();
 
   if (
+    enabled &&
     process.env.NODE_ENV !== 'production' &&
     global.__REDUX_DEVTOOLS_EXTENSION__ &&
     devToolsRef.current === undefined

packages/drawer/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.3.1...@react-navigation/drawer@5.3.2) (2020-03-19)
+
+
+### Bug Fixes
+
+* close drawer on pressing Esc on web ([5c4afc5](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/5c4afc5cb40c1206a9d8c40efe3cf947030da48e)), closes [#6745](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/6745)
+* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7485)
+* fix permanent sidebar position ([#7830](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7830)) ([3ea8eec](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/3ea8eec4324ea82f0ed427f4662e68e1115e60ab))
+* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/6789)
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.3.0...@react-navigation/drawer@5.3.1) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.2.0...@react-navigation/drawer@5.3.0) (2020-03-17)
+
+
+### Features
+
+* add permanent drawer type ([#7818](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7818)) ([6a5d0a0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/6a5d0a035afae60d91aef78401ec8826295746fe))
+
+
+
+
+
 # [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.1.1...@react-navigation/drawer@5.2.0) (2020-03-16)
 
 

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.2.0",
+  "version": "5.3.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "del-cli": "^3.0.0",

packages/drawer/src/types.tsx

@@ -27,8 +27,9 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * - `front`: Traditional drawer which covers the screen with a overlay behind it.
    * - `back`: The drawer is revealed behind the screen on swipe.
    * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+   * - `permanent`: A permanent drawer is shown as a sidebar.
    */
-  drawerType?: 'front' | 'back' | 'slide';
+  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
   /**
    * How far from the edge of the screen the swipe gesture should activate.
    */

packages/drawer/src/utils/useIsDrawerOpen.tsx

@@ -1,44 +1,16 @@
 import * as React from 'react';
-import { useNavigation, ParamListBase } from '@react-navigation/native';
+import DrawerOpenContext from './DrawerOpenContext';
-import { DrawerNavigationProp } from '../types';
-import DrawerOpenContext from '../views/DrawerOpenContext';
 
 /**
  * Hook to detect if the drawer is open in a parent navigator.
  */
 export default function useIsDrawerOpen() {
-  const navigation = useNavigation();
+  const isDrawerOpen = React.useContext(DrawerOpenContext);
 
-  let drawer = navigation as DrawerNavigationProp<ParamListBase>;
+  if (typeof isDrawerOpen !== 'boolean') {
-
+    throw new Error(
-  const drawerOpenContext = React.useContext(DrawerOpenContext);
+      "Couldn't find a drawer. Is your component inside a drawer navigator?"
-
+    );
-  // The screen might be inside another navigator such as stack nested in drawer
-  // We need to find the closest drawer navigator and add the listener there
-  while (drawer && drawer.dangerouslyGetState().type !== 'drawer') {
-    drawer = drawer.dangerouslyGetParent();
-  }
-
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(() =>
-    drawer
-      ? Boolean(
-          drawer.dangerouslyGetState().history.find(it => it.type === 'drawer')
-        )
-      : false
-  );
-
-  React.useEffect(() => {
-    const unsubscribe = drawer.addListener('state', e => {
-      setIsDrawerOpen(
-        Boolean(e.data.state.history.find(it => it.type === 'drawer'))
-      );
-    });
-
-    return unsubscribe;
-  }, [drawer, isDrawerOpen]);
-
-  if (drawerOpenContext !== null) {
-    return drawerOpenContext;
   }
 
   return isDrawerOpen;

packages/drawer/src/views/Drawer.tsx

@@ -18,7 +18,6 @@ import {
 } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import Overlay from './Overlay';
-import DrawerOpenContext from './DrawerOpenContext';
 
 const {
   Clock,
@@ -69,6 +68,8 @@ const SPRING_CONFIG = {
   restSpeedThreshold: 0.01,
 };
 
+const ANIMATED_ONE = new Animated.Value(1);
+
 type Binary = 0 | 1;
 
 type Renderer = (props: { progress: Animated.Node<number> }) => React.ReactNode;
@@ -80,7 +81,7 @@ type Props = {
   onGestureRef?: (ref: PanGestureHandler | null) => void;
   gestureEnabled: boolean;
   drawerPosition: 'left' | 'right';
-  drawerType: 'front' | 'back' | 'slide';
+  drawerType: 'front' | 'back' | 'slide' | 'permanent';
   keyboardDismissMode: 'none' | 'on-drag';
   swipeEdgeWidth: number;
   swipeDistanceThreshold?: number;
@@ -126,6 +127,12 @@ export default class DrawerView extends React.PureComponent<Props> {
     statusBarAnimation: 'slide',
   };
 
+  componentDidMount() {
+    if (Platform.OS === 'web') {
+      document?.body?.addEventListener?.('keyup', this.handleEscape);
+    }
+  }
+
   componentDidUpdate(prevProps: Props) {
     const {
       open,
@@ -181,8 +188,22 @@ export default class DrawerView extends React.PureComponent<Props> {
   componentWillUnmount() {
     this.toggleStatusBar(false);
     this.handleEndInteraction();
+
+    if (Platform.OS === 'web') {
+      document?.body?.removeEventListener?.('keyup', this.handleEscape);
+    }
   }
 
+  private handleEscape = (e: KeyboardEvent) => {
+    const { open, onClose } = this.props;
+
+    if (e.key === 'Escape') {
+      if (open) {
+        onClose();
+      }
+    }
+  };
+
   private handleEndInteraction = () => {
     if (this.interactionHandle !== undefined) {
       InteractionManager.clearInteractionHandle(this.interactionHandle);
@@ -545,6 +566,7 @@ export default class DrawerView extends React.PureComponent<Props> {
       gestureHandlerProps,
     } = this.props;
 
+    const isOpen = drawerType === 'permanent' ? true : open;
     const isRight = drawerPosition === 'right';
 
     const contentTranslateX = drawerType === 'front' ? 0 : this.translateX;
@@ -570,8 +592,10 @@ export default class DrawerView extends React.PureComponent<Props> {
     const hitSlop = isRight
       ? // Extend hitSlop to the side of the screen when drawer is closed
         // This lets the user drag the drawer from the side of the screen
-        { right: 0, width: open ? undefined : swipeEdgeWidth }
+        { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
-      : { left: 0, width: open ? undefined : swipeEdgeWidth };
+      : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
+
+    const progress = drawerType === 'permanent' ? ANIMATED_ONE : this.progress;
 
     return (
       <PanGestureHandler
@@ -581,64 +605,83 @@ export default class DrawerView extends React.PureComponent<Props> {
         onGestureEvent={this.handleGestureEvent}
         onHandlerStateChange={this.handleGestureStateChange}
         hitSlop={hitSlop}
-        enabled={gestureEnabled}
+        enabled={drawerType !== 'permanent' && gestureEnabled}
         {...gestureHandlerProps}
       >
         <Animated.View
           onLayout={this.handleContainerLayout}
-          style={styles.main}
+          style={[
+            styles.main,
+            {
+              flexDirection:
+                drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',
+            },
+          ]}
         >
           <Animated.View
             style={[
               styles.content,
-              {
+              drawerType !== 'permanent' && {
                 transform: [{ translateX: contentTranslateX }],
               },
               sceneContainerStyle as any,
             ]}
           >
             <View
-              accessibilityElementsHidden={open}
+              accessibilityElementsHidden={isOpen}
-              importantForAccessibility={open ? 'no-hide-descendants' : 'auto'}
+              importantForAccessibility={
+                isOpen ? 'no-hide-descendants' : 'auto'
+              }
               style={styles.content}
             >
-              {renderSceneContent({ progress: this.progress })}
+              {renderSceneContent({ progress })}
             </View>
-            <TapGestureHandler
+            {// Disable overlay if sidebar is permanent
-              enabled={gestureEnabled}
+            drawerType === 'permanent' ? null : (
-              onHandlerStateChange={this.handleTapStateChange}
+              <TapGestureHandler
-            >
+                enabled={gestureEnabled}
-              <Overlay progress={this.progress} style={overlayStyle} />
+                onHandlerStateChange={this.handleTapStateChange}
-            </TapGestureHandler>
+              >
+                <Overlay progress={progress} style={overlayStyle} />
+              </TapGestureHandler>
+            )}
           </Animated.View>
-          <Animated.Code
+          {drawerType === 'permanent' ? null : (
-            exec={block([
+            <Animated.Code
-              onChange(this.manuallyTriggerSpring, [
+              exec={block([
-                cond(eq(this.manuallyTriggerSpring, TRUE), [
+                onChange(this.manuallyTriggerSpring, [
-                  set(this.nextIsOpen, FALSE),
+                  cond(eq(this.manuallyTriggerSpring, TRUE), [
-                  call([], () => (this.currentOpenValue = false)),
+                    set(this.nextIsOpen, FALSE),
+                    call([], () => (this.currentOpenValue = false)),
+                  ]),
                 ]),
-              ]),
+              ])}
-            ])}
+            />
-          />
+          )}
           <Animated.View
-            accessibilityViewIsModal={open}
+            accessibilityViewIsModal={isOpen}
             removeClippedSubviews={Platform.OS !== 'ios'}
             onLayout={this.handleDrawerLayout}
             style={[
               styles.container,
-              isRight ? { right: offset } : { left: offset },
+              drawerType === 'permanent'
-              {
+                ? // Without this, the `left`/`right` values don't get reset
-                transform: [{ translateX: drawerTranslateX }],
+                  isRight
-                opacity: this.drawerOpacity,
+                  ? { right: 0 }
-                zIndex: drawerType === 'back' ? -1 : 0,
+                  : { left: 0 }
-              },
+                : [
+                    styles.nonPermanent,
+                    {
+                      transform: [{ translateX: drawerTranslateX }],
+                      opacity: this.drawerOpacity,
+                    },
+                    isRight ? { right: offset } : { left: offset },
+                    { zIndex: drawerType === 'back' ? -1 : 0 },
+                  ],
               drawerStyle as any,
             ]}
           >
-            <DrawerOpenContext.Provider value={open}>
+            {renderDrawerContent({ progress })}
-              {renderDrawerContent({ progress: this.progress })}
-            </DrawerOpenContext.Provider>
           </Animated.View>
         </Animated.View>
       </PanGestureHandler>
@@ -649,11 +692,13 @@ export default class DrawerView extends React.PureComponent<Props> {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
+    maxWidth: '100%',
+  },
+  nonPermanent: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     width: '80%',
-    maxWidth: '100%',
   },
   content: {
     flex: 1,

packages/drawer/src/views/DrawerView.tsx

@@ -32,6 +32,7 @@ import {
   DrawerNavigationHelpers,
   DrawerContentComponentProps,
 } from '../types';
+import DrawerOpenContext from '../utils/DrawerOpenContext';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 
 type Props = DrawerNavigationConfig & {
@@ -88,15 +89,17 @@ export default function DrawerView({
   sceneContainerStyle,
 }: Props) {
   const [loaded, setLoaded] = React.useState([state.index]);
-  const [drawerWidth, setDrawerWidth] = React.useState(() =>
+  const [drawerWidth, setDrawerWidth] = React.useState(() => {
-    getDefaultDrawerWidth(Dimensions.get('window'))
+    const { height = 0, width = 0 } = Dimensions.get('window');
-  );
+
+    return getDefaultDrawerWidth({ height, width });
+  });
 
   const drawerGestureRef = React.useRef<PanGestureHandler>(null);
 
   const { colors } = useTheme();
 
-  const isDrawerOpen = Boolean(state.history.find(it => it.type === 'drawer'));
+  const isDrawerOpen = state.history.some(it => it.type === 'drawer');
 
   const handleDrawerOpen = React.useCallback(() => {
     navigation.dispatch({
@@ -203,36 +206,48 @@ export default function DrawerView({
     <GestureHandlerWrapper style={styles.content}>
       <SafeAreaProviderCompat>
         <DrawerGestureContext.Provider value={drawerGestureRef}>
-          <Drawer
+          <DrawerOpenContext.Provider value={isDrawerOpen}>
-            open={isDrawerOpen}
+            <Drawer
-            gestureEnabled={gestureEnabled}
+              open={isDrawerOpen}
-            onOpen={handleDrawerOpen}
+              gestureEnabled={gestureEnabled}
-            onClose={handleDrawerClose}
+              onOpen={handleDrawerOpen}
-            onGestureRef={ref => {
+              onClose={handleDrawerClose}
-              // @ts-ignore
+              onGestureRef={ref => {
-              drawerGestureRef.current = ref;
+                // @ts-ignore
-            }}
+                drawerGestureRef.current = ref;
-            gestureHandlerProps={gestureHandlerProps}
+              }}
-            drawerType={drawerType}
+              gestureHandlerProps={gestureHandlerProps}
-            drawerPosition={drawerPosition}
+              drawerType={drawerType}
-            sceneContainerStyle={[
+              drawerPosition={drawerPosition}
-              { backgroundColor: colors.background },
+              sceneContainerStyle={[
-              sceneContainerStyle,
+                { backgroundColor: colors.background },
-            ]}
+                sceneContainerStyle,
-            drawerStyle={[
+              ]}
-              { width: drawerWidth, backgroundColor: colors.card },
+              drawerStyle={[
-              drawerStyle,
+                { width: drawerWidth, backgroundColor: colors.card },
-            ]}
+                drawerType === 'permanent' &&
-            overlayStyle={{ backgroundColor: overlayColor }}
+                  (drawerPosition === 'left'
-            swipeEdgeWidth={edgeWidth}
+                    ? {
-            swipeDistanceThreshold={minSwipeDistance}
+                        borderRightColor: colors.border,
-            hideStatusBar={hideStatusBar}
+                        borderRightWidth: StyleSheet.hairlineWidth,
-            statusBarAnimation={statusBarAnimation}
+                      }
-            renderDrawerContent={renderNavigationView}
+                    : {
-            renderSceneContent={renderContent}
+                        borderLeftColor: colors.border,
-            keyboardDismissMode={keyboardDismissMode}
+                        borderLeftWidth: StyleSheet.hairlineWidth,
-            drawerPostion={drawerPosition}
+                      }),
-          />
+                drawerStyle,
+              ]}
+              overlayStyle={{ backgroundColor: overlayColor }}
+              swipeEdgeWidth={edgeWidth}
+              swipeDistanceThreshold={minSwipeDistance}
+              hideStatusBar={hideStatusBar}
+              statusBarAnimation={statusBarAnimation}
+              renderDrawerContent={renderNavigationView}
+              renderSceneContent={renderContent}
+              keyboardDismissMode={keyboardDismissMode}
+              drawerPostion={drawerPosition}
+            />
+          </DrawerOpenContext.Provider>
         </DrawerGestureContext.Provider>
       </SafeAreaProviderCompat>
     </GestureHandlerWrapper>

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -9,21 +9,29 @@ type Props = {
   style?: any;
 };
 
-const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    if (screensEnabled?.()) {
+    // react-native-screens is buggy on web
+    if (screensEnabled?.() && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
       // @ts-ignore
       return <Screen active={isVisible ? 1 : 0} {...rest} />;
     }
+
     const { isVisible, children, style, ...rest } = this.props;
 
     return (
       <View
-        style={[styles.container, style]}
+        style={[
+          styles.container,
+          Platform.OS === 'web'
+            ? { display: isVisible ? 'flex' : 'none' }
+            : null,
+          style,
+        ]}
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.3...@react-navigation/material-bottom-tabs@5.1.4) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.2...@react-navigation/material-bottom-tabs@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.1...@react-navigation/material-bottom-tabs@5.1.2) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.3...@react-navigation/material-top-tabs@5.1.4) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.2...@react-navigation/material-top-tabs@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.1...@react-navigation/material-top-tabs@5.1.2) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "del-cli": "^3.0.0",

packages/native/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.0...@react-navigation/native@5.1.1) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.10...@react-navigation/native@5.1.0) (2020-03-17)
+
+
+### Features
+
+* add permanent drawer type ([#7818](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/7818)) ([6a5d0a0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/6a5d0a035afae60d91aef78401ec8826295746fe))
+
+
+
+
+
 ## [5.0.10](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.9...@react-navigation/native@5.0.10) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.0.10",
+  "version": "5.1.1",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -31,7 +31,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.2.2"
+    "@react-navigation/core": "^5.2.3"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",

packages/native/src/theming/DefaultTheme.tsx

@@ -7,7 +7,7 @@ const DefaultTheme: Theme = {
     background: 'rgb(242, 242, 242)',
     card: 'rgb(255, 255, 255)',
     text: 'rgb(28, 28, 30)',
-    border: 'rgb(199, 199, 204)',
+    border: 'rgb(224, 224, 224)',
   },
 };
 

packages/stack/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.2...@react-navigation/stack@5.2.3) (2020-03-19)
+
+
+### Bug Fixes
+
+* use the correct velocity value in closing animation ([#7836](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7836)) ([adbfedc](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/adbfedcd58d4e3d358c6c9691710bb8e4e0d8afb))
+
+
+
+
+
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.1...@react-navigation/stack@5.2.2) (2020-03-19)
+
+
+### Bug Fixes
+
+* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7485)
+* fix blank page if stack was inside display: none before ([49f6fed](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/49f6fed6d3da878e02a9fe9115c05bcf84e332bf))
+* fix closing stack using inverted gesture. ([#7824](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7824)) ([f24d3a3](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/f24d3a3461ee8a566c25ce7d13f31035b4be2691))
+* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6789)
+* only dismiss previously focused input on page change. closes [#6918](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6918) ([b1fe730](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/b1fe73097f3ad58d3ba4a8a9b875276d1d8d220c))
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.0...@react-navigation/stack@5.2.1) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 # [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.1.1...@react-navigation/stack@5.2.0) (2020-03-16)
 
 

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.2.0",
+  "version": "5.2.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
     "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/native": "^5.0.10",
+    "@react-navigation/native": "^5.1.1",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",

packages/stack/src/views/KeyboardManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextInput, Keyboard } from 'react-native';
+import { TextInput } from 'react-native';
 
 type Props = {
   enabled: boolean;
@@ -54,7 +54,11 @@ export default class KeyboardManager extends React.Component<Props> {
 
     this.clearKeyboardTimeout();
 
-    Keyboard.dismiss();
+    const input = this.previouslyFocusedTextInput;
+
+    if (input) {
+      TextInput.State.blurTextInput(input);
+    }
 
     // Cleanup the ID on successful page change
     this.previouslyFocusedTextInput = null;

packages/stack/src/views/Stack/Card.tsx

@@ -271,8 +271,15 @@ export default class Card extends React.Component<Props> {
           velocity = nativeEvent.velocityX;
         }
 
+        const gestureDirectionFactor =
+          gestureDirection === 'horizontal' || gestureDirection === 'vertical'
+            ? 1
+            : -1;
+
         const closing =
-          translation + velocity * gestureVelocityImpact > distance / 2
+          gestureDirectionFactor *
+            (translation + velocity * gestureVelocityImpact) >
+          distance / 2
             ? velocity !== 0 || translation !== 0
             : false;
 

packages/stack/src/views/Stack/CardStack.tsx

@@ -75,9 +75,6 @@ type State = {
 
 const EPSILON = 0.01;
 
-const dimensions = Dimensions.get('window');
-const layout = { width: dimensions.width, height: dimensions.height };
-
 const MaybeScreenContainer = ({
   enabled,
   ...rest
@@ -160,7 +157,16 @@ const getProgressFromGesture = (
   layout: Layout,
   descriptor?: StackDescriptor
 ) => {
-  const distance = getDistanceFromOptions(mode, layout, descriptor);
+  const distance = getDistanceFromOptions(
+    mode,
+    {
+      // Make sure that we have a non-zero distance, otherwise there will be incorrect progress
+      // This causes blank screen on web if it was previously inside container with display: none
+      width: Math.max(1, layout.width),
+      height: Math.max(1, layout.height),
+    },
+    descriptor
+  );
 
   if (distance > 0) {
     return gesture.interpolate({
@@ -290,19 +296,25 @@ export default class CardStack extends React.Component<Props, State> {
     };
   }
 
-  state: State = {
+  constructor(props: Props) {
-    routes: [],
+    super(props);
-    scenes: [],
+
-    gestures: {},
+    const { height = 0, width = 0 } = Dimensions.get('window');
-    layout,
+
-    descriptors: this.props.descriptors,
+    this.state = {
-    // Used when card's header is null and mode is float to make transition
+      routes: [],
-    // between screens with headers and those without headers smooth.
+      scenes: [],
-    // This is not a great heuristic here. We don't know synchronously
+      gestures: {},
-    // on mount what the header height is so we have just used the most
+      layout: { height, width },
-    // common cases here.
+      descriptors: this.props.descriptors,
-    headerHeights: {},
+      // Used when card's header is null and mode is float to make transition
-  };
+      // between screens with headers and those without headers smooth.
+      // This is not a great heuristic here. We don't know synchronously
+      // on mount what the header height is so we have just used the most
+      // common cases here.
+      headerHeights: {},
+    };
+  }
 
   private handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
@@ -401,9 +413,9 @@ export default class CardStack extends React.Component<Props, State> {
       left = insets.left,
     } = focusedOptions.safeAreaInsets || {};
 
-    // Screens is buggy on iOS, so we don't enable it there
+    // Screens is buggy on iOS and web, so we only enable it on Android
     // For modals, usually we want the screen underneath to be visible, so also disable it there
-    const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
+    const isScreensEnabled = Platform.OS === 'android' && mode !== 'modal';
 
     return (
       <React.Fragment>