react-native-gesture-handler 1.10.0 → 2.0.0

package/lib/commonjs/components/DrawerLayout.js

@@ -0,0 +1,535 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _invariant = _interopRequireDefault(require("invariant"));
+
+var _reactNative = require("react-native");
+
+var _PanGestureHandler = require("../handlers/PanGestureHandler");
+
+var _TapGestureHandler = require("../handlers/TapGestureHandler");
+
+var _State = require("../State");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const DRAG_TOSS = 0.05;
+const IDLE = 'Idle';
+const DRAGGING = 'Dragging';
+const SETTLING = 'Settling';
+
+class DrawerLayout extends React.Component {
+  constructor(_props) {
+    super(_props);
+
+    _defineProperty(this, "openValue", void 0);
+
+    _defineProperty(this, "onGestureEvent", void 0);
+
+    _defineProperty(this, "accessibilityIsModalView", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "pointerEventsView", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "panGestureHandler", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "drawerShown", false);
+
+    _defineProperty(this, "updateAnimatedEvent", (props, state) => {
+      // Event definition is based on
+      const {
+        drawerPosition,
+        drawerWidth,
+        drawerType
+      } = props;
+      const {
+        dragX: dragXValue,
+        touchX: touchXValue,
+        drawerTranslation,
+        containerWidth
+      } = state;
+      let dragX = dragXValue;
+      let touchX = touchXValue;
+
+      if (drawerPosition !== 'left') {
+        // Most of the code is written in a way to handle left-side drawer. In
+        // order to handle right-side drawer the only thing we need to do is to
+        // reverse events coming from gesture handler in a way they emulate
+        // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
+        // calulcated by subtracing real touchX from the width of the container
+        // (such that when touch happens at the right edge the value is simply 0)
+        dragX = _reactNative.Animated.multiply(new _reactNative.Animated.Value(-1), dragXValue); // TODO(TS): (for all "as" in this file) make sure we can map this
+
+        touchX = _reactNative.Animated.add(new _reactNative.Animated.Value(containerWidth), _reactNative.Animated.multiply(new _reactNative.Animated.Value(-1), touchXValue)); // TODO(TS): make sure we can map this;
+
+        touchXValue.setValue(containerWidth);
+      } else {
+        touchXValue.setValue(0);
+      } // While closing the drawer when user starts gesture outside of its area (in greyed
+      // out part of the window), we want the drawer to follow only once finger reaches the
+      // edge of the drawer.
+      // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
+      // dots. The touch gesture starts at '*' and moves left, touch path is indicated by
+      // an arrow pointing left
+      // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+      //    +---------------+    +---------------+    +---------------+    +---------------+
+      //
+      // For the above to work properly we define animated value that will keep
+      // start position of the gesture. Then we use that value to calculate how
+      // much we need to subtract from the dragX. If the gesture started on the
+      // greyed out area we take the distance from the edge of the drawer to the
+      // start position. Otherwise we don't subtract at all and the drawer be
+      // pulled back as soon as you start the pan.
+      //
+      // This is used only when drawerType is "front"
+      //
+
+
+      let translationX = dragX;
+
+      if (drawerType === 'front') {
+        const startPositionX = _reactNative.Animated.add(touchX, _reactNative.Animated.multiply(new _reactNative.Animated.Value(-1), dragX));
+
+        const dragOffsetFromOnStartPosition = startPositionX.interpolate({
+          inputRange: [drawerWidth - 1, drawerWidth, drawerWidth + 1],
+          outputRange: [0, 0, 1]
+        });
+        translationX = _reactNative.Animated.add(dragX, dragOffsetFromOnStartPosition); // TODO: as above
+      }
+
+      this.openValue = _reactNative.Animated.add(translationX, drawerTranslation).interpolate({
+        inputRange: [0, drawerWidth],
+        outputRange: [0, 1],
+        extrapolate: 'clamp'
+      });
+      const gestureOptions = {
+        useNativeDriver: props.useNativeAnimations
+      };
+
+      if (this.props.onDrawerSlide) {
+        gestureOptions.listener = ev => {
+          var _this$props$onDrawerS, _this$props;
+
+          const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));
+          const position = translationX / this.state.containerWidth;
+          (_this$props$onDrawerS = (_this$props = this.props).onDrawerSlide) === null || _this$props$onDrawerS === void 0 ? void 0 : _this$props$onDrawerS.call(_this$props, position);
+        };
+      }
+
+      this.onGestureEvent = _reactNative.Animated.event([{
+        nativeEvent: {
+          translationX: dragXValue,
+          x: touchXValue
+        }
+      }], gestureOptions);
+    });
+
+    _defineProperty(this, "handleContainerLayout", ({
+      nativeEvent
+    }) => {
+      this.setState({
+        containerWidth: nativeEvent.layout.width
+      });
+    });
+
+    _defineProperty(this, "emitStateChanged", (newState, drawerWillShow) => {
+      var _this$props$onDrawerS2, _this$props2;
+
+      (_this$props$onDrawerS2 = (_this$props2 = this.props).onDrawerStateChanged) === null || _this$props$onDrawerS2 === void 0 ? void 0 : _this$props$onDrawerS2.call(_this$props2, newState, drawerWillShow);
+    });
+
+    _defineProperty(this, "openingHandlerStateChange", ({
+      nativeEvent
+    }) => {
+      if (nativeEvent.oldState === _State.State.ACTIVE) {
+        this.handleRelease({
+          nativeEvent
+        });
+      } else if (nativeEvent.state === _State.State.ACTIVE) {
+        this.emitStateChanged(DRAGGING, false);
+
+        if (this.props.keyboardDismissMode === 'on-drag') {
+          _reactNative.Keyboard.dismiss();
+        }
+
+        if (this.props.hideStatusBar) {
+          _reactNative.StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');
+        }
+      }
+    });
+
+    _defineProperty(this, "onTapHandlerStateChange", ({
+      nativeEvent
+    }) => {
+      if (this.drawerShown && nativeEvent.oldState === _State.State.ACTIVE && this.props.drawerLockMode !== 'locked-open') {
+        this.closeDrawer();
+      }
+    });
+
+    _defineProperty(this, "handleRelease", ({
+      nativeEvent
+    }) => {
+      const {
+        drawerWidth,
+        drawerPosition,
+        drawerType
+      } = this.props;
+      const {
+        containerWidth
+      } = this.state;
+      let {
+        translationX: dragX,
+        velocityX,
+        x: touchX
+      } = nativeEvent;
+
+      if (drawerPosition !== 'left') {
+        // See description in _updateAnimatedEvent about why events are flipped
+        // for right-side drawer
+        dragX = -dragX;
+        touchX = containerWidth - touchX;
+        velocityX = -velocityX;
+      }
+
+      const gestureStartX = touchX - dragX;
+      let dragOffsetBasedOnStart = 0;
+
+      if (drawerType === 'front') {
+        dragOffsetBasedOnStart = gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
+      }
+
+      const startOffsetX = dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth : 0);
+      const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
+      const shouldOpen = projOffsetX > drawerWidth / 2;
+
+      if (shouldOpen) {
+        this.animateDrawer(startOffsetX, drawerWidth, velocityX);
+      } else {
+        this.animateDrawer(startOffsetX, 0, velocityX);
+      }
+    });
+
+    _defineProperty(this, "updateShowing", showing => {
+      var _this$accessibilityIs, _this$pointerEventsVi, _this$panGestureHandl;
+
+      this.drawerShown = showing;
+      (_this$accessibilityIs = this.accessibilityIsModalView.current) === null || _this$accessibilityIs === void 0 ? void 0 : _this$accessibilityIs.setNativeProps({
+        accessibilityViewIsModal: showing
+      });
+      (_this$pointerEventsVi = this.pointerEventsView.current) === null || _this$pointerEventsVi === void 0 ? void 0 : _this$pointerEventsVi.setNativeProps({
+        pointerEvents: showing ? 'auto' : 'none'
+      });
+      const {
+        drawerPosition,
+        minSwipeDistance,
+        edgeWidth
+      } = this.props;
+      const fromLeft = drawerPosition === 'left'; // gestureOrientation is 1 if the expected gesture is from left to right and
+      // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+      // to right gesture, thus orientation will be 1.
+
+      const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1); // When drawer is closed we want the hitSlop to be horizontally shorter than
+      // the container size by the value of SLOP. This will make it only activate
+      // when gesture happens not further than SLOP away from the edge
+
+      const hitSlop = fromLeft ? {
+        left: 0,
+        width: showing ? undefined : edgeWidth
+      } : {
+        right: 0,
+        width: showing ? undefined : edgeWidth
+      }; // @ts-ignore internal API, maybe could be fixed in handler types
+
+      (_this$panGestureHandl = this.panGestureHandler.current) === null || _this$panGestureHandl === void 0 ? void 0 : _this$panGestureHandl.setNativeProps({
+        hitSlop,
+        activeOffsetX: gestureOrientation * minSwipeDistance
+      });
+    });
+
+    _defineProperty(this, "animateDrawer", (fromValue, toValue, velocity, speed) => {
+      this.state.dragX.setValue(0);
+      this.state.touchX.setValue(this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth);
+
+      if (fromValue != null) {
+        let nextFramePosition = fromValue;
+
+        if (this.props.useNativeAnimations) {
+          // When using native driver, we predict the next position of the
+          // animation because it takes one frame of a roundtrip to pass RELEASE
+          // event from native driver to JS before we can start animating. Without
+          // it, it is more noticable that the frame is dropped.
+          if (fromValue < toValue && velocity > 0) {
+            nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
+          } else if (fromValue > toValue && velocity < 0) {
+            nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);
+          }
+        }
+
+        this.state.drawerTranslation.setValue(nextFramePosition);
+      }
+
+      const willShow = toValue !== 0;
+      this.updateShowing(willShow);
+      this.emitStateChanged(SETTLING, willShow);
+
+      if (this.props.hideStatusBar) {
+        _reactNative.StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
+      }
+
+      _reactNative.Animated.spring(this.state.drawerTranslation, {
+        velocity,
+        bounciness: 0,
+        toValue,
+        useNativeDriver: this.props.useNativeAnimations,
+        speed: speed !== null && speed !== void 0 ? speed : undefined
+      }).start(({
+        finished
+      }) => {
+        if (finished) {
+          this.emitStateChanged(IDLE, willShow);
+
+          if (willShow) {
+            var _this$props$onDrawerO, _this$props3;
+
+            (_this$props$onDrawerO = (_this$props3 = this.props).onDrawerOpen) === null || _this$props$onDrawerO === void 0 ? void 0 : _this$props$onDrawerO.call(_this$props3);
+          } else {
+            var _this$props$onDrawerC, _this$props4;
+
+            (_this$props$onDrawerC = (_this$props4 = this.props).onDrawerClose) === null || _this$props$onDrawerC === void 0 ? void 0 : _this$props$onDrawerC.call(_this$props4);
+          }
+        }
+      });
+    });
+
+    _defineProperty(this, "openDrawer", (options = {}) => {
+      this.animateDrawer( // TODO: decide if it should be null or undefined is the proper value
+      undefined, this.props.drawerWidth, options.velocity ? options.velocity : 0); // We need to force the update, otherwise the overlay is not rerendered and
+      // it would not be clickable
+
+      this.forceUpdate();
+    });
+
+    _defineProperty(this, "closeDrawer", (options = {}) => {
+      // TODO: decide if it should be null or undefined is the proper value
+      this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0); // We need to force the update, otherwise the overlay is not rerendered and
+      // it would be still clickable
+
+      this.forceUpdate();
+    });
+
+    _defineProperty(this, "renderOverlay", () => {
+      /* Overlay styles */
+      (0, _invariant.default)(this.openValue, 'should be set');
+      const overlayOpacity = this.openValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+        extrapolate: 'clamp'
+      });
+      const dynamicOverlayStyles = {
+        opacity: overlayOpacity,
+        backgroundColor: this.props.overlayColor
+      };
+      return /*#__PURE__*/React.createElement(_TapGestureHandler.TapGestureHandler, {
+        onHandlerStateChange: this.onTapHandlerStateChange
+      }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+        pointerEvents: this.drawerShown ? 'auto' : 'none',
+        ref: this.pointerEventsView,
+        style: [styles.overlay, dynamicOverlayStyles]
+      }));
+    });
+
+    _defineProperty(this, "renderDrawer", () => {
+      const {
+        drawerBackgroundColor,
+        drawerWidth,
+        drawerPosition,
+        drawerType,
+        drawerContainerStyle,
+        contentContainerStyle
+      } = this.props;
+      const fromLeft = drawerPosition === 'left';
+      const drawerSlide = drawerType !== 'back';
+      const containerSlide = drawerType !== 'front'; // we rely on row and row-reverse flex directions to position the drawer
+      // properly. Apparently for RTL these are flipped which requires us to use
+      // the opposite setting for the drawer to appear from left or right
+      // according to the drawerPosition prop
+
+      const reverseContentDirection = _reactNative.I18nManager.isRTL ? fromLeft : !fromLeft;
+      const dynamicDrawerStyles = {
+        backgroundColor: drawerBackgroundColor,
+        width: drawerWidth
+      };
+      const openValue = this.openValue;
+      (0, _invariant.default)(openValue, 'should be set');
+      let containerStyles;
+
+      if (containerSlide) {
+        const containerTranslateX = openValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: fromLeft ? [0, drawerWidth] : [0, -drawerWidth],
+          extrapolate: 'clamp'
+        });
+        containerStyles = {
+          transform: [{
+            translateX: containerTranslateX
+          }]
+        };
+      }
+
+      let drawerTranslateX = 0;
+
+      if (drawerSlide) {
+        const closedDrawerOffset = fromLeft ? -drawerWidth : drawerWidth;
+        drawerTranslateX = openValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [closedDrawerOffset, 0],
+          extrapolate: 'clamp'
+        });
+      }
+
+      const drawerStyles = {
+        transform: [{
+          translateX: drawerTranslateX
+        }],
+        flexDirection: reverseContentDirection ? 'row-reverse' : 'row'
+      };
+      return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+        style: styles.main,
+        onLayout: this.handleContainerLayout
+      }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+        style: [drawerType === 'front' ? styles.containerOnBack : styles.containerInFront, containerStyles, contentContainerStyle],
+        importantForAccessibility: this.drawerShown ? 'no-hide-descendants' : 'yes'
+      }, typeof this.props.children === 'function' ? this.props.children(this.openValue) : this.props.children, this.renderOverlay()), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+        pointerEvents: "box-none",
+        ref: this.accessibilityIsModalView,
+        accessibilityViewIsModal: this.drawerShown,
+        style: [styles.drawerContainer, drawerStyles, drawerContainerStyle]
+      }, /*#__PURE__*/React.createElement(_reactNative.View, {
+        style: dynamicDrawerStyles
+      }, this.props.renderNavigationView(this.openValue))));
+    });
+
+    _defineProperty(this, "setPanGestureRef", ref => {
+      var _this$props$onGesture, _this$props5;
+
+      // TODO(TS): make sure it is OK taken from
+      // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
+      this.panGestureHandler.current = ref;
+      (_this$props$onGesture = (_this$props5 = this.props).onGestureRef) === null || _this$props$onGesture === void 0 ? void 0 : _this$props$onGesture.call(_this$props5, ref);
+    });
+
+    const _dragX = new _reactNative.Animated.Value(0);
+
+    const _touchX = new _reactNative.Animated.Value(0);
+
+    const _drawerTranslation = new _reactNative.Animated.Value(0);
+
+    this.state = {
+      dragX: _dragX,
+      touchX: _touchX,
+      drawerTranslation: _drawerTranslation,
+      containerWidth: 0
+    };
+    this.updateAnimatedEvent(_props, this.state);
+  }
+
+  UNSAFE_componentWillUpdate(props, state) {
+    if (this.props.drawerPosition !== props.drawerPosition || this.props.drawerWidth !== props.drawerWidth || this.props.drawerType !== props.drawerType || this.state.containerWidth !== state.containerWidth) {
+      this.updateAnimatedEvent(props, state);
+    }
+  }
+
+  render() {
+    const {
+      drawerPosition,
+      drawerLockMode,
+      edgeWidth,
+      minSwipeDistance
+    } = this.props;
+    const fromLeft = drawerPosition === 'left'; // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
+
+    const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1); // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
+
+    const hitSlop = fromLeft ? {
+      left: 0,
+      width: this.drawerShown ? undefined : edgeWidth
+    } : {
+      right: 0,
+      width: this.drawerShown ? undefined : edgeWidth
+    };
+    return /*#__PURE__*/React.createElement(_PanGestureHandler.PanGestureHandler // @ts-ignore could be fixed in handler types
+    , {
+      ref: this.setPanGestureRef,
+      hitSlop: hitSlop,
+      activeOffsetX: gestureOrientation * minSwipeDistance,
+      failOffsetY: [-15, 15],
+      onGestureEvent: this.onGestureEvent,
+      onHandlerStateChange: this.openingHandlerStateChange,
+      enableTrackpadTwoFingerGesture: this.props.enableTrackpadTwoFingerGesture,
+      enabled: drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'
+    }, this.renderDrawer());
+  }
+
+}
+
+exports.default = DrawerLayout;
+
+_defineProperty(DrawerLayout, "defaultProps", {
+  drawerWidth: 200,
+  drawerPosition: 'left',
+  useNativeAnimations: true,
+  drawerType: 'front',
+  edgeWidth: 20,
+  minSwipeDistance: 3,
+  overlayColor: 'rgba(0, 0, 0, 0.7)',
+  drawerLockMode: 'unlocked',
+  enableTrackpadTwoFingerGesture: false
+});
+
+_defineProperty(DrawerLayout, "positions", {
+  Left: 'left',
+  Right: 'right'
+});
+
+const styles = _reactNative.StyleSheet.create({
+  drawerContainer: { ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 1001,
+    flexDirection: 'row'
+  },
+  containerInFront: { ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 1002
+  },
+  containerOnBack: { ..._reactNative.StyleSheet.absoluteFillObject
+  },
+  main: {
+    flex: 1,
+    zIndex: 0,
+    overflow: 'hidden'
+  },
+  overlay: { ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 1000
+  }
+});
+//# sourceMappingURL=DrawerLayout.js.map

