@draftbit/core 46.9.1-1cf4d4.2 → 46.9.1-1f5cbe.2

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _BottomSheetComponent = _interopRequireDefault(require("./BottomSheetComponent"));
+var _theming = require("../../theming");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 BottomSheet = _ref => {
+  let {
+    theme,
+    snapPoints = ["10%", "50%", "80%"],
+    initialSnapIndex = 0,
+    showHandle = true,
+    handleColor = theme.colors.divider,
+    topBorderRadius = 20,
+    borderWidth = 1,
+    borderColor = theme.colors.divider,
+    onSettle,
+    style,
+    children,
+    ...rest
+  } = _ref;
+  const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.parentContainer,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/_react.default.createElement(_BottomSheetComponent.default, _extends({
+    componentType: "ScrollView",
+    snapPoints: snapPoints,
+    initialSnapIndex: initialSnapIndex,
+    renderHandle: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showHandle && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [styles.handleContainer, {
+        backgroundColor,
+        borderTopLeftRadius: topBorderRadius,
+        borderTopRightRadius: topBorderRadius
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [styles.handle, {
+        backgroundColor: handleColor
+      }]
+    }))),
+    contentContainerStyle: [styles.contentContainerStyle, style],
+    containerStyle: _reactNative.StyleSheet.flatten([styles.containerStyle, {
+      backgroundColor,
+      borderTopLeftRadius: topBorderRadius,
+      borderTopRightRadius: topBorderRadius,
+      borderWidth,
+      borderColor
+    }]),
+    onSettle: onSettle
+  }, rest), children));
+};
+const styles = _reactNative.StyleSheet.create({
+  //Render on top of everything
+  parentContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 10,
+    overflow: "hidden"
+  },
+  contentContainerStyle: {
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  containerStyle: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  handleContainer: {
+    alignItems: "center",
+    paddingVertical: 20
+  },
+  handle: {
+    width: 40,
+    height: 2,
+    borderRadius: 4
+  }
+});
+var _default = (0, _theming.withTheme)(BottomSheet);
+exports.default = _default;

package/lib/commonjs/components/BottomSheet/BottomSheetComponent.js

