@draftbit/core 46.9.1-310331.2 → 46.9.1-4cfcf2.2

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

@@ -0,0 +1,470 @@
+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); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * 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.
+ *
+ */
+
+import React, { Component } from "react";
+import { Dimensions, FlatList, Platform, ScrollView, SectionList, StyleSheet, View } from "react-native";
+import Animated, { abs, add, and, call, Clock, clockRunning, cond, Easing as EasingDeprecated,
+// @ts-ignore: this property is only present in Reanimated 2
+EasingNode, eq, event, Extrapolate, greaterOrEq, greaterThan, multiply, not, onChange, or, set, startClock, stopClock, sub, spring, timing, Value } from "react-native-reanimated";
+import { NativeViewGestureHandler, PanGestureHandler, State as GestureState, TapGestureHandler } from "react-native-gesture-handler";
+const {
+  //@ts-ignore
+  interpolate: interpolateDeprecated,
+  // @ts-ignore: this property is only present in Reanimated 2
+  interpolateNode
+} = Animated;
+const interpolate = interpolateNode !== null && interpolateNode !== void 0 ? interpolateNode : interpolateDeprecated;
+//@ts-ignore
+const Easing = EasingNode !== null && EasingNode !== void 0 ? EasingNode : EasingDeprecated;
+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
+} = 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
+    }
+  }
+};
+export class ScrollBottomSheet extends Component {
+  /**
+   * Gesture Handler references
+   */
+
+  /**
+   * ScrollView prop
+   */
+
+  /**
+   * Pan gesture handler events for drawer handle and content
+   */
+
+  /**
+   * Main Animated Value that drives the top position of the UI drawer at any point in time
+   */
+
+  /**
+   * Animated value that keeps track of the position: 0 => closed, 1 => opened
+   */
+
+  /**
+   * Flag to indicate imperative snapping
+   */
+
+  /**
+   * Manual snapping amount
+   */
+
+  /**
+   * Keeps track of the current index
+   */
+
+  /**
+   * Deceleration rate of the scroll component. This is used only on Android to
+   * compensate the unexpected glide it gets sometimes.
+   */
+
+  constructor(props) {
+    var _props$animationConfi, _this;
+    super(props);
+    _this = this;
+    _defineProperty(this, "masterDrawer", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "drawerHandleRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "drawerContentRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "scrollComponentRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "onScrollBeginDrag", void 0);
+    _defineProperty(this, "onHandleGestureEvent", void 0);
+    _defineProperty(this, "onDrawerGestureEvent", void 0);
+    _defineProperty(this, "translateY", void 0);
+    _defineProperty(this, "position", void 0);
+    _defineProperty(this, "isManuallySetValue", new Value(0));
+    _defineProperty(this, "manualYOffset", new Value(0));
+    _defineProperty(this, "nextSnapIndex", void 0);
+    _defineProperty(this, "decelerationRate", void 0);
+    _defineProperty(this, "prevSnapIndex", -1);
+    _defineProperty(this, "dragY", new Value(0));
+    _defineProperty(this, "prevDragY", new Value(0));
+    _defineProperty(this, "tempDestSnapPoint", new Value(0));
+    _defineProperty(this, "isAndroid", new Value(Number(Platform.OS === "android")));
+    _defineProperty(this, "animationClock", new Clock());
+    _defineProperty(this, "animationPosition", new Value(0));
+    _defineProperty(this, "animationFinished", new Value(0));
+    _defineProperty(this, "animationFrameTime", new Value(0));
+    _defineProperty(this, "velocityY", new Value(0));
+    _defineProperty(this, "lastStartScrollY", new Value(0));
+    _defineProperty(this, "prevTranslateYOffset", void 0);
+    _defineProperty(this, "translationY", void 0);
+    _defineProperty(this, "destSnapPoint", new Value(0));
+    _defineProperty(this, "lastSnap", void 0);
+    _defineProperty(this, "dragWithHandle", new Value(0));
+    _defineProperty(this, "scrollUpAndPullDown", new Value(0));
+    _defineProperty(this, "didGestureFinish", void 0);
+    _defineProperty(this, "didScrollUpAndPullDown", void 0);
+    _defineProperty(this, "setTranslationY", void 0);
+    _defineProperty(this, "extraOffset", void 0);
+    _defineProperty(this, "calculateNextSnapPoint", void 0);
+    _defineProperty(this, "scrollComponent", void 0);
+    _defineProperty(this, "convertPercentageToDp", str => Number(str.split("%")[0]) * (windowHeight - this.props.topInset) / 100);
+    _defineProperty(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"));
+      });
+    });
+    _defineProperty(this, "getScrollComponent", () => {
+      switch (this.props.componentType) {
+        case "FlatList":
+          return FlatList;
+        case "ScrollView":
+          return ScrollView;
+        case "SectionList":
+          return SectionList;
+        default:
+          throw new Error("Component type not supported: it should be one of `FlatList`, `ScrollView` or `SectionList`");
+      }
+    });
+    _defineProperty(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" && ((_props$animationConfi = props.animationConfig) === null || _props$animationConfi === void 0 ? void 0 : _props$animationConfi.duration) || DEFAULT_ANIMATION_DURATION;
+    const ScrollComponent = this.getScrollComponent();
+    // @ts-ignore
+    this.scrollComponent = Animated.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 Value(initialSnapIndex);
+    const initialDecelerationRate = Platform.select({
+      android: props.initialSnapIndex === 0 ? ANDROID_NORMAL_DECELERATION_RATE : 0,
+      ios: IOS_NORMAL_DECELERATION_RATE
+    });
+    this.decelerationRate = new Value(initialDecelerationRate);
+
+    //@ts-ignore
+    const handleGestureState = new Value(-1);
+    //@ts-ignore
+    const handleOldGestureState = new Value(-1);
+    //@ts-ignore
+    const drawerGestureState = new Value(-1);
+    //@ts-ignore
+    const drawerOldGestureState = new Value(-1);
+    const lastSnapInRange = new Value(1);
+    this.prevTranslateYOffset = new Value(initialSnap);
+    this.translationY = new Value(initialSnap);
+    this.lastSnap = new Value(initialSnap);
+    this.onHandleGestureEvent = event([{
+      nativeEvent: {
+        translationY: this.dragY,
+        oldState: handleOldGestureState,
+        state: handleGestureState,
+        velocityY: this.velocityY
+      }
+    }]);
+    this.onDrawerGestureEvent = event([{
+      nativeEvent: {
+        translationY: this.dragY,
+        oldState: drawerOldGestureState,
+        state: drawerGestureState,
+        velocityY: this.velocityY
+      }
+    }]);
+    this.onScrollBeginDrag = event([{
+      nativeEvent: {
+        contentOffset: {
+          y: this.lastStartScrollY
+        }
+      }
+    }]);
+    const didHandleGestureBegin = eq(handleGestureState, GestureState.ACTIVE);
+    const isAnimationInterrupted = and(or(eq(handleGestureState, GestureState.BEGAN), eq(drawerGestureState, GestureState.BEGAN), and(eq(this.isAndroid, 0), eq(animationDriver, 1), or(eq(drawerGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.ACTIVE)))), clockRunning(this.animationClock));
+    this.didGestureFinish = or(and(eq(handleOldGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.END)), and(eq(drawerOldGestureState, GestureState.ACTIVE), eq(drawerGestureState, GestureState.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 : cond(eq(_this.lastSnap, _snapPoints[i]), [set(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
+    };
+    const scrollY = [set(lastSnapInRange, 0), isLastSnapPointInRange(), cond(or(didHandleGestureBegin, and(this.isManuallySetValue, not(eq(this.manualYOffset, _snapPoints[0])))), [set(this.dragWithHandle, 1), 0]), 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
+    and(eq(this.dragWithHandle, 1), greaterThan(_snapPoints[0], add(this.lastSnap, this.dragY)), and(not(eq(this.lastSnap, _snapPoints[0])), lastSnapInRange)), [set(this.lastSnap, _snapPoints[0]), set(this.dragWithHandle, 0), this.lastStartScrollY], cond(eq(this.dragWithHandle, 1), 0, this.lastStartScrollY))];
+    this.didScrollUpAndPullDown = cond(and(greaterOrEq(this.dragY, this.lastStartScrollY), greaterThan(this.lastStartScrollY, 0)), set(this.scrollUpAndPullDown, 1));
+    this.setTranslationY = cond(and(not(this.dragWithHandle), not(greaterOrEq(this.dragY, this.lastStartScrollY))), set(this.translationY, sub(this.dragY, this.lastStartScrollY)), set(this.translationY, this.dragY));
+    this.extraOffset = cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0);
+    const endOffsetY = add(this.lastSnap, this.translationY, 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 : cond(greaterThan(abs(sub(_this.tempDestSnapPoint, endOffsetY)), abs(sub(add(_snapPoints[i], _this.extraOffset), endOffsetY))), [set(_this.tempDestSnapPoint, add(_snapPoints[i], _this.extraOffset)), set(_this.nextSnapIndex, i), _this.calculateNextSnapPoint(i + 1)], _this.calculateNextSnapPoint(i + 1));
+    };
+    const runAnimation = _ref => {
+      var _props$animationConfi2;
+      let {
+        clock,
+        from,
+        to,
+        position,
+        finished,
+        velocity,
+        frameTime
+      } = _ref;
+      const state = {
+        finished,
+        velocity: new Value(0),
+        position,
+        time: new Value(0),
+        frameTime
+      };
+      const timingConfig = {
+        duration: animationDuration,
+        easing: props.animationType === "timing" && ((_props$animationConfi2 = props.animationConfig) === null || _props$animationConfi2 === void 0 ? void 0 : _props$animationConfi2.easing) || DEFAULT_EASING,
+        toValue: new Value(0)
+      };
+      const springConfig = {
+        ...DEFAULT_SPRING_PARAMS,
+        ...(props.animationType === "spring" && props.animationConfig || {}),
+        toValue: new Value(0)
+      };
+      return [cond(and(not(clockRunning(clock)), not(eq(finished, 1))), [
+      // If the clock isn't running, we reset all the animation params and start the clock
+      set(state.finished, 0), set(state.velocity, velocity), set(state.time, 0), set(state.position, from), set(state.frameTime, 0), set(timingConfig.toValue, to), set(springConfig.toValue, to), startClock(clock)]),
+      // We run the step here that is going to update position
+      cond(eq(animationDriver, 0),
+      //@ts-ignore
+      timing(clock, state, timingConfig), spring(clock, state, springConfig)), cond(state.finished, [call([this.nextSnapIndex], _ref2 => {
+        let [value] = _ref2;
+        if (value !== this.prevSnapIndex) {
+          var _this$props$onSettle, _this$props;
+          (_this$props$onSettle = (_this$props = this.props).onSettle) === null || _this$props$onSettle === void 0 ? void 0 : _this$props$onSettle.call(_this$props, value);
+        }
+        this.prevSnapIndex = value;
+      }),
+      // Resetting appropriate values
+      set(drawerOldGestureState, GestureState.END), set(handleOldGestureState, GestureState.END), set(this.prevTranslateYOffset, state.position), cond(eq(this.scrollUpAndPullDown, 1), [set(this.prevTranslateYOffset, sub(this.prevTranslateYOffset, this.lastStartScrollY)), set(this.lastStartScrollY, 0), set(this.scrollUpAndPullDown, 0)]), cond(eq(this.destSnapPoint, _snapPoints[0]), [set(this.dragWithHandle, 0)]), set(this.isManuallySetValue, 0), set(this.manualYOffset, 0), stopClock(clock), this.prevTranslateYOffset],
+      // We made the block return the updated position,
+      state.position)];
+    };
+    const translateYOffset = 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
+    cond(or(this.dragWithHandle, greaterOrEq(abs(this.prevDragY), this.lastStartScrollY)), set(this.prevTranslateYOffset, this.animationPosition)), set(this.animationFinished, 1), set(this.translationY, 0),
+    // Resetting appropriate values
+    set(drawerOldGestureState, GestureState.END), set(handleOldGestureState, GestureState.END),
+    // By forcing that frameTime exceeds duration, it has the effect of stopping the animation
+    set(this.animationFrameTime, add(animationDuration, 1000)), set(this.velocityY, 0), stopClock(this.animationClock), this.prevTranslateYOffset], cond(or(this.didGestureFinish, this.isManuallySetValue, clockRunning(this.animationClock)), [runAnimation({
+      clock: this.animationClock,
+      from: cond(this.isManuallySetValue, this.prevTranslateYOffset, add(this.prevTranslateYOffset, this.translationY)),
+      to: this.destSnapPoint,
+      position: this.animationPosition,
+      finished: this.animationFinished,
+      frameTime: this.animationFrameTime,
+      velocity: this.velocityY
+    })], [set(this.animationFrameTime, 0), set(this.animationFinished, 0),
+    // @ts-ignore
+    this.prevTranslateYOffset]));
+    this.translateY = interpolate(add(translateYOffset, this.dragY, multiply(scrollY, -1)), {
+      inputRange: [openPosition, closedPosition],
+      outputRange: [openPosition, closedPosition],
+      extrapolate: Extrapolate.CLAMP
+    });
+    this.position = interpolate(this.translateY, {
+      inputRange: [openPosition, _snapPoints[_snapPoints.length - 1]],
+      outputRange: [1, 0],
+      extrapolate: 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.createElement(Animated.View, {
+      style: [StyleSheet.absoluteFillObject, containerStyle,
+      // @ts-ignore
+      {
+        transform: [{
+          translateY: this.translateY
+        }]
+      }]
+    }, /*#__PURE__*/React.createElement(PanGestureHandler, {
+      ref: this.drawerHandleRef,
+      shouldCancelWhenOutside: false,
+      simultaneousHandlers: this.masterDrawer,
+      onGestureEvent: this.onHandleGestureEvent,
+      onHandlerStateChange: this.onHandleGestureEvent
+    }, /*#__PURE__*/React.createElement(Animated.View, null, renderHandle())), /*#__PURE__*/React.createElement(PanGestureHandler, {
+      ref: this.drawerContentRef,
+      simultaneousHandlers: [this.scrollComponentRef, this.masterDrawer],
+      shouldCancelWhenOutside: false,
+      onGestureEvent: this.onDrawerGestureEvent,
+      onHandlerStateChange: this.onDrawerGestureEvent
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(NativeViewGestureHandler, {
+      ref: this.scrollComponentRef,
+      waitFor: this.masterDrawer,
+      simultaneousHandlers: this.drawerContentRef
+    }, /*#__PURE__*/React.createElement(AnimatedScrollableComponent, _extends({
+      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.createElement(Animated.Code, {
+      exec: onChange(this.position, set(this.props.animatedPosition, this.position))
+    }), /*#__PURE__*/React.createElement(Animated.Code, {
+      exec: onChange(this.dragY, cond(not(eq(this.dragY, 0)), set(this.prevDragY, this.dragY)))
+    }), /*#__PURE__*/React.createElement(Animated.Code, {
+      exec: onChange(this.didGestureFinish, cond(this.didGestureFinish, [this.didScrollUpAndPullDown, this.setTranslationY, set(this.tempDestSnapPoint, add(normalisedSnapPoints[0], this.extraOffset)), set(this.nextSnapIndex, 0), set(this.destSnapPoint, this.calculateNextSnapPoint()), cond(and(greaterThan(this.dragY, this.lastStartScrollY), this.isAndroid, not(this.dragWithHandle)), call([], () => {
+        var _this$props2, _this$props2$data;
+        // 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" && (((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$data = _this$props2.data) === null || _this$props2$data === void 0 ? void 0 : _this$props2$data.length) || 0) > 0 || this.props.componentType === "SectionList" && this.props.sections.length > 0 || this.props.componentType === "ScrollView")) {
+          node[method](args);
+        }
+      })), set(this.dragY, 0), set(this.velocityY, 0), set(this.lastSnap, sub(this.destSnapPoint, cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0))), call([this.lastSnap], _ref3 => {
+        var _this$masterDrawer, _this$masterDrawer$cu;
+        let [value] = _ref3;
+        // This is the TapGHandler trick
+        // @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]
+        });
+      }), set(this.decelerationRate, cond(eq(this.isAndroid, 1), cond(eq(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE))]))
+    }), /*#__PURE__*/React.createElement(Animated.Code, {
+      exec: onChange(this.isManuallySetValue, [cond(this.isManuallySetValue, [set(this.destSnapPoint, this.manualYOffset), set(this.animationFinished, 0), set(this.lastSnap, this.manualYOffset), 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]
+        });
+      })], [set(this.nextSnapIndex, 0)])])
+    }));
+
+    // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+    // waitFor logic
+    if (Platform.OS === "android") {
+      return /*#__PURE__*/React.createElement(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.createElement(TapGestureHandler, {
+      maxDurationMs: 100000,
+      ref: this.masterDrawer,
+      maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: StyleSheet.absoluteFillObject,
+      pointerEvents: "box-none"
+    }, Content));
+  }
+}
+_defineProperty(ScrollBottomSheet, "defaultProps", {
+  topInset: 0,
+  friction: 0.95,
+  animationType: "timing",
+  innerRef: /*#__PURE__*/React.createRef(),
+  enableOverScroll: false
+});
+export default ScrollBottomSheet;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});

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

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./BottomSheet";