package/lib/commonjs/components/DrawerLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DrawerLayout.tsx"],"names":["DRAG_TOSS","IDLE","DRAGGING","SETTLING","DrawerLayout","Component","constructor","props","React","createRef","state","drawerPosition","drawerWidth","drawerType","dragX","dragXValue","touchX","touchXValue","drawerTranslation","containerWidth","Animated","multiply","Value","add","setValue","translationX","startPositionX","dragOffsetFromOnStartPosition","interpolate","inputRange","outputRange","openValue","extrapolate","gestureOptions","useNativeDriver","useNativeAnimations","onDrawerSlide","listener","ev","Math","floor","abs","nativeEvent","position","onGestureEvent","event","x","setState","layout","width","newState","drawerWillShow","onDrawerStateChanged","oldState","State","ACTIVE","handleRelease","emitStateChanged","keyboardDismissMode","Keyboard","dismiss","hideStatusBar","StatusBar","setHidden","statusBarAnimation","drawerShown","drawerLockMode","closeDrawer","velocityX","gestureStartX","dragOffsetBasedOnStart","startOffsetX","projOffsetX","shouldOpen","animateDrawer","showing","accessibilityIsModalView","current","setNativeProps","accessibilityViewIsModal","pointerEventsView","pointerEvents","minSwipeDistance","edgeWidth","fromLeft","gestureOrientation","hitSlop","left","undefined","right","panGestureHandler","activeOffsetX","fromValue","toValue","velocity","speed","nextFramePosition","min","max","willShow","updateShowing","spring","bounciness","start","finished","onDrawerOpen","onDrawerClose","options","forceUpdate","overlayOpacity","dynamicOverlayStyles","opacity","backgroundColor","overlayColor","onTapHandlerStateChange","styles","overlay","drawerBackgroundColor","drawerContainerStyle","contentContainerStyle","drawerSlide","containerSlide","reverseContentDirection","I18nManager","isRTL","dynamicDrawerStyles","containerStyles","containerTranslateX","transform","translateX","drawerTranslateX","closedDrawerOffset","drawerStyles","flexDirection","main","handleContainerLayout","containerOnBack","containerInFront","children","renderOverlay","drawerContainer","renderNavigationView","ref","onGestureRef","updateAnimatedEvent","UNSAFE_componentWillUpdate","render","setPanGestureRef","openingHandlerStateChange","enableTrackpadTwoFingerGesture","renderDrawer","Left","Right","StyleSheet","create","absoluteFillObject","zIndex","flex","overflow"],"mappings":"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","sourcesContent":["// This component is based on RN's DrawerLayoutAndroid API\n//\n// It perhaps deserves to be put in a separate repo, but since it relies on\n// react-native-gesture-handler library which isn't very popular at the moment I\n// decided to keep it here for the time being. It will allow us to move faster\n// and fix issues that may arise in gesture handler library that could be found\n// when using the drawer component\n\nimport * as React from 'react';\nimport { Component } from 'react';\nimport invariant from 'invariant';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  Keyboard,\n  StatusBar,\n  I18nManager,\n  StatusBarAnimation,\n  StyleProp,\n  ViewStyle,\n  LayoutChangeEvent,\n  NativeSyntheticEvent,\n} from 'react-native';\n\nimport {\n  GestureEvent,\n  HandlerStateChangeEvent,\n} from '../handlers/gestureHandlerCommon';\nimport {\n  PanGestureHandler,\n  PanGestureHandlerEventPayload,\n} from '../handlers/PanGestureHandler';\nimport {\n  TapGestureHandler,\n  TapGestureHandlerEventPayload,\n} from '../handlers/TapGestureHandler';\nimport { State } from '../State';\n\nconst DRAG_TOSS = 0.05;\n\nconst IDLE: DrawerState = 'Idle';\nconst DRAGGING: DrawerState = 'Dragging';\nconst SETTLING: DrawerState = 'Settling';\n\nexport type DrawerPosition = 'left' | 'right';\n\nexport type DrawerState = 'Idle' | 'Dragging' | 'Settling';\n\nexport type DrawerType = 'front' | 'back' | 'slide';\n\nexport type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';\n\nexport type DrawerKeyboardDismissMode = 'none' | 'on-drag';\n\nexport interface DrawerLayoutProps {\n  /**\n   * This attribute is present in the standard implementation already and is one\n   * of the required params. Gesture handler version of DrawerLayout make it\n   * possible for the function passed as `renderNavigationView` to take an\n   * Animated value as a parameter that indicates the progress of drawer\n   * opening/closing animation (progress value is 0 when closed and 1 when\n   * opened). This can be used by the drawer component to animated its children\n   * while the drawer is opening or closing.\n   */\n  renderNavigationView: (\n    progressAnimatedValue: Animated.Value\n  ) => React.ReactNode;\n\n  drawerPosition?: DrawerPosition;\n\n  drawerWidth?: number;\n\n  drawerBackgroundColor?: string;\n\n  drawerLockMode?: DrawerLockMode;\n\n  keyboardDismissMode?: DrawerKeyboardDismissMode;\n\n  /**\n   * Called when the drawer is closed.\n   */\n  onDrawerClose?: () => void;\n\n  /**\n   * Called when the drawer is opened.\n   */\n  onDrawerOpen?: () => void;\n\n  /**\n   * Called when the status of the drawer changes.\n   */\n  onDrawerStateChanged?: (\n    newState: DrawerState,\n    drawerWillShow: boolean\n  ) => void;\n  useNativeAnimations?: boolean;\n\n  drawerType?: DrawerType;\n\n  /**\n   * Defines how far from the edge of the content view the gesture should\n   * activate.\n   */\n  edgeWidth?: number;\n\n  minSwipeDistance?: number;\n\n  /**\n   * When set to true Drawer component will use\n   * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS\n   * status bar whenever the drawer is pulled or when its in an \"open\" state.\n   */\n  hideStatusBar?: boolean;\n\n  /**\n   * @default 'slide'\n   *\n   * Can be used when hideStatusBar is set to true and will select the animation\n   * used for hiding/showing the status bar. See\n   * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for\n   * more details\n   */\n  statusBarAnimation?: StatusBarAnimation;\n\n  /**\n   * @default black\n   *\n   * Color of a semi-transparent overlay to be displayed on top of the content\n   * view when drawer gets open. A solid color should be used as the opacity is\n   * added by the Drawer itself and the opacity of the overlay is animated (from\n   * 0% to 70%).\n   */\n  overlayColor?: string;\n\n  contentContainerStyle?: StyleProp<ViewStyle>;\n\n  drawerContainerStyle?: StyleProp<ViewStyle>;\n\n  /**\n   * Enables two-finger gestures on supported devices, for example iPads with\n   * trackpads. If not enabled the gesture will require click + drag, with\n   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger\n   * the gesture.\n   */\n  enableTrackpadTwoFingerGesture?: boolean;\n\n  onDrawerSlide?: (position: number) => void;\n\n  onGestureRef?: (ref: PanGestureHandler) => void;\n}\n\nexport type DrawerLayoutState = {\n  dragX: Animated.Value;\n  touchX: Animated.Value;\n  drawerTranslation: Animated.Value;\n  containerWidth: number;\n};\n\nexport type DrawerMovementOption = {\n  velocity?: number;\n  speed?: number;\n};\nexport default class DrawerLayout extends Component<\n  DrawerLayoutProps,\n  DrawerLayoutState\n> {\n  static defaultProps = {\n    drawerWidth: 200,\n    drawerPosition: 'left',\n    useNativeAnimations: true,\n    drawerType: 'front',\n    edgeWidth: 20,\n    minSwipeDistance: 3,\n    overlayColor: 'rgba(0, 0, 0, 0.7)',\n    drawerLockMode: 'unlocked',\n    enableTrackpadTwoFingerGesture: false,\n  };\n\n  constructor(props: DrawerLayoutProps) {\n    super(props);\n\n    const dragX = new Animated.Value(0);\n    const touchX = new Animated.Value(0);\n    const drawerTranslation = new Animated.Value(0);\n\n    this.state = {\n      dragX,\n      touchX,\n      drawerTranslation,\n      containerWidth: 0,\n    };\n\n    this.updateAnimatedEvent(props, this.state);\n  }\n\n  UNSAFE_componentWillUpdate(\n    props: DrawerLayoutProps,\n    state: DrawerLayoutState\n  ) {\n    if (\n      this.props.drawerPosition !== props.drawerPosition ||\n      this.props.drawerWidth !== props.drawerWidth ||\n      this.props.drawerType !== props.drawerType ||\n      this.state.containerWidth !== state.containerWidth\n    ) {\n      this.updateAnimatedEvent(props, state);\n    }\n  }\n\n  private openValue?: Animated.AnimatedInterpolation;\n  private onGestureEvent?: (\n    event: GestureEvent<PanGestureHandlerEventPayload>\n  ) => void;\n  private accessibilityIsModalView = React.createRef<View>();\n  private pointerEventsView = React.createRef<View>();\n  private panGestureHandler = React.createRef<PanGestureHandler | null>();\n  private drawerShown = false;\n\n  static positions = {\n    Left: 'left',\n    Right: 'right',\n  };\n\n  private updateAnimatedEvent = (\n    props: DrawerLayoutProps,\n    state: DrawerLayoutState\n  ) => {\n    // Event definition is based on\n    const { drawerPosition, drawerWidth, drawerType } = props;\n    const {\n      dragX: dragXValue,\n      touchX: touchXValue,\n      drawerTranslation,\n      containerWidth,\n    } = state;\n\n    let dragX = dragXValue;\n    let touchX = touchXValue;\n\n    if (drawerPosition !== 'left') {\n      // Most of the code is written in a way to handle left-side drawer. In\n      // order to handle right-side drawer the only thing we need to do is to\n      // reverse events coming from gesture handler in a way they emulate\n      // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is\n      // calulcated by subtracing real touchX from the width of the container\n      // (such that when touch happens at the right edge the value is simply 0)\n      dragX = Animated.multiply(\n        new Animated.Value(-1),\n        dragXValue\n      ) as Animated.Value; // TODO(TS): (for all \"as\" in this file) make sure we can map this\n      touchX = Animated.add(\n        new Animated.Value(containerWidth),\n        Animated.multiply(new Animated.Value(-1), touchXValue)\n      ) as Animated.Value; // TODO(TS): make sure we can map this;\n      touchXValue.setValue(containerWidth);\n    } else {\n      touchXValue.setValue(0);\n    }\n\n    // While closing the drawer when user starts gesture outside of its area (in greyed\n    // out part of the window), we want the drawer to follow only once finger reaches the\n    // edge of the drawer.\n    // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by\n    // dots. The touch gesture starts at '*' and moves left, touch path is indicated by\n    // an arrow pointing left\n    // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\n    //    +---------------+    +---------------+    +---------------+    +---------------+\n    //\n    // For the above to work properly we define animated value that will keep\n    // start position of the gesture. Then we use that value to calculate how\n    // much we need to subtract from the dragX. If the gesture started on the\n    // greyed out area we take the distance from the edge of the drawer to the\n    // start position. Otherwise we don't subtract at all and the drawer be\n    // pulled back as soon as you start the pan.\n    //\n    // This is used only when drawerType is \"front\"\n    //\n    let translationX = dragX;\n    if (drawerType === 'front') {\n      const startPositionX = Animated.add(\n        touchX,\n        Animated.multiply(new Animated.Value(-1), dragX)\n      );\n\n      const dragOffsetFromOnStartPosition = startPositionX.interpolate({\n        inputRange: [drawerWidth! - 1, drawerWidth!, drawerWidth! + 1],\n        outputRange: [0, 0, 1],\n      });\n      translationX = Animated.add(\n        dragX,\n        dragOffsetFromOnStartPosition\n      ) as Animated.Value; // TODO: as above\n    }\n\n    this.openValue = Animated.add(translationX, drawerTranslation).interpolate({\n      inputRange: [0, drawerWidth!],\n      outputRange: [0, 1],\n      extrapolate: 'clamp',\n    });\n\n    const gestureOptions: {\n      useNativeDriver: boolean;\n      // TODO: make sure it is correct\n      listener?: (\n        ev: NativeSyntheticEvent<PanGestureHandlerEventPayload>\n      ) => void;\n    } = {\n      useNativeDriver: props.useNativeAnimations!,\n    };\n\n    if (this.props.onDrawerSlide) {\n      gestureOptions.listener = (ev) => {\n        const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));\n        const position = translationX / this.state.containerWidth;\n\n        this.props.onDrawerSlide?.(position);\n      };\n    }\n\n    this.onGestureEvent = Animated.event(\n      [{ nativeEvent: { translationX: dragXValue, x: touchXValue } }],\n      gestureOptions\n    );\n  };\n\n  private handleContainerLayout = ({ nativeEvent }: LayoutChangeEvent) => {\n    this.setState({ containerWidth: nativeEvent.layout.width });\n  };\n\n  private emitStateChanged = (\n    newState: DrawerState,\n    drawerWillShow: boolean\n  ) => {\n    this.props.onDrawerStateChanged?.(newState, drawerWillShow);\n  };\n\n  private openingHandlerStateChange = ({\n    nativeEvent,\n  }: HandlerStateChangeEvent<PanGestureHandlerEventPayload>) => {\n    if (nativeEvent.oldState === State.ACTIVE) {\n      this.handleRelease({ nativeEvent });\n    } else if (nativeEvent.state === State.ACTIVE) {\n      this.emitStateChanged(DRAGGING, false);\n      if (this.props.keyboardDismissMode === 'on-drag') {\n        Keyboard.dismiss();\n      }\n      if (this.props.hideStatusBar) {\n        StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');\n      }\n    }\n  };\n\n  private onTapHandlerStateChange = ({\n    nativeEvent,\n  }: HandlerStateChangeEvent<TapGestureHandlerEventPayload>) => {\n    if (\n      this.drawerShown &&\n      nativeEvent.oldState === State.ACTIVE &&\n      this.props.drawerLockMode !== 'locked-open'\n    ) {\n      this.closeDrawer();\n    }\n  };\n\n  private handleRelease = ({\n    nativeEvent,\n  }: HandlerStateChangeEvent<PanGestureHandlerEventPayload>) => {\n    const { drawerWidth, drawerPosition, drawerType } = this.props;\n    const { containerWidth } = this.state;\n    let { translationX: dragX, velocityX, x: touchX } = nativeEvent;\n\n    if (drawerPosition !== 'left') {\n      // See description in _updateAnimatedEvent about why events are flipped\n      // for right-side drawer\n      dragX = -dragX;\n      touchX = containerWidth - touchX;\n      velocityX = -velocityX;\n    }\n\n    const gestureStartX = touchX - dragX;\n    let dragOffsetBasedOnStart = 0;\n\n    if (drawerType === 'front') {\n      dragOffsetBasedOnStart =\n        gestureStartX > drawerWidth! ? gestureStartX - drawerWidth! : 0;\n    }\n\n    const startOffsetX =\n      dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth! : 0);\n    const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;\n\n    const shouldOpen = projOffsetX > drawerWidth! / 2;\n\n    if (shouldOpen) {\n      this.animateDrawer(startOffsetX, drawerWidth!, velocityX);\n    } else {\n      this.animateDrawer(startOffsetX, 0, velocityX);\n    }\n  };\n\n  private updateShowing = (showing: boolean) => {\n    this.drawerShown = showing;\n    this.accessibilityIsModalView.current?.setNativeProps({\n      accessibilityViewIsModal: showing,\n    });\n    this.pointerEventsView.current?.setNativeProps({\n      pointerEvents: showing ? 'auto' : 'none',\n    });\n    const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;\n    const fromLeft = drawerPosition === 'left';\n    // gestureOrientation is 1 if the expected gesture is from left to right and\n    // -1 otherwise e.g. when drawer is on the left and is closed we expect left\n    // to right gesture, thus orientation will be 1.\n    const gestureOrientation =\n      (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);\n    // When drawer is closed we want the hitSlop to be horizontally shorter than\n    // the container size by the value of SLOP. This will make it only activate\n    // when gesture happens not further than SLOP away from the edge\n    const hitSlop = fromLeft\n      ? { left: 0, width: showing ? undefined : edgeWidth }\n      : { right: 0, width: showing ? undefined : edgeWidth };\n    // @ts-ignore internal API, maybe could be fixed in handler types\n    this.panGestureHandler.current?.setNativeProps({\n      hitSlop,\n      activeOffsetX: gestureOrientation * minSwipeDistance!,\n    });\n  };\n\n  private animateDrawer = (\n    fromValue: number | null | undefined,\n    toValue: number,\n    velocity: number,\n    speed?: number\n  ) => {\n    this.state.dragX.setValue(0);\n    this.state.touchX.setValue(\n      this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth\n    );\n\n    if (fromValue != null) {\n      let nextFramePosition = fromValue;\n      if (this.props.useNativeAnimations) {\n        // When using native driver, we predict the next position of the\n        // animation because it takes one frame of a roundtrip to pass RELEASE\n        // event from native driver to JS before we can start animating. Without\n        // it, it is more noticable that the frame is dropped.\n        if (fromValue < toValue && velocity > 0) {\n          nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);\n        } else if (fromValue > toValue && velocity < 0) {\n          nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);\n        }\n      }\n      this.state.drawerTranslation.setValue(nextFramePosition);\n    }\n\n    const willShow = toValue !== 0;\n    this.updateShowing(willShow);\n    this.emitStateChanged(SETTLING, willShow);\n    if (this.props.hideStatusBar) {\n      StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');\n    }\n    Animated.spring(this.state.drawerTranslation, {\n      velocity,\n      bounciness: 0,\n      toValue,\n      useNativeDriver: this.props.useNativeAnimations!,\n      speed: speed ?? undefined,\n    }).start(({ finished }) => {\n      if (finished) {\n        this.emitStateChanged(IDLE, willShow);\n        if (willShow) {\n          this.props.onDrawerOpen?.();\n        } else {\n          this.props.onDrawerClose?.();\n        }\n      }\n    });\n  };\n\n  openDrawer = (options: DrawerMovementOption = {}) => {\n    this.animateDrawer(\n      // TODO: decide if it should be null or undefined is the proper value\n      undefined,\n      this.props.drawerWidth!,\n      options.velocity ? options.velocity : 0\n    );\n\n    // We need to force the update, otherwise the overlay is not rerendered and\n    // it would not be clickable\n    this.forceUpdate();\n  };\n\n  closeDrawer = (options: DrawerMovementOption = {}) => {\n    // TODO: decide if it should be null or undefined is the proper value\n    this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);\n\n    // We need to force the update, otherwise the overlay is not rerendered and\n    // it would be still clickable\n    this.forceUpdate();\n  };\n\n  private renderOverlay = () => {\n    /* Overlay styles */\n    invariant(this.openValue, 'should be set');\n    const overlayOpacity = this.openValue.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n      extrapolate: 'clamp',\n    });\n    const dynamicOverlayStyles = {\n      opacity: overlayOpacity,\n      backgroundColor: this.props.overlayColor,\n    };\n\n    return (\n      <TapGestureHandler onHandlerStateChange={this.onTapHandlerStateChange}>\n        <Animated.View\n          pointerEvents={this.drawerShown ? 'auto' : 'none'}\n          ref={this.pointerEventsView}\n          style={[styles.overlay, dynamicOverlayStyles]}\n        />\n      </TapGestureHandler>\n    );\n  };\n\n  private renderDrawer = () => {\n    const {\n      drawerBackgroundColor,\n      drawerWidth,\n      drawerPosition,\n      drawerType,\n      drawerContainerStyle,\n      contentContainerStyle,\n    } = this.props;\n\n    const fromLeft = drawerPosition === 'left';\n    const drawerSlide = drawerType !== 'back';\n    const containerSlide = drawerType !== 'front';\n\n    // we rely on row and row-reverse flex directions to position the drawer\n    // properly. Apparently for RTL these are flipped which requires us to use\n    // the opposite setting for the drawer to appear from left or right\n    // according to the drawerPosition prop\n    const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;\n\n    const dynamicDrawerStyles = {\n      backgroundColor: drawerBackgroundColor,\n      width: drawerWidth,\n    };\n    const openValue = this.openValue;\n    invariant(openValue, 'should be set');\n\n    let containerStyles;\n    if (containerSlide) {\n      const containerTranslateX = openValue.interpolate({\n        inputRange: [0, 1],\n        outputRange: fromLeft ? [0, drawerWidth!] : [0, -drawerWidth!],\n        extrapolate: 'clamp',\n      });\n      containerStyles = {\n        transform: [{ translateX: containerTranslateX }],\n      };\n    }\n\n    let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;\n    if (drawerSlide) {\n      const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;\n      drawerTranslateX = openValue.interpolate({\n        inputRange: [0, 1],\n        outputRange: [closedDrawerOffset, 0],\n        extrapolate: 'clamp',\n      });\n    }\n    const drawerStyles: {\n      transform: { translateX: number | Animated.AnimatedInterpolation }[];\n      flexDirection: 'row-reverse' | 'row';\n    } = {\n      transform: [{ translateX: drawerTranslateX }],\n      flexDirection: reverseContentDirection ? 'row-reverse' : 'row',\n    };\n\n    return (\n      <Animated.View style={styles.main} onLayout={this.handleContainerLayout}>\n        <Animated.View\n          style={[\n            drawerType === 'front'\n              ? styles.containerOnBack\n              : styles.containerInFront,\n            containerStyles,\n            contentContainerStyle,\n          ]}\n          importantForAccessibility={\n            this.drawerShown ? 'no-hide-descendants' : 'yes'\n          }>\n          {typeof this.props.children === 'function'\n            ? this.props.children(this.openValue)\n            : this.props.children}\n          {this.renderOverlay()}\n        </Animated.View>\n        <Animated.View\n          pointerEvents=\"box-none\"\n          ref={this.accessibilityIsModalView}\n          accessibilityViewIsModal={this.drawerShown}\n          style={[styles.drawerContainer, drawerStyles, drawerContainerStyle]}>\n          <View style={dynamicDrawerStyles}>\n            {this.props.renderNavigationView(this.openValue as Animated.Value)}\n          </View>\n        </Animated.View>\n      </Animated.View>\n    );\n  };\n\n  private setPanGestureRef = (ref: PanGestureHandler) => {\n    // TODO(TS): make sure it is OK taken from\n    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842\n    (this\n      .panGestureHandler as React.MutableRefObject<PanGestureHandler>).current = ref;\n    this.props.onGestureRef?.(ref);\n  };\n\n  render() {\n    const {\n      drawerPosition,\n      drawerLockMode,\n      edgeWidth,\n      minSwipeDistance,\n    } = this.props;\n\n    const fromLeft = drawerPosition === 'left';\n\n    // gestureOrientation is 1 if the expected gesture is from left to right and\n    // -1 otherwise e.g. when drawer is on the left and is closed we expect left\n    // to right gesture, thus orientation will be 1.\n    const gestureOrientation =\n      (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);\n\n    // When drawer is closed we want the hitSlop to be horizontally shorter than\n    // the container size by the value of SLOP. This will make it only activate\n    // when gesture happens not further than SLOP away from the edge\n    const hitSlop = fromLeft\n      ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }\n      : { right: 0, width: this.drawerShown ? undefined : edgeWidth };\n\n    return (\n      <PanGestureHandler\n        // @ts-ignore could be fixed in handler types\n        ref={this.setPanGestureRef}\n        hitSlop={hitSlop}\n        activeOffsetX={gestureOrientation * minSwipeDistance!}\n        failOffsetY={[-15, 15]}\n        onGestureEvent={this.onGestureEvent}\n        onHandlerStateChange={this.openingHandlerStateChange}\n        enableTrackpadTwoFingerGesture={\n          this.props.enableTrackpadTwoFingerGesture\n        }\n        enabled={\n          drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'\n        }>\n        {this.renderDrawer()}\n      </PanGestureHandler>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  drawerContainer: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 1001,\n    flexDirection: 'row',\n  },\n  containerInFront: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 1002,\n  },\n  containerOnBack: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  main: {\n    flex: 1,\n    zIndex: 0,\n    overflow: 'hidden',\n  },\n  overlay: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 1000,\n  },\n});\n"]}