react-native-drawer-layout 2.0.0 → 3.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Native Community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,57 +1,257 @@
-## react-native-drawer-layout [![CircleCI](https://circleci.com/gh/react-native-community/react-native-drawer-layout/tree/master.svg?style=svg)](https://circleci.com/gh/react-native-community/react-native-drawer-layout/tree/master) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+# React Native Drawer Layout
 
-A platform-agnostic drawer layout. It uses a pure JavaScript implementation on every platform to ensure consistency. We try to keep it up to date with the implementation of [DrawerLayoutAndroid](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#content) and add features we consider necessary as well.
+A cross-platform Drawer component for React Native. Implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
 
-## Add it to your project
+Note that swipe gestures are only supported on iOS and Android.
 
-1. Run `npm install react-native-drawer-layout --save`
-2. Import the component by using one of these:
-  - `var DrawerLayout = require('react-native-drawer-layout').default;`
-  - `import DrawerLayout from 'react-native-drawer-layout';`
-3. Follow the [DrawerLayoutAndroid](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#content) docs -- the API is the same. Everything that differs is explained below
+## Installation
 
-## API
-This includes the differences between our implementation and the official one [DrawerLayoutAndroid](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#content). Every breaking change is (hopefully) hidden behind a feature flag, so that this implementation may also be used as polyfill.
+Open a Terminal in the project root and run:
 
-## Demo
+```sh
+npm install react-native-drawer-layout
+```
 
-![](https://raw.githubusercontent.com/react-native-community/react-native-drawer-layout/master/example.gif)
+Then, you need to install and configure the libraries that are required by the drawer:
 
-## Examples
+1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
 
-- [Normal usage](https://github.com/DanielMSchmidt/DrawerLayoutExample)
-- [Heavy Load](https://github.com/DanielMSchmidt/DrawerLayoutHeavyLoadExample)
+   If you have a Expo managed project, in your project directory, run:
 
-To run the demo, please run `npm install` in the `DrawerLayoutExample/` directory and start the demo up from there like any other React Native application.
+   ```sh
+   npx expo install react-native-gesture-handler react-native-reanimated
+   ```
 
-## Support
+   If you have a bare React Native project, in your project directory, run:
 
-| React Native Version      | react-native-drawer-layout Version    |
-|---------------------------|---------------------------------------|
-| >= 11 & < 23              | < 1.0                                 |
-| >= 23                     | >= 1.0  && < 2.0                      |
-| >= 35                     | >= 2.0                                |
+   ```bash npm2yarn
+   npm install react-native-gesture-handler react-native-reanimated
+   ```
 
-If you experience any further restrictions with other versions, please let us know.
+   The Drawer supports both Reanimated 1 and Reanimated 2. If you want to use Reanimated 2, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
 
-## Restrictions
+2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
 
-- Currently, there is no support for setting the status bar color in iOS. If you know any workaround, we would be glad to see an idea or a PR.
-- The overlay to close the drawer has a `zIndex` of 1000 so setting a higher `zIndex` somewhere else may lead to inconsistencies.
+   ```js
+   import 'react-native-gesture-handler';
+   ```
 
-## Release Notes
+   > Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
 
-### 1.0
+3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-#### Breaking changes:
+```sh
+npx pod-install ios
+```
 
-- This version may only be used with React Native >= 0.25
+We're done! Now you can build and run the app on your device/simulator.
 
-### 0.3
+## Quick Start
 
-#### Breaking changes:
-- The StatusBar is no longer dimmed by sliding the drawer layout automatically. To avoid this change you may use [StatusBarIOS.setHidden](https://facebook.github.io/react-native/docs/statusbarios.html#sethidden) in the [onDrawerSlide](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#ondrawerslide) callback.
+```js
+import * as React from 'react';
+import { Button, Text } from 'react-native';
+import { Drawer } from 'react-native-drawer-layout';
 
-## Contribution
+export default function DrawerExample() {
+  const [open, setOpen] = React.useState(false);
 
-Please make sure to run the tests before proposing a PR by running `npm test`.
+  return (
+    <Drawer
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      renderDrawerContent={() => {
+        return <Text>Drawer content</Text>;
+      }}
+    >
+      <Button
+        onPress={() => setOpen((prevOpen) => !prevOpen)}
+        title={`${open ? 'Close' : 'Open'} drawer`}
+      />
+    </Drawer>
+  );
+}
+```
+
+## API reference
+
+The package exports a `Drawer` component which is the one you'd use to render the drawer.
+
+### `Drawer`
+
+Component responsible for rendering a drawer with animations and gestures.
+
+#### Drawer Props
+
+##### `open`
+
+Whether the drawer is open or not.
+
+##### `onOpen`
+
+Callback which is called when the drawer is opened.
+
+##### `onClose`
+
+Callback which is called when the drawer is closed.
+
+##### `renderDrawerContent`
+
+Callback which returns a react element to render as the content of the drawer.
+
+##### `layout`
+
+Object containing the layout of the container. Defaults to the dimensions of the application's window.
+
+##### `drawerPosition`
+
+Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
+
+##### `drawerType`
+
+Type of the drawer. It determines how the drawer looks and animates.
+
+- `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.
+
+Defaults to `slide` on iOS and `front` on other platforms.
+
+##### `drawerStyle`
+
+Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
+
+##### `overlayStyle`
+
+Style object for the overlay.
+
+##### `hideStatusBarOnOpen`
+
+Whether to hide the status bar when the drawer is open. Defaults to `false`.
+
+##### `keyboardDismissMode`
+
+Whether to dismiss the keyboard when the drawer is open. Supported values are:
+
+- `none`: The keyboard will not be dismissed when the drawer is open.
+- `on-drag`: The keyboard will be dismissed when the drawer is opened by a swipe gesture.
+
+Defaults to `on-drag`.
+
+##### `statusBarAnimation`
+
+Animation to use when the status bar is hidden. Supported values are:
+
+- `slide`: The status bar will slide out of view.
+- `fade`: The status bar will fade out of view.
+- `none`: The status bar will not animate.
+
+Use it in combination with `hideStatusBarOnOpen`.
+
+##### `swipeEnabled`
+
+Whether to enable swipe gestures to open the drawer. Defaults to `true`.
+
+This is not supported on web.
+
+##### `swipeEdgeWidth`
+
+How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
+
+This is not supported on web.
+
+##### `swipeMinDistance`
+
+Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
+
+This is not supported on web.
+
+##### `swipeMinVelocity`
+
+Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
+
+This is not supported on web.
+
+##### `gestureHandlerProps`
+
+Props to pass to the underlying pan gesture handler.
+
+This is not supported on web.
+
+##### `children`
+
+Content that the drawer should wrap.
+
+### `useDrawerProgress`
+
+The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
+
+Example with modern implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: interpolate(progress, [0, 1], [-100, 0]),
+        },
+      ],
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{/* ... */}</Animated.View>;
+}
+```
+
+Example with legacy implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  // If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
+  const translateX = Animated.interpolateNode(progress, {
+    inputRange: [0, 1],
+    outputRange: [-100, 0],
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ translateX }] }}>
+      {/* ... */}
+    </Animated.View>
+  );
+}
+```
+
+If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
+
+```js
+import { DrawerProgressContext } from 'react-native-drawer-layout';
+
+// ...
+
+class MyComponent extends React.Component {
+  static contextType = DrawerProgressContext;
+
+  render() {
+    const progress = this.context;
+
+    // ...
+  }
+}
+```

package/lib/commonjs/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SWIPE_MIN_VELOCITY = exports.SWIPE_MIN_OFFSET = exports.SWIPE_MIN_DISTANCE = exports.DEFAULT_DRAWER_WIDTH = void 0;
+const SWIPE_MIN_OFFSET = 5;
+exports.SWIPE_MIN_OFFSET = SWIPE_MIN_OFFSET;
+const SWIPE_MIN_DISTANCE = 60;
+exports.SWIPE_MIN_DISTANCE = SWIPE_MIN_DISTANCE;
+const SWIPE_MIN_VELOCITY = 500;
+exports.SWIPE_MIN_VELOCITY = SWIPE_MIN_VELOCITY;
+const DEFAULT_DRAWER_WIDTH = '80%';
+exports.DEFAULT_DRAWER_WIDTH = DEFAULT_DRAWER_WIDTH;
+//# sourceMappingURL=constants.js.map

package/lib/commonjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SWIPE_MIN_OFFSET","SWIPE_MIN_DISTANCE","SWIPE_MIN_VELOCITY","DEFAULT_DRAWER_WIDTH"],"sourceRoot":"../../src","sources":["constants.tsx"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAG,CAAC;AAAC;AAC3B,MAAMC,kBAAkB,GAAG,EAAE;AAAC;AAC9B,MAAMC,kBAAkB,GAAG,GAAG;AAAC;AAC/B,MAAMC,oBAAoB,GAAG,KAAK;AAAC"}

package/lib/commonjs/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function () {
+    return _Drawer.default;
+  }
+});
+Object.defineProperty(exports, "DrawerGestureContext", {
+  enumerable: true,
+  get: function () {
+    return _DrawerGestureContext.default;
+  }
+});
+Object.defineProperty(exports, "DrawerProgressContext", {
+  enumerable: true,
+  get: function () {
+    return _DrawerProgressContext.default;
+  }
+});
+Object.defineProperty(exports, "useDrawerProgress", {
+  enumerable: true,
+  get: function () {
+    return _useDrawerProgress.default;
+  }
+});
+var _DrawerGestureContext = _interopRequireDefault(require("./utils/DrawerGestureContext"));
+var _DrawerProgressContext = _interopRequireDefault(require("./utils/DrawerProgressContext"));
+var _useDrawerProgress = _interopRequireDefault(require("./utils/useDrawerProgress"));
+var _Drawer = _interopRequireDefault(require("./views/Drawer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAmD"}

package/lib/commonjs/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.tsx"],"mappings":""}

package/lib/commonjs/utils/DrawerGestureContext.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = /*#__PURE__*/React.createContext(null);
+exports.default = _default;
+//# sourceMappingURL=DrawerGestureContext.js.map

package/lib/commonjs/utils/DrawerGestureContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext"],"sourceRoot":"../../src","sources":["DrawerGestureContext.tsx"],"mappings":";;;;;;AAAA;AAA+B;AAAA;AAAA,4BAEhBA,KAAK,CAACC,aAAa,CAA8B,IAAI,CAAC;AAAA"}

package/lib/commonjs/utils/DrawerProgressContext.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = /*#__PURE__*/React.createContext(undefined);
+exports.default = _default;
+//# sourceMappingURL=DrawerProgressContext.js.map

package/lib/commonjs/utils/DrawerProgressContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","undefined"],"sourceRoot":"../../src","sources":["DrawerProgressContext.tsx"],"mappings":";;;;;;AAAA;AAA+B;AAAA;AAAA,4BAGhBA,KAAK,CAACC,aAAa,CAEhCC,SAAS,CAAC;AAAA"}

package/lib/commonjs/utils/useDrawerProgress.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDrawerProgress;
+var React = _interopRequireWildcard(require("react"));
+var _DrawerProgressContext = _interopRequireDefault(require("./DrawerProgressContext"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function useDrawerProgress() {
+  const progress = React.useContext(_DrawerProgressContext.default);
+  if (progress === undefined) {
+    throw new Error("Couldn't find a drawer. Is your component inside a drawer?");
+  }
+  return progress;
+}
+//# sourceMappingURL=useDrawerProgress.js.map

package/lib/commonjs/utils/useDrawerProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDrawerProgress","progress","React","useContext","DrawerProgressContext","undefined","Error"],"sourceRoot":"../../src","sources":["useDrawerProgress.tsx"],"mappings":";;;;;;AAAA;AAGA;AAA4D;AAAA;AAAA;AAE7C,SAASA,iBAAiB,GAEf;EACxB,MAAMC,QAAQ,GAAGC,KAAK,CAACC,UAAU,CAACC,8BAAqB,CAAC;EAExD,IAAIH,QAAQ,KAAKI,SAAS,EAAE;IAC1B,MAAM,IAAIC,KAAK,CACb,4DAA4D,CAC7D;EACH;EAEA,OAAOL,QAAQ;AACjB"}

package/lib/commonjs/views/Drawer.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Drawer;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var Reanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _constants = require("../constants");
+var _GestureHandler = require("./GestureHandler");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const getDefaultDrawerWidth = _ref => {
+  let {
+    height,
+    width
+  } = _ref;
+  /*
+   * Default drawer width is screen width - header height
+   * with a max width of 280 on mobile and 320 on tablet
+   * https://material.io/components/navigation-drawer
+   */
+  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);
+};
+function Drawer(_ref2) {
+  var _Reanimated$isConfigu;
+  let {
+    // Reanimated 2 is not configured
+    // @ts-expect-error: the type definitions are incomplete
+    useLegacyImplementation = !((_Reanimated$isConfigu = Reanimated.isConfigured) !== null && _Reanimated$isConfigu !== void 0 && _Reanimated$isConfigu.call(Reanimated)),
+    layout: customLayout,
+    drawerType = _reactNative.Platform.select({
+      ios: 'slide',
+      default: 'front'
+    }),
+    drawerPosition = _reactNative.I18nManager.getConstants().isRTL ? 'right' : 'left',
+    drawerStyle,
+    swipeEnabled = _reactNative.Platform.OS !== 'web' && _reactNative.Platform.OS !== 'windows' && _reactNative.Platform.OS !== 'macos',
+    swipeEdgeWidth = 32,
+    swipeMinDistance = _constants.SWIPE_MIN_DISTANCE,
+    swipeMinVelocity = _constants.SWIPE_MIN_VELOCITY,
+    keyboardDismissMode = 'on-drag',
+    hideStatusBarOnOpen = false,
+    statusBarAnimation = 'slide',
+    style,
+    ...rest
+  } = _ref2;
+  // Reanimated v3 dropped legacy v1 API
+  const legacyImplemenationNotAvailable = require('react-native-reanimated').abs === undefined;
+  if (useLegacyImplementation && legacyImplemenationNotAvailable) {
+    throw new Error('The `useLegacyImplementation` prop is not available with Reanimated 3 as it no longer includes support for Reanimated 1 legacy API. Remove the `useLegacyImplementation` prop from `Drawer.Navigator` to be able to use it.');
+  }
+  const Drawer = useLegacyImplementation ? require('./legacy/Drawer').default : require('./modern/Drawer').default;
+  const windowDimensions = (0, _reactNative.useWindowDimensions)();
+  const layout = customLayout ?? windowDimensions;
+  return /*#__PURE__*/React.createElement(_GestureHandler.GestureHandlerRootView, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/React.createElement(Drawer, _extends({}, rest, {
+    layout: layout,
+    drawerType: drawerType,
+    drawerPosition: drawerPosition,
+    drawerStyle: [{
+      width: getDefaultDrawerWidth(layout)
+    }, styles.drawer, drawerStyle],
+    swipeEnabled: swipeEnabled,
+    swipeEdgeWidth: swipeEdgeWidth,
+    swipeMinDistance: swipeMinDistance,
+    swipeMinVelocity: swipeMinVelocity,
+    keyboardDismissMode: keyboardDismissMode,
+    hideStatusBarOnOpen: hideStatusBarOnOpen,
+    statusBarAnimation: statusBarAnimation
+  })));
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  drawer: {
+    backgroundColor: 'white'
+  }
+});
+//# sourceMappingURL=Drawer.js.map

package/lib/commonjs/views/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getDefaultDrawerWidth","height","width","smallerAxisSize","Math","min","isLandscape","isTablet","appBarHeight","Platform","OS","maxWidth","Drawer","useLegacyImplementation","Reanimated","isConfigured","layout","customLayout","drawerType","select","ios","default","drawerPosition","I18nManager","getConstants","isRTL","drawerStyle","swipeEnabled","swipeEdgeWidth","swipeMinDistance","SWIPE_MIN_DISTANCE","swipeMinVelocity","SWIPE_MIN_VELOCITY","keyboardDismissMode","hideStatusBarOnOpen","statusBarAnimation","style","rest","legacyImplemenationNotAvailable","require","abs","undefined","Error","windowDimensions","useWindowDimensions","styles","container","drawer","StyleSheet","create","flex","backgroundColor"],"sourceRoot":"../../src","sources":["Drawer.tsx"],"mappings":"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"}

package/lib/commonjs/views/GestureHandler.android.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GestureHandlerNative = require("./GestureHandlerNative");
+Object.keys(_GestureHandlerNative).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GestureHandlerNative[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GestureHandlerNative[key];
+    }
+  });
+});
+//# sourceMappingURL=GestureHandler.android.js.map

package/lib/commonjs/views/GestureHandler.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["GestureHandler.android.tsx"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/views/GestureHandler.ios.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GestureHandlerNative = require("./GestureHandlerNative");
+Object.keys(_GestureHandlerNative).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GestureHandlerNative[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GestureHandlerNative[key];
+    }
+  });
+});
+//# sourceMappingURL=GestureHandler.ios.js.map

package/lib/commonjs/views/GestureHandler.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["GestureHandler.ios.tsx"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/views/GestureHandler.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TapGestureHandler = exports.PanGestureHandler = exports.GestureState = exports.GestureHandlerRootView = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const Dummy = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+const PanGestureHandler = Dummy;
+exports.PanGestureHandler = PanGestureHandler;
+const TapGestureHandler = Dummy;
+exports.TapGestureHandler = TapGestureHandler;
+const GestureHandlerRootView = _reactNative.View;
+exports.GestureHandlerRootView = GestureHandlerRootView;
+let GestureState;
+exports.GestureState = GestureState;
+(function (GestureState) {
+  GestureState[GestureState["UNDETERMINED"] = 0] = "UNDETERMINED";
+  GestureState[GestureState["FAILED"] = 1] = "FAILED";
+  GestureState[GestureState["BEGAN"] = 2] = "BEGAN";
+  GestureState[GestureState["CANCELLED"] = 3] = "CANCELLED";
+  GestureState[GestureState["ACTIVE"] = 4] = "ACTIVE";
+  GestureState[GestureState["END"] = 5] = "END";
+})(GestureState || (exports.GestureState = GestureState = {}));
+//# sourceMappingURL=GestureHandler.js.map

package/lib/commonjs/views/GestureHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dummy","children","PanGestureHandler","TapGestureHandler","GestureHandlerRootView","View","GestureState"],"sourceRoot":"../../src","sources":["GestureHandler.tsx"],"mappings":";;;;;;AAAA;AACA;AAAoC;AAAA;AAMpC,MAAMA,KAAU,GAAG;EAAA,IAAC;IAAEC;EAAwC,CAAC;EAAA,oBAC7D,0CAAGA,QAAQ,CAAI;AAAA,CAChB;AAEM,MAAMC,iBAAiB,GAC5BF,KAAyD;AAAC;AAErD,MAAMG,iBAAiB,GAC5BH,KAAyD;AAAC;AAErD,MAAMI,sBAAsB,GAAGC,iBAAI;AAAC;AAAA,IAEzBC,YAAY;AAAA;AAAA,WAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;EAAZA,YAAY,CAAZA,YAAY;AAAA,GAAZA,YAAY,4BAAZA,YAAY"}