package/lib/module/index.js

@@ -35,7 +35,7 @@ export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
-export { default as YoutubePlayer } from "./components/YotubePlayer";
+export { BottomSheet } from "./components/BottomSheet";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/lib/module/mappings/BottomSheet.js

@@ -0,0 +1,68 @@
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticArrayProp, createStaticNumberProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BottomSheet",
+  description: "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
+  category: COMPONENT_TYPES.bottomsheet,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    flex: 1
+  },
+  triggers: [Triggers.OnSettle],
+  props: {
+    onSettle: createActionProp({
+      label: "On settle",
+      description: "Action to execute when sheet settles on a snap point"
+    }),
+    snapPoints: createStaticArrayProp({
+      label: "Snap points",
+      description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
+      defaultValue: ["10%", "50%", "80%"]
+    }),
+    initialSnapIndex: createStaticNumberProp({
+      label: "Initial snap index",
+      description: "Index of the snap point to be used as the initial point",
+      defaultValue: 0,
+      required: false
+    }),
+    showHandle: createStaticBoolProp({
+      label: "Show handle",
+      description: "Whether to show the top handle or not",
+      defaultValue: true
+    }),
+    handleColor: createColorProp({
+      label: "Handle color",
+      description: "Color of the top handle",
+      defaultValue: "divider"
+    }),
+    topBorderRadius: createStaticNumberProp({
+      label: "Top border radius",
+      description: "Border radius of top corners",
+      defaultValue: 20,
+      required: false
+    }),
+    borderWidth: createStaticNumberProp({
+      label: "Border width",
+      description: "Width of bottom sheet borders",
+      defaultValue: 1,
+      required: false
+    }),
+    borderColor: createColorProp({
+      label: "Border color",
+      description: "Color of bottom sheet borders",
+      defaultValue: "divider"
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    }),
+    bounces: createStaticBoolProp({
+      label: "Bounce",
+      description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
+      defaultValue: true
+    })
+  }
+};

package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+export interface BottomSheetProps extends ScrollViewProps {
+    snapPoints?: (string | number)[];
+    initialSnapIndex?: number;
+    showHandle?: boolean;
+    handleColor?: string;
+    topBorderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    onSettle?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<BottomSheetProps>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<BottomSheetProps>> & React.FC<React.PropsWithChildren<BottomSheetProps>>, {}>;
+export default _default;
+//# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,SAAS,EACT,SAAS,EACT,eAAe,EAChB,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd;;;;AAgGD,wBAAsC"}