chore: publish

- @react-navigation/bottom-tabs@5.2.2 - @react-navigation/compat@5.1.4 - @react-navigation/core@5.2.3 - @react-navigation/drawer@5.3.2 - @react-navigation/material-bottom-tabs@5.1.4 - @react-navigation/material-top-tabs@5.1.4 - @react-navigation/native@5.1.1 - @react-navigation/stack@5.2.2
fix: fix closing stack using inverted gesture. (#7824 )
2026-01-13 22:42:25 +08:00 · 2020-03-19 19:48:37 +01:00 · 2020-03-19 19:32:29 +01:00 · 2020-03-19 19:03:23 +01:00 · 2020-03-19 18:51:16 +01:00 · 2020-03-19 18:39:04 +01:00
31 changed files with 408 additions and 159 deletions
--- a/example/src/index.tsx
+++ b/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: () => (
-                      <Appbar.Action
-                        color={theme.colors.text}
-                        icon="menu"
-                        onPress={() => navigation.toggleDrawer()}
-                      />
-                    ),
+                    headerLeft: isLargeScreen
+                      ? undefined
+                      : () => (
+                          <Appbar.Action
+                            color={theme.colors.text}
+                            icon="menu"
+                            onPress={() => navigation.toggleDrawer()}
+                          />
+                        ),
                  }}
                >
                  {({
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/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)


--- a/packages/bottom-tabs/package.json
+++ b/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",
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/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,
--- a/packages/bottom-tabs/src/views/ResourceSavingScene.tsx
+++ b/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
--- a/packages/compat/CHANGELOG.md
+++ b/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
--- a/packages/compat/package.json
+++ b/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"
--- a/packages/core/CHANGELOG.md
+++ b/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
--- a/packages/core/package.json
+++ b/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",
--- a/packages/core/src/BaseNavigationContainer.tsx
+++ b/packages/core/src/BaseNavigationContainer.tsx
@@ -136,6 +136,7 @@ const BaseNavigationContainer = React.forwardRef(
    );

    const { trackState, trackAction } = useDevTools({
+      enabled: false,
      name: '@react-navigation',
      reset,
      state,
--- a/packages/core/src/useDevTools.tsx
+++ b/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
--- a/packages/drawer/CHANGELOG.md
+++ b/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)


--- a/packages/drawer/package.json
+++ b/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",
--- a/packages/drawer/src/types.tsx
+++ b/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.
   */
--- a/packages/drawer/src/utils/DrawerOpenContext.tsx
+++ b/packages/drawer/src/utils/DrawerOpenContext.tsx
--- a/packages/drawer/src/utils/useIsDrawerOpen.tsx
+++ b/packages/drawer/src/utils/useIsDrawerOpen.tsx
@@ -1,44 +1,16 @@
 import * as React from 'react';
-import { useNavigation, ParamListBase } from '@react-navigation/native';
-import { DrawerNavigationProp } from '../types';
-import DrawerOpenContext from '../views/DrawerOpenContext';
+import DrawerOpenContext from './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>;
-
-  const drawerOpenContext = React.useContext(DrawerOpenContext);
-
-  // 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;
+  if (typeof isDrawerOpen !== 'boolean') {
+    throw new Error(
+      "Couldn't find a drawer. Is your component inside a drawer navigator?"
+    );
  }

  return isDrawerOpen;
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/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 }
-      : { left: 0, width: open ? undefined : swipeEdgeWidth };
+        { right: 0, width: isOpen ? 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}
-              importantForAccessibility={open ? 'no-hide-descendants' : 'auto'}
+              accessibilityElementsHidden={isOpen}
+              importantForAccessibility={
+                isOpen ? 'no-hide-descendants' : 'auto'
+              }
              style={styles.content}
            >
-              {renderSceneContent({ progress: this.progress })}
+              {renderSceneContent({ progress })}
            </View>
-            <TapGestureHandler
-              enabled={gestureEnabled}
-              onHandlerStateChange={this.handleTapStateChange}
-            >
-              <Overlay progress={this.progress} style={overlayStyle} />
-            </TapGestureHandler>
+            {// Disable overlay if sidebar is permanent
+            drawerType === 'permanent' ? null : (
+              <TapGestureHandler
+                enabled={gestureEnabled}
+                onHandlerStateChange={this.handleTapStateChange}
+              >
+                <Overlay progress={progress} style={overlayStyle} />
+              </TapGestureHandler>
+            )}
          </Animated.View>
-          <Animated.Code
-            exec={block([
-              onChange(this.manuallyTriggerSpring, [
-                cond(eq(this.manuallyTriggerSpring, TRUE), [
-                  set(this.nextIsOpen, FALSE),
-                  call([], () => (this.currentOpenValue = false)),
+          {drawerType === 'permanent' ? null : (
+            <Animated.Code
+              exec={block([
+                onChange(this.manuallyTriggerSpring, [
+                  cond(eq(this.manuallyTriggerSpring, TRUE), [
+                    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 },
-              {
-                transform: [{ translateX: drawerTranslateX }],
-                opacity: this.drawerOpacity,
-                zIndex: drawerType === 'back' ? -1 : 0,
-              },
+              drawerType === 'permanent'
+                ? // Without this, the `left`/`right` values don't get reset
+                  isRight
+                  ? { right: 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: this.progress })}
-            </DrawerOpenContext.Provider>
+            {renderDrawerContent({ progress })}
          </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,
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/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(() =>
-    getDefaultDrawerWidth(Dimensions.get('window'))
-  );
+  const [drawerWidth, setDrawerWidth] = React.useState(() => {
+    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
-            open={isDrawerOpen}
-            gestureEnabled={gestureEnabled}
-            onOpen={handleDrawerOpen}
-            onClose={handleDrawerClose}
-            onGestureRef={ref => {
-              // @ts-ignore
-              drawerGestureRef.current = ref;
-            }}
-            gestureHandlerProps={gestureHandlerProps}
-            drawerType={drawerType}
-            drawerPosition={drawerPosition}
-            sceneContainerStyle={[
-              { backgroundColor: colors.background },
-              sceneContainerStyle,
-            ]}
-            drawerStyle={[
-              { width: drawerWidth, backgroundColor: colors.card },
-              drawerStyle,
-            ]}
-            overlayStyle={{ backgroundColor: overlayColor }}
-            swipeEdgeWidth={edgeWidth}
-            swipeDistanceThreshold={minSwipeDistance}
-            hideStatusBar={hideStatusBar}
-            statusBarAnimation={statusBarAnimation}
-            renderDrawerContent={renderNavigationView}
-            renderSceneContent={renderContent}
-            keyboardDismissMode={keyboardDismissMode}
-            drawerPostion={drawerPosition}
-          />
+          <DrawerOpenContext.Provider value={isDrawerOpen}>
+            <Drawer
+              open={isDrawerOpen}
+              gestureEnabled={gestureEnabled}
+              onOpen={handleDrawerOpen}
+              onClose={handleDrawerClose}
+              onGestureRef={ref => {
+                // @ts-ignore
+                drawerGestureRef.current = ref;
+              }}
+              gestureHandlerProps={gestureHandlerProps}
+              drawerType={drawerType}
+              drawerPosition={drawerPosition}
+              sceneContainerStyle={[
+                { backgroundColor: colors.background },
+                sceneContainerStyle,
+              ]}
+              drawerStyle={[
+                { width: drawerWidth, backgroundColor: colors.card },
+                drawerType === 'permanent' &&
+                  (drawerPosition === 'left'
+                    ? {
+                        borderRightColor: colors.border,
+                        borderRightWidth: StyleSheet.hairlineWidth,
+                      }
+                    : {
+                        borderLeftColor: colors.border,
+                        borderLeftWidth: StyleSheet.hairlineWidth,
+                      }),
+                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>
--- a/packages/drawer/src/views/ResourceSavingScene.tsx
+++ b/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
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/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
--- a/packages/material-bottom-tabs/package.json
+++ b/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",
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/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
--- a/packages/material-top-tabs/package.json
+++ b/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",
--- a/packages/native/CHANGELOG.md
+++ b/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
--- a/packages/native/package.json
+++ b/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",
--- a/packages/native/src/theming/DefaultTheme.tsx
+++ b/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)',
  },
 };

--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,29 @@
 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/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)


--- a/packages/stack/package.json
+++ b/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.2",
  "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",
--- a/packages/stack/src/views/KeyboardManager.tsx
+++ b/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;
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -271,6 +271,14 @@ export default class Card extends React.Component<Props> {
          velocity = nativeEvent.velocityX;
        }

+        if (
+          gestureDirection === 'horizontal-inverted' ||
+          gestureDirection === 'vertical-inverted'
+        ) {
+          translation *= -1;
+          velocity *= -1;
+        }
+
        const closing =
          translation + velocity * gestureVelocityImpact > distance / 2
            ? velocity !== 0 || translation !== 0
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/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 = {
-    routes: [],
-    scenes: [],
-    gestures: {},
-    layout,
-    descriptors: this.props.descriptors,
-    // 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: {},
-  };
+  constructor(props: Props) {
+    super(props);
+
+    const { height = 0, width = 0 } = Dimensions.get('window');
+
+    this.state = {
+      routes: [],
+      scenes: [],
+      gestures: {},
+      layout: { height, width },
+      descriptors: this.props.descriptors,
+      // 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>
Author	SHA1	Message	Date
Satyajit Sahoo	bc9b044fb3	chore: publish - @react-navigation/bottom-tabs@5.2.2 - @react-navigation/compat@5.1.4 - @react-navigation/core@5.2.3 - @react-navigation/drawer@5.3.2 - @react-navigation/material-bottom-tabs@5.1.4 - @react-navigation/material-top-tabs@5.1.4 - @react-navigation/native@5.1.1 - @react-navigation/stack@5.2.2	2020-03-19 19:48:37 +01:00
Alexey Vlasenko	f24d3a3461	fix: fix closing stack using inverted gesture. (#7824 ) Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-03-19 19:32:29 +01:00
Satyajit Sahoo	3df65e2819	fix: initialize height and width to zero if undefined closes #6789	2020-03-19 19:03:23 +01:00
Satyajit Sahoo	5c4afc5cb4	fix: close drawer on pressing Esc on web closes #6745	2020-03-19 18:51:16 +01:00
Satyajit Sahoo	d5bb357053	chore: temporarily disables devtools until we add a public API closes #7726	2020-03-19 18:39:04 +01:00
Satyajit Sahoo	b1fe73097f	fix: only dismiss previously focused input on page change. closes #6918	2020-03-19 18:30:54 +01:00
Satyajit Sahoo	49f6fed6d3	fix: fix blank page if stack was inside display: none before	2020-03-19 18:11:55 +01:00
Satyajit Sahoo	b1a65fc73e	fix: don't use react-native-screens on web seems `react-native-screens` doesn't handle active screens properly and shows a blank page instead on web when a number is specified in the `active` prop. closes #7485	2020-03-19 17:28:35 +01:00
Noemi Rozpara	3ea8eec432	fix: fix permanent sidebar position (#7830 )	2020-03-19 11:44:13 +01:00
Satyajit Sahoo	00e0f05190	chore: publish - @react-navigation/drawer@5.3.1	2020-03-17 20:13:03 +01:00
Satyajit Sahoo	193c344ba5	refactor: fix useIsDrawerOpen hook	2020-03-17 19:22:12 +01:00
Satyajit Sahoo	358d9e9feb	chore: publish - @react-navigation/bottom-tabs@5.2.1 - @react-navigation/compat@5.1.3 - @react-navigation/drawer@5.3.0 - @react-navigation/material-bottom-tabs@5.1.3 - @react-navigation/material-top-tabs@5.1.3 - @react-navigation/native@5.1.0 - @react-navigation/stack@5.2.1	2020-03-17 14:37:21 +01:00
Satyajit Sahoo	6a5d0a035a	feat: add permanent drawer type (#7818 ) Co-authored-by: NoemiRozpara <nrozpara@gmail.com>	2020-03-17 14:11:00 +01:00