@@ -0,0 +1,480 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScrollBottomSheet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+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; }
+/**
+ * Slightly modfied version as taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet
+ * Main previously breaking change:
+ * const node = this.props.innerRef.current?.getNode() ==> const node = this.props.innerRef.current as any
+ */
+/**
+ * Copyright (c) 2020 Raul Gomez Acuna
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const {
+  //@ts-ignore
+  interpolate: interpolateDeprecated,
+  // @ts-ignore: this property is only present in Reanimated 2
+  interpolateNode
+} = _reactNativeReanimated.default;
+const interpolate = interpolateNode !== null && interpolateNode !== void 0 ? interpolateNode : interpolateDeprecated;
+//@ts-ignore
+const Easing = _reactNativeReanimated.EasingNode !== null && _reactNativeReanimated.EasingNode !== void 0 ? _reactNativeReanimated.EasingNode : _reactNativeReanimated.Easing;
+const FlatListComponentType = "FlatList";
+const ScrollViewComponentType = "ScrollView";
+const SectionListComponentType = "SectionList";
+const TimingAnimationType = "timing";
+const SpringAnimationType = "spring";
+const DEFAULT_SPRING_PARAMS = {
+  damping: 50,
+  mass: 0.3,
+  stiffness: 121.6,
+  overshootClamping: true,
+  restSpeedThreshold: 0.3,
+  restDisplacementThreshold: 0.3
+};
+const {
+  height: windowHeight
+} = _reactNative.Dimensions.get("window");
+const IOS_NORMAL_DECELERATION_RATE = 0.998;
+const ANDROID_NORMAL_DECELERATION_RATE = 0.985;
+const DEFAULT_ANIMATION_DURATION = 250;
+const DEFAULT_EASING = Easing.inOut(Easing.linear);
+const imperativeScrollOptions = {
+  [FlatListComponentType]: {
+    method: "scrollToIndex",
+    args: {
+      index: 0,
+      viewPosition: 0,
+      viewOffset: 1000,
+      animated: true
+    }
+  },
+  [ScrollViewComponentType]: {
+    method: "scrollTo",
+    args: {
+      x: 0,
+      y: 0,
+      animated: true
+    }
+  },
+  [SectionListComponentType]: {
+    method: "scrollToLocation",
+    args: {
+      itemIndex: 0,
+      sectionIndex: 0,
+      viewPosition: 0,
+      viewOffset: 1000,
+      animated: true
+    }
+  }
+};
+class ScrollBottomSheet extends _react.Component {
+  constructor(props) {
+    var _this;
+    var _a;
+    super(props);
+    _this = this;
+    /**
+     * Gesture Handler references
+     */
+    this.masterDrawer = /*#__PURE__*/_react.default.createRef();
+    this.drawerHandleRef = /*#__PURE__*/_react.default.createRef();
+    this.drawerContentRef = /*#__PURE__*/_react.default.createRef();
+    this.scrollComponentRef = /*#__PURE__*/_react.default.createRef();
+    /**
+     * Flag to indicate imperative snapping
+     */
+    this.isManuallySetValue = new _reactNativeReanimated.Value(0);
+    /**
+     * Manual snapping amount
+     */
+    this.manualYOffset = new _reactNativeReanimated.Value(0);
+    this.prevSnapIndex = -1;
+    this.dragY = new _reactNativeReanimated.Value(0);
+    this.prevDragY = new _reactNativeReanimated.Value(0);
+    this.tempDestSnapPoint = new _reactNativeReanimated.Value(0);
+    this.isAndroid = new _reactNativeReanimated.Value(Number(_reactNative.Platform.OS === "android"));
+    this.animationClock = new _reactNativeReanimated.Clock();
+    this.animationPosition = new _reactNativeReanimated.Value(0);
+    this.animationFinished = new _reactNativeReanimated.Value(0);
+    this.animationFrameTime = new _reactNativeReanimated.Value(0);
+    this.velocityY = new _reactNativeReanimated.Value(0);
+    this.lastStartScrollY = new _reactNativeReanimated.Value(0);
+    this.destSnapPoint = new _reactNativeReanimated.Value(0);
+    this.dragWithHandle = new _reactNativeReanimated.Value(0);
+    this.scrollUpAndPullDown = new _reactNativeReanimated.Value(0);
+    this.convertPercentageToDp = str => Number(str.split("%")[0]) * (windowHeight - this.props.topInset) / 100;
+    this.getNormalisedSnapPoints = () => {
+      return this.props.snapPoints.map(p => {
+        if (typeof p === "string") {
+          return this.convertPercentageToDp(p);
+        } else if (typeof p === "number") {
+          return p;
+        }
+        throw new Error("Invalid type for value ".concat(p, ": ").concat(typeof p, ". It should be either a percentage string or a number"));
+      });
+    };
+    this.getScrollComponent = () => {
+      switch (this.props.componentType) {
+        case "FlatList":
+          return _reactNative.FlatList;
+        case "ScrollView":
+          return _reactNative.ScrollView;
+        case "SectionList":
+          return _reactNative.SectionList;
+        default:
+          throw new Error("Component type not supported: it should be one of `FlatList`, `ScrollView` or `SectionList`");
+      }
+    };
+    this.snapTo = index => {
+      const snapPoints = this.getNormalisedSnapPoints();
+      this.isManuallySetValue.setValue(1);
+      this.manualYOffset.setValue(snapPoints[index]);
+      this.nextSnapIndex.setValue(index);
+    };
+    const {
+      initialSnapIndex,
+      animationType
+    } = props;
+    const animationDriver = animationType === "timing" ? 0 : 1;
+    const animationDuration = props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.duration) || DEFAULT_ANIMATION_DURATION;
+    const ScrollComponent = this.getScrollComponent();
+    // @ts-ignore
+    this.scrollComponent = _reactNativeReanimated.default.createAnimatedComponent(ScrollComponent);
+    const snapPoints = this.getNormalisedSnapPoints();
+    const openPosition = snapPoints[0];
+    const closedPosition = this.props.enableOverScroll ? windowHeight : snapPoints[snapPoints.length - 1];
+    const initialSnap = snapPoints[initialSnapIndex];
+    this.nextSnapIndex = new _reactNativeReanimated.Value(initialSnapIndex);
+    const initialDecelerationRate = _reactNative.Platform.select({
+      android: props.initialSnapIndex === 0 ? ANDROID_NORMAL_DECELERATION_RATE : 0,
+      ios: IOS_NORMAL_DECELERATION_RATE
+    });
+    this.decelerationRate = new _reactNativeReanimated.Value(initialDecelerationRate);
+    //@ts-ignore
+    const handleGestureState = new _reactNativeReanimated.Value(-1);
+    //@ts-ignore
+    const handleOldGestureState = new _reactNativeReanimated.Value(-1);
+    //@ts-ignore
+    const drawerGestureState = new _reactNativeReanimated.Value(-1);
+    //@ts-ignore
+    const drawerOldGestureState = new _reactNativeReanimated.Value(-1);
+    const lastSnapInRange = new _reactNativeReanimated.Value(1);
+    this.prevTranslateYOffset = new _reactNativeReanimated.Value(initialSnap);
+    this.translationY = new _reactNativeReanimated.Value(initialSnap);
+    this.lastSnap = new _reactNativeReanimated.Value(initialSnap);
+    this.onHandleGestureEvent = (0, _reactNativeReanimated.event)([{
+      nativeEvent: {
+        translationY: this.dragY,
+        oldState: handleOldGestureState,
+        state: handleGestureState,
+        velocityY: this.velocityY
+      }
+    }]);
+    this.onDrawerGestureEvent = (0, _reactNativeReanimated.event)([{
+      nativeEvent: {
+        translationY: this.dragY,
+        oldState: drawerOldGestureState,
+        state: drawerGestureState,
+        velocityY: this.velocityY
+      }
+    }]);
+    this.onScrollBeginDrag = (0, _reactNativeReanimated.event)([{
+      nativeEvent: {
+        contentOffset: {
+          y: this.lastStartScrollY
+        }
+      }
+    }]);
+    const didHandleGestureBegin = (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.ACTIVE);
+    const isAnimationInterrupted = (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.or)((0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.BEGAN), (0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.BEGAN), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(this.isAndroid, 0), (0, _reactNativeReanimated.eq)(animationDriver, 1), (0, _reactNativeReanimated.or)((0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.ACTIVE)))), (0, _reactNativeReanimated.clockRunning)(this.animationClock));
+    this.didGestureFinish = (0, _reactNativeReanimated.or)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(handleOldGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.END)), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(drawerOldGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.END)));
+    // Function that determines if the last snap point is in the range {snapPoints}
+    // In the case of interruptions in the middle of an animation, we'll get
+    // lastSnap values outside the range
+    const isLastSnapPointInRange = function () {
+      let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return i === snapPoints.length ? lastSnapInRange : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(_this.lastSnap, snapPoints[i]), [(0, _reactNativeReanimated.set)(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
+    };
+    const scrollY = [(0, _reactNativeReanimated.set)(lastSnapInRange, 0), isLastSnapPointInRange(), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.or)(didHandleGestureBegin, (0, _reactNativeReanimated.and)(this.isManuallySetValue, (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.manualYOffset, snapPoints[0])))), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 1), 0]), (0, _reactNativeReanimated.cond)(
+    // This is to account for a continuous scroll on the drawer from a snap point
+    // Different than top, bringing the drawer to the top position, so that if we
+    // change scroll direction without releasing the gesture, it doesn't pull down the drawer again
+    (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), (0, _reactNativeReanimated.greaterThan)(snapPoints[0], (0, _reactNativeReanimated.add)(this.lastSnap, this.dragY)), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.lastSnap, snapPoints[0])), lastSnapInRange)), [(0, _reactNativeReanimated.set)(this.lastSnap, snapPoints[0]), (0, _reactNativeReanimated.set)(this.dragWithHandle, 0), this.lastStartScrollY], (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), 0, this.lastStartScrollY))];
+    this.didScrollUpAndPullDown = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.greaterOrEq)(this.dragY, this.lastStartScrollY), (0, _reactNativeReanimated.greaterThan)(this.lastStartScrollY, 0)), (0, _reactNativeReanimated.set)(this.scrollUpAndPullDown, 1));
+    this.setTranslationY = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)(this.dragWithHandle), (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.greaterOrEq)(this.dragY, this.lastStartScrollY))), (0, _reactNativeReanimated.set)(this.translationY, (0, _reactNativeReanimated.sub)(this.dragY, this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.translationY, this.dragY));
+    this.extraOffset = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0);
+    const endOffsetY = (0, _reactNativeReanimated.add)(this.lastSnap, this.translationY, (0, _reactNativeReanimated.multiply)(1 - props.friction, this.velocityY));
+    this.calculateNextSnapPoint = function () {
+      let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return i === snapPoints.length ? _this.tempDestSnapPoint : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.greaterThan)((0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)(_this.tempDestSnapPoint, endOffsetY)), (0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)((0, _reactNativeReanimated.add)(snapPoints[i], _this.extraOffset), endOffsetY))), [(0, _reactNativeReanimated.set)(_this.tempDestSnapPoint, (0, _reactNativeReanimated.add)(snapPoints[i], _this.extraOffset)), (0, _reactNativeReanimated.set)(_this.nextSnapIndex, i), _this.calculateNextSnapPoint(i + 1)], _this.calculateNextSnapPoint(i + 1));
+    };
+    const runAnimation = _ref => {
+      let {
+        clock,
+        from,
+        to,
+        position,
+        finished,
+        velocity,
+        frameTime
+      } = _ref;
+      var _a;
+      const state = {
+        finished,
+        velocity: new _reactNativeReanimated.Value(0),
+        position,
+        time: new _reactNativeReanimated.Value(0),
+        frameTime
+      };
+      const timingConfig = {
+        duration: animationDuration,
+        easing: props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.easing) || DEFAULT_EASING,
+        toValue: new _reactNativeReanimated.Value(0)
+      };
+      const springConfig = {
+        ...DEFAULT_SPRING_PARAMS,
+        ...(props.animationType === "spring" && props.animationConfig || {}),
+        toValue: new _reactNativeReanimated.Value(0)
+      };
+      return [(0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.clockRunning)(clock)), (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(finished, 1))), [
+      // If the clock isn't running, we reset all the animation params and start the clock
+      (0, _reactNativeReanimated.set)(state.finished, 0), (0, _reactNativeReanimated.set)(state.velocity, velocity), (0, _reactNativeReanimated.set)(state.time, 0), (0, _reactNativeReanimated.set)(state.position, from), (0, _reactNativeReanimated.set)(state.frameTime, 0), (0, _reactNativeReanimated.set)(timingConfig.toValue, to), (0, _reactNativeReanimated.set)(springConfig.toValue, to), (0, _reactNativeReanimated.startClock)(clock)]),
+      // We run the step here that is going to update position
+      (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(animationDriver, 0),
+      //@ts-ignore
+      (0, _reactNativeReanimated.timing)(clock, state, timingConfig), (0, _reactNativeReanimated.spring)(clock, state, springConfig)), (0, _reactNativeReanimated.cond)(state.finished, [(0, _reactNativeReanimated.call)([this.nextSnapIndex], _ref2 => {
+        let [value] = _ref2;
+        var _a, _b;
+        if (value !== this.prevSnapIndex) {
+          (_b = (_a = this.props).onSettle) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        }
+        this.prevSnapIndex = value;
+      }),
+      // Resetting appropriate values
+      (0, _reactNativeReanimated.set)(drawerOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(handleOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(this.prevTranslateYOffset, state.position), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), [(0, _reactNativeReanimated.set)(this.prevTranslateYOffset, (0, _reactNativeReanimated.sub)(this.prevTranslateYOffset, this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.lastStartScrollY, 0), (0, _reactNativeReanimated.set)(this.scrollUpAndPullDown, 0)]), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.destSnapPoint, snapPoints[0]), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 0)]), (0, _reactNativeReanimated.set)(this.isManuallySetValue, 0), (0, _reactNativeReanimated.set)(this.manualYOffset, 0), (0, _reactNativeReanimated.stopClock)(clock), this.prevTranslateYOffset],
+      // We made the block return the updated position,
+      state.position)];
+    };
+    const translateYOffset = (0, _reactNativeReanimated.cond)(isAnimationInterrupted, [
+    // set(prevTranslateYOffset, animationPosition) should only run if we are
+    // interrupting an animation when the drawer is currently in a different
+    // position than the top
+    (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.or)(this.dragWithHandle, (0, _reactNativeReanimated.greaterOrEq)((0, _reactNativeReanimated.abs)(this.prevDragY), this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.prevTranslateYOffset, this.animationPosition)), (0, _reactNativeReanimated.set)(this.animationFinished, 1), (0, _reactNativeReanimated.set)(this.translationY, 0),
+    // Resetting appropriate values
+    (0, _reactNativeReanimated.set)(drawerOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(handleOldGestureState, _reactNativeGestureHandler.State.END),
+    // By forcing that frameTime exceeds duration, it has the effect of stopping the animation
+    (0, _reactNativeReanimated.set)(this.animationFrameTime, (0, _reactNativeReanimated.add)(animationDuration, 1000)), (0, _reactNativeReanimated.set)(this.velocityY, 0), (0, _reactNativeReanimated.stopClock)(this.animationClock), this.prevTranslateYOffset], (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.or)(this.didGestureFinish, this.isManuallySetValue, (0, _reactNativeReanimated.clockRunning)(this.animationClock)), [runAnimation({
+      clock: this.animationClock,
+      from: (0, _reactNativeReanimated.cond)(this.isManuallySetValue, this.prevTranslateYOffset, (0, _reactNativeReanimated.add)(this.prevTranslateYOffset, this.translationY)),
+      to: this.destSnapPoint,
+      position: this.animationPosition,
+      finished: this.animationFinished,
+      frameTime: this.animationFrameTime,
+      velocity: this.velocityY
+    })], [(0, _reactNativeReanimated.set)(this.animationFrameTime, 0), (0, _reactNativeReanimated.set)(this.animationFinished, 0),
+    // @ts-ignore
+    this.prevTranslateYOffset]));
+    this.translateY = interpolate((0, _reactNativeReanimated.add)(translateYOffset, this.dragY, (0, _reactNativeReanimated.multiply)(scrollY, -1)), {
+      inputRange: [openPosition, closedPosition],
+      outputRange: [openPosition, closedPosition],
+      extrapolate: _reactNativeReanimated.Extrapolate.CLAMP
+    });
+    this.position = interpolate(this.translateY, {
+      inputRange: [openPosition, snapPoints[snapPoints.length - 1]],
+      outputRange: [1, 0],
+      extrapolate: _reactNativeReanimated.Extrapolate.CLAMP
+    });
+  }
+  render() {
+    const {
+      renderHandle,
+      initialSnapIndex,
+      containerStyle,
+      ...rest
+    } = this.props;
+    const AnimatedScrollableComponent = this.scrollComponent;
+    const normalisedSnapPoints = this.getNormalisedSnapPoints();
+    const initialSnap = normalisedSnapPoints[initialSnapIndex];
+    const Content = /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+      style: [_reactNative.StyleSheet.absoluteFillObject, containerStyle,
+      // @ts-ignore
+      {
+        transform: [{
+          translateY: this.translateY
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
+      ref: this.drawerHandleRef,
+      shouldCancelWhenOutside: false,
+      simultaneousHandlers: this.masterDrawer,
+      onGestureEvent: this.onHandleGestureEvent,
+      onHandlerStateChange: this.onHandleGestureEvent
+    }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, null, renderHandle())), /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
+      ref: this.drawerContentRef,
+      simultaneousHandlers: [this.scrollComponentRef, this.masterDrawer],
+      shouldCancelWhenOutside: false,
+      onGestureEvent: this.onDrawerGestureEvent,
+      onHandlerStateChange: this.onDrawerGestureEvent
+    }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+      style: styles.container
+    }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler, {
+      ref: this.scrollComponentRef,
+      waitFor: this.masterDrawer,
+      simultaneousHandlers: this.drawerContentRef
+    }, /*#__PURE__*/_react.default.createElement(AnimatedScrollableComponent, {
+      overScrollMode: "never",
+      bounces: false,
+      ...rest,
+      ref: this.props.innerRef,
+      // @ts-ignore
+      decelerationRate: this.decelerationRate,
+      onScrollBeginDrag: this.onScrollBeginDrag,
+      scrollEventThrottle: 1,
+      contentContainerStyle: [rest.contentContainerStyle, {
+        paddingBottom: this.getNormalisedSnapPoints()[0]
+      }]
+    })))), this.props.animatedPosition && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.position, (0, _reactNativeReanimated.set)(this.props.animatedPosition, this.position))
+    }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.dragY, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.dragY, 0)), (0, _reactNativeReanimated.set)(this.prevDragY, this.dragY)))
+    }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.didGestureFinish, (0, _reactNativeReanimated.cond)(this.didGestureFinish, [this.didScrollUpAndPullDown, this.setTranslationY, (0, _reactNativeReanimated.set)(this.tempDestSnapPoint, (0, _reactNativeReanimated.add)(normalisedSnapPoints[0], this.extraOffset)), (0, _reactNativeReanimated.set)(this.nextSnapIndex, 0), (0, _reactNativeReanimated.set)(this.destSnapPoint, this.calculateNextSnapPoint()), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.greaterThan)(this.dragY, this.lastStartScrollY), this.isAndroid, (0, _reactNativeReanimated.not)(this.dragWithHandle)), (0, _reactNativeReanimated.call)([], () => {
+        var _a, _b;
+        // This prevents the scroll glide from happening on Android when pulling down with inertia.
+        // It's not perfect, but does the job for now
+        const {
+          method,
+          args
+        } = imperativeScrollOptions[this.props.componentType];
+        // @ts-ignore
+        const node = this.props.innerRef.current;
+        if (node && node[method] && (this.props.componentType === "FlatList" && (((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0 || this.props.componentType === "SectionList" && this.props.sections.length > 0 || this.props.componentType === "ScrollView")) {
+          node[method](args);
+        }
+      })), (0, _reactNativeReanimated.set)(this.dragY, 0), (0, _reactNativeReanimated.set)(this.velocityY, 0), (0, _reactNativeReanimated.set)(this.lastSnap, (0, _reactNativeReanimated.sub)(this.destSnapPoint, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0))), (0, _reactNativeReanimated.call)([this.lastSnap], _ref3 => {
+        let [value] = _ref3;
+        var _a, _b;
+        // This is the TapGHandler trick
+        // @ts-ignore
+        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      }), (0, _reactNativeReanimated.set)(this.decelerationRate, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.isAndroid, 1), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE))]))
+    }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.isManuallySetValue, [(0, _reactNativeReanimated.cond)(this.isManuallySetValue, [(0, _reactNativeReanimated.set)(this.destSnapPoint, this.manualYOffset), (0, _reactNativeReanimated.set)(this.animationFinished, 0), (0, _reactNativeReanimated.set)(this.lastSnap, this.manualYOffset), (0, _reactNativeReanimated.call)([this.lastSnap], _ref4 => {
+        let [value] = _ref4;
+        var _a, _b;
+        // This is the TapGHandler trick
+        // @ts-ignore
+        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      })], [(0, _reactNativeReanimated.set)(this.nextSnapIndex, 0)])])
+    }));
+    // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+    // waitFor logic
+    if (_reactNative.Platform.OS === "android") {
+      return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+        maxDurationMs: 100000,
+        ref: this.masterDrawer,
+        maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0],
+        shouldCancelWhenOutside: false
+      }, Content);
+    }
+    // On iOS, We need to wrap the content on a view with PointerEvents box-none
+    // So that we can start scrolling automatically when reaching the top without
+    // Stopping the gesture
+    return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+      maxDurationMs: 100000,
+      ref: this.masterDrawer,
+      maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFillObject,
+      pointerEvents: "box-none"
+    }, Content));
+  }
+}
+exports.ScrollBottomSheet = ScrollBottomSheet;
+ScrollBottomSheet.defaultProps = {
+  topInset: 0,
+  friction: 0.95,
+  animationType: "timing",
+  innerRef: /*#__PURE__*/_react.default.createRef(),
+  enableOverScroll: false
+};
+var _default = ScrollBottomSheet;
+exports.default = _default;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+}); @ts-ignore
+        (_this$masterDrawer = this.masterDrawer) === null || _this$masterDrawer === void 0 ? void 0 : (_this$masterDrawer$cu = _this$masterDrawer.current) === null || _this$masterDrawer$cu === void 0 ? void 0 : _this$masterDrawer$cu.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      }), (0, _reactNativeReanimated.set)(this.decelerationRate, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.isAndroid, 1), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE))]))
+    }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.isManuallySetValue, [(0, _reactNativeReanimated.cond)(this.isManuallySetValue, [(0, _reactNativeReanimated.set)(this.destSnapPoint, this.manualYOffset), (0, _reactNativeReanimated.set)(this.animationFinished, 0), (0, _reactNativeReanimated.set)(this.lastSnap, this.manualYOffset), (0, _reactNativeReanimated.call)([this.lastSnap], _ref4 => {
+        var _this$masterDrawer2, _this$masterDrawer2$c;
+        let [value] = _ref4;
+        // This is the TapGHandler trick
+        // @ts-ignore
+        (_this$masterDrawer2 = this.masterDrawer) === null || _this$masterDrawer2 === void 0 ? void 0 : (_this$masterDrawer2$c = _this$masterDrawer2.current) === null || _this$masterDrawer2$c === void 0 ? void 0 : _this$masterDrawer2$c.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      })], [(0, _reactNativeReanimated.set)(this.nextSnapIndex, 0)])])
+    }));
+
+    // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+    // waitFor logic
+    if (_reactNative.Platform.OS === "android") {
+      return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+        maxDurationMs: 100000,
+        ref: this.masterDrawer,
+        maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0],
+        shouldCancelWhenOutside: false
+      }, Content);
+    }
+
+    // On iOS, We need to wrap the content on a view with PointerEvents box-none
+    // So that we can start scrolling automatically when reaching the top without
+    // Stopping the gesture
+    return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+      maxDurationMs: 100000,
+      ref: this.masterDrawer,
+      maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFillObject,
+      pointerEvents: "box-none"
+    }, Content));
+  }
+}
+exports.ScrollBottomSheet = ScrollBottomSheet;
+_defineProperty(ScrollBottomSheet, "defaultProps", {
+  topInset: 0,
+  friction: 0.95,
+  animationType: "timing",
+  innerRef: /*#__PURE__*/_react.default.createRef(),
+  enableOverScroll: false
+});
+var _default = ScrollBottomSheet;
+exports.default = _default;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});

package/lib/commonjs/components/BottomSheet/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.default;
+  }
+});
+var _BottomSheet = _interopRequireDefault(require("./BottomSheet"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/components/CircleImage.js

@@ -10,7 +10,6 @@ var _Config = _interopRequireDefault(require("./Config"));
 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 _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 CircleImage = _ref => {
   let {
     source = _Config.default.placeholderImageURL,
@@ -19,6 +18,21 @@ const CircleImage = _ref => {
     ...props
   } = _ref;
   const borderRadius = size / 2;
+  return /*#__PURE__*/React.createElement(_reactNative.Image, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius
+    }, style],
+    source: typeof source === "string" ? {
+      uri: source
+    } : source,
+    resizeMode: "cover",
+    ...props
+  });
+};
+var _default = CircleImage;
+exports.default = _default;size / 2;
   return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
     style: [{
       width: size,

package/lib/commonjs/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Banner", {
     return _Banner.default;
   }
 });
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -441,6 +447,7 @@ var _Shadow = _interopRequireDefault(require("./components/Shadow"));
 var _DeckSwiper = require("./components/DeckSwiper");
 var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
+var _BottomSheet = require("./components/BottomSheet");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));