@draftbit/core 49.0.1-10a8bd.2 → 49.0.1-2cdf19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "49.0.1-10a8bd.2+10a8bd1",
+  "version": "49.0.1-2cdf19.2+2cdf191",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,8 +41,9 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^49.0.1-10a8bd.2+10a8bd1",
+    "@draftbit/types": "^49.0.1-2cdf19.2+2cdf191",
     "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.4.2",
@@ -64,7 +65,7 @@
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-pager-view": "6.2.0",
-    "react-native-reanimated": "~2.17.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-shadow-2": "^7.0.7",
     "react-native-svg": "13.9.0",
     "react-native-swipe-list-view": "^3.2.9",
@@ -103,5 +104,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "10a8bd174f61497e9aa736f5a2ba038d733865ed"
+  "gitHead": "2cdf191afdb983a28fc94617eab369fd287e7183"
 }

package/src/components/BottomSheet/BottomSheet.js

@@ -1,72 +1,81 @@
 import React from "react";
-import { StyleSheet, View, } from "react-native";
-import BottomSheetComponent from "./BottomSheetComponent";
+import { StyleSheet, Dimensions, } from "react-native";
+import BottomSheetComponent, { BottomSheetScrollView, } from "@gorhom/bottom-sheet";
 import { withTheme } from "../../theming";
+import { useDeepCompareMemo } from "../../utilities";
+const windowHeight = Dimensions.get("window").height;
+// Clarification:
+// Input of snap points is sorted top -> bottom where each value represents distance from top
+// Implementation using `@gorhom/bottom-sheet` is sorted bottom -> top where each value represents distance from bottom
 const BottomSheet = React.forwardRef(({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", 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;
-    const snapPoints = snapPointsProp || [
+    const snapPoints = snapPointsProp !== null && snapPointsProp !== void 0 ? snapPointsProp : [
         topSnapPosition,
         middleSnapPosition,
         bottomSnapPosition,
     ];
+    const mappedSnapPoints = useDeepCompareMemo(() => convertSnapPointsForNewImplementation(snapPoints), snapPoints);
     const getSnapIndexFromPosition = (position) => {
         switch (position) {
-            case "top":
+            case "bottom":
                 return 0;
             case "middle":
                 return 1;
-            case "bottom":
+            case "top":
                 return 2;
         }
     };
-    return (React.createElement(View, { style: styles.parentContainer, pointerEvents: "box-none" },
-        React.createElement(BottomSheetComponent, { ref: ref, componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
-                    styles.handleContainer,
-                    {
-                        backgroundColor,
-                        borderTopLeftRadius: topBorderRadius,
-                        borderTopRightRadius: topBorderRadius,
-                    },
-                ] },
-                React.createElement(View, { style: [styles.handle, { backgroundColor: handleColor }] }))))), contentContainerStyle: [styles.contentContainerStyle, style], containerStyle: StyleSheet.flatten([
-                styles.containerStyle,
-                {
-                    backgroundColor,
-                    borderTopLeftRadius: topBorderRadius,
-                    borderTopRightRadius: topBorderRadius,
-                    borderWidth,
-                    borderColor,
-                },
-            ]), onSettle: onSettle, ...rest }, children)));
+    return (React.createElement(BottomSheetComponent, { ref: ref, snapPoints: mappedSnapPoints, index: initialSnapIndex != undefined
+            ? mappedSnapPoints.length - initialSnapIndex - 1
+            : getSnapIndexFromPosition(initialSnapPosition), handleIndicatorStyle: [
+            { backgroundColor: handleColor },
+            !showHandle ? { display: "none" } : {},
+        ], backgroundStyle: {
+            backgroundColor,
+            borderTopLeftRadius: topBorderRadius,
+            borderTopRightRadius: topBorderRadius,
+            borderWidth,
+            borderColor,
+        }, onChange: (index) => onSettle === null || onSettle === void 0 ? void 0 : onSettle(mappedSnapPoints.length - index - 1) },
+        React.createElement(BottomSheetScrollView, { contentContainerStyle: [styles.contentContainerStyle, style], ...rest }, children)));
 });
+// @gorhom/bottom-sheet has a different format for snap points and requires some manipulation
+function convertSnapPointsForNewImplementation(snapPoints) {
+    // Older implementation required snap points sorted top -> bottom, new library requires bottom -> top
+    const reversedSnapPoints = [...snapPoints].reverse();
+    // Older implementation required snap points as distance from top, new library requires them as distance from bottom
+    return reversedSnapPoints.map((point) => {
+        if (typeof point === "string") {
+            const percentNumber = extractPercentNumber(point);
+            if (percentNumber !== undefined) {
+                return `${100 - percentNumber}%`;
+            }
+            return point;
+        }
+        else if (typeof point === "number") {
+            return windowHeight - point;
+        }
+        else {
+            return point;
+        }
+    });
+}
+function extractPercentNumber(percentString) {
+    const percentRegex = /(\d+)?%/;
+    const matches = percentString.match(percentRegex);
+    if (matches === null || matches === void 0 ? void 0 : matches.length) {
+        const percentNumber = Number(matches[1]);
+        if (!isNaN(percentNumber)) {
+            return percentNumber;
+        }
+    }
+    return undefined;
+}
 const styles = 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,
-    },
 });
 export default withTheme(BottomSheet);
 //# sourceMappingURL=BottomSheet.js.map

package/src/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"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"}

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,21 +1,30 @@
 import React from "react";
 import {
   StyleSheet,
-  View,
   StyleProp,
   ViewStyle,
   ScrollViewProps,
+  Dimensions,
 } from "react-native";
 
-import BottomSheetComponent from "./BottomSheetComponent";
+import BottomSheetComponent, {
+  BottomSheetScrollView,
+} from "@gorhom/bottom-sheet";
 import type { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
+import { useDeepCompareMemo } from "../../utilities";
 
 type SnapPosition = "top" | "middle" | "bottom";
+
+const windowHeight = Dimensions.get("window").height;
+
 export interface BottomSheetProps extends ScrollViewProps {
   topSnapPosition?: string | number;
   middleSnapPosition?: string | number;
   bottomSnapPosition?: string | number;
+  /**
+   * As distance from top (number or percentage string), sorted from top to bottom
+   */
   snapPoints?: (string | number)[];
   initialSnapIndex?: number;
   initialSnapPosition?: SnapPosition;
@@ -32,10 +41,10 @@ export interface BottomSheetProps extends ScrollViewProps {
   theme: Theme;
 }
 
-const BottomSheet = React.forwardRef<
-  BottomSheetComponent<any>,
-  BottomSheetProps
->(
+// Clarification:
+// Input of snap points is sorted top -> bottom where each value represents distance from top
+// Implementation using `@gorhom/bottom-sheet` is sorted bottom -> top where each value represents distance from bottom
+const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
   (
     {
       theme,
@@ -60,101 +69,101 @@ const BottomSheet = React.forwardRef<
     const backgroundColor =
       (style as ViewStyle)?.backgroundColor || theme.colors.background;
 
-    const snapPoints = snapPointsProp || [
+    const snapPoints = snapPointsProp ?? [
       topSnapPosition,
       middleSnapPosition,
       bottomSnapPosition,
     ];
 
+    const mappedSnapPoints = useDeepCompareMemo(
+      () => convertSnapPointsForNewImplementation(snapPoints),
+      snapPoints
+    );
+
     const getSnapIndexFromPosition = (position: SnapPosition) => {
       switch (position) {
-        case "top":
+        case "bottom":
           return 0;
         case "middle":
           return 1;
-        case "bottom":
+        case "top":
           return 2;
       }
     };
 
     return (
-      <View style={styles.parentContainer} pointerEvents="box-none">
-        <BottomSheetComponent
-          ref={ref}
-          componentType="ScrollView"
-          snapPoints={snapPoints}
-          initialSnapIndex={
-            initialSnapIndex ?? getSnapIndexFromPosition(initialSnapPosition)
-          }
-          renderHandle={() => (
-            <>
-              {showHandle && (
-                <View
-                  style={[
-                    styles.handleContainer,
-                    {
-                      backgroundColor,
-                      borderTopLeftRadius: topBorderRadius,
-                      borderTopRightRadius: topBorderRadius,
-                    },
-                  ]}
-                >
-                  <View
-                    style={[styles.handle, { backgroundColor: handleColor }]}
-                  />
-                </View>
-              )}
-            </>
-          )}
+      <BottomSheetComponent
+        ref={ref}
+        snapPoints={mappedSnapPoints}
+        index={
+          initialSnapIndex != undefined
+            ? mappedSnapPoints.length - initialSnapIndex - 1
+            : getSnapIndexFromPosition(initialSnapPosition)
+        }
+        handleIndicatorStyle={[
+          { backgroundColor: handleColor },
+          !showHandle ? { display: "none" } : {},
+        ]}
+        backgroundStyle={{
+          backgroundColor,
+          borderTopLeftRadius: topBorderRadius,
+          borderTopRightRadius: topBorderRadius,
+          borderWidth,
+          borderColor,
+        }}
+        onChange={(index) => onSettle?.(mappedSnapPoints.length - index - 1)}
+      >
+        <BottomSheetScrollView
           contentContainerStyle={[styles.contentContainerStyle, style]}
-          containerStyle={StyleSheet.flatten([
-            styles.containerStyle,
-            {
-              backgroundColor,
-              borderTopLeftRadius: topBorderRadius,
-              borderTopRightRadius: topBorderRadius,
-              borderWidth,
-              borderColor,
-            },
-          ])}
-          onSettle={onSettle}
           {...rest}
         >
           {children}
-        </BottomSheetComponent>
-      </View>
+        </BottomSheetScrollView>
+      </BottomSheetComponent>
     );
   }
 );
 
+// @gorhom/bottom-sheet has a different format for snap points and requires some manipulation
+function convertSnapPointsForNewImplementation(
+  snapPoints: (string | number)[]
+) {
+  // Older implementation required snap points sorted top -> bottom, new library requires bottom -> top
+  const reversedSnapPoints = [...snapPoints].reverse();
+
+  // Older implementation required snap points as distance from top, new library requires them as distance from bottom
+  return reversedSnapPoints.map((point) => {
+    if (typeof point === "string") {
+      const percentNumber = extractPercentNumber(point);
+      if (percentNumber !== undefined) {
+        return `${100 - percentNumber}%`;
+      }
+      return point;
+    } else if (typeof point === "number") {
+      return windowHeight - point;
+    } else {
+      return point;
+    }
+  });
+}
+
+function extractPercentNumber(percentString: string) {
+  const percentRegex = /(\d+)?%/;
+  const matches = percentString.match(percentRegex);
+  if (matches?.length) {
+    const percentNumber = Number(matches[1]);
+    if (!isNaN(percentNumber)) {
+      return percentNumber;
+    }
+  }
+  return undefined;
+}
+
 const styles = 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,
-  },
 });
 
 export default withTheme(BottomSheet);

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

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.ScrollBottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeGestureHandler=require("react-native-gesture-handler");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["renderHandle","initialSnapIndex","containerStyle"];var _imperativeScrollOpti,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/core/src/components/BottomSheet/BottomSheetComponent.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var interpolateDeprecated=_reactNativeReanimated.default.interpolate,interpolateNode=_reactNativeReanimated.default.interpolateNode;var interpolate=interpolateNode!=null?interpolateNode:interpolateDeprecated;var Easing=_reactNativeReanimated.EasingNode!=null?_reactNativeReanimated.EasingNode:_reactNativeReanimated.Easing;var FlatListComponentType="FlatList";var ScrollViewComponentType="ScrollView";var SectionListComponentType="SectionList";var TimingAnimationType="timing";var SpringAnimationType="spring";var DEFAULT_SPRING_PARAMS={damping:50,mass:0.3,stiffness:121.6,overshootClamping:true,restSpeedThreshold:0.3,restDisplacementThreshold:0.3};var _Dimensions$get=_reactNative.Dimensions.get("window"),windowHeight=_Dimensions$get.height;var IOS_NORMAL_DECELERATION_RATE=0.998;var ANDROID_NORMAL_DECELERATION_RATE=0.985;var DEFAULT_ANIMATION_DURATION=250;var DEFAULT_EASING=Easing.inOut(Easing.linear);var imperativeScrollOptions=(_imperativeScrollOpti={},(0,_defineProperty2.default)(_imperativeScrollOpti,FlatListComponentType,{method:"scrollToIndex",args:{index:0,viewPosition:0,viewOffset:1000,animated:true}}),(0,_defineProperty2.default)(_imperativeScrollOpti,ScrollViewComponentType,{method:"scrollTo",args:{x:0,y:0,animated:true}}),(0,_defineProperty2.default)(_imperativeScrollOpti,SectionListComponentType,{method:"scrollToLocation",args:{itemIndex:0,sectionIndex:0,viewPosition:0,viewOffset:1000,animated:true}}),_imperativeScrollOpti);var ScrollBottomSheet=function(_Component){(0,_inherits2.default)(ScrollBottomSheet,_Component);var _super=_createSuper(ScrollBottomSheet);function ScrollBottomSheet(props){var _props$animationConfi;var _this;(0,_classCallCheck2.default)(this,ScrollBottomSheet);_this=_super.call(this,props);_this.masterDrawer=_react.default.createRef();_this.drawerHandleRef=_react.default.createRef();_this.drawerContentRef=_react.default.createRef();_this.scrollComponentRef=_react.default.createRef();_this.isManuallySetValue=new _reactNativeReanimated.Value(0);_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=function(str){return Number(str.split("%")[0])*(windowHeight-_this.props.topInset)/100;};_this.getNormalisedSnapPoints=function(){return _this.props.snapPoints.map(function(p){if(typeof p==="string"){return _this.convertPercentageToDp(p);}else if(typeof p==="number"){return p;}throw new Error(`Invalid type for value ${p}: ${typeof p}. It should be either a percentage string or a number`);});};_this.getScrollComponent=function(){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=function(index){var snapPoints=_this.getNormalisedSnapPoints();_this.isManuallySetValue.setValue(1);_this.manualYOffset.setValue(snapPoints[index]);_this.nextSnapIndex.setValue(index);};var initialSnapIndex=props.initialSnapIndex,animationType=props.animationType;var animationDriver=animationType==="timing"?0:1;var animationDuration=props.animationType==="timing"&&((_props$animationConfi=props.animationConfig)==null?void 0:_props$animationConfi.duration)||DEFAULT_ANIMATION_DURATION;var ScrollComponent=_this.getScrollComponent();_this.scrollComponent=_reactNativeReanimated.default.createAnimatedComponent(ScrollComponent);var _snapPoints=_this.getNormalisedSnapPoints();var openPosition=_snapPoints[0];var closedPosition=_this.props.enableOverScroll?windowHeight:_snapPoints[_snapPoints.length-1];var initialSnap=_snapPoints[initialSnapIndex];_this.nextSnapIndex=new _reactNativeReanimated.Value(initialSnapIndex);var initialDecelerationRate=_reactNative.Platform.select({android:props.initialSnapIndex===0?ANDROID_NORMAL_DECELERATION_RATE:0,ios:IOS_NORMAL_DECELERATION_RATE});_this.decelerationRate=new _reactNativeReanimated.Value(initialDecelerationRate);var handleGestureState=new _reactNativeReanimated.Value(-1);var handleOldGestureState=new _reactNativeReanimated.Value(-1);var drawerGestureState=new _reactNativeReanimated.Value(-1);var drawerOldGestureState=new _reactNativeReanimated.Value(-1);var 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}}}]);var didHandleGestureBegin=(0,_reactNativeReanimated.eq)(handleGestureState,_reactNativeGestureHandler.State.ACTIVE);var 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)));var isLastSnapPointInRange=function isLastSnapPointInRange(){var 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));};var 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)((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);var endOffsetY=(0,_reactNativeReanimated.add)(_this.lastSnap,_this.translationY,(0,_reactNativeReanimated.multiply)(1-props.friction,_this.velocityY));_this.calculateNextSnapPoint=function(){var 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));};var runAnimation=function runAnimation(_ref){var _props$animationConfi2;var clock=_ref.clock,from=_ref.from,to=_ref.to,position=_ref.position,finished=_ref.finished,velocity=_ref.velocity,frameTime=_ref.frameTime;var state={finished:finished,velocity:new _reactNativeReanimated.Value(0),position:position,time:new _reactNativeReanimated.Value(0),frameTime:frameTime};var timingConfig={duration:animationDuration,easing:props.animationType==="timing"&&((_props$animationConfi2=props.animationConfig)==null?void 0:_props$animationConfi2.easing)||DEFAULT_EASING,toValue:new _reactNativeReanimated.Value(0)};var springConfig=Object.assign({},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))),[(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)]),(0,_reactNativeReanimated.cond)((0,_reactNativeReanimated.eq)(animationDriver,0),(0,_reactNativeReanimated.timing)(clock,state,timingConfig),(0,_reactNativeReanimated.spring)(clock,state,springConfig)),(0,_reactNativeReanimated.cond)(state.finished,[(0,_reactNativeReanimated.call)([_this.nextSnapIndex],function(_ref2){var _ref3=(0,_slicedToArray2.default)(_ref2,1),value=_ref3[0];if(value!==_this.prevSnapIndex){_this.props.onSettle==null?void 0:_this.props.onSettle(value);}_this.prevSnapIndex=value;}),(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],state.position)];};var translateYOffset=(0,_reactNativeReanimated.cond)(isAnimationInterrupted,[(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),(0,_reactNativeReanimated.set)(drawerOldGestureState,_reactNativeGestureHandler.State.END),(0,_reactNativeReanimated.set)(handleOldGestureState,_reactNativeGestureHandler.State.END),(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),_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});return _this;}(0,_createClass2.default)(ScrollBottomSheet,[{key:"render",value:function render(){var _this2=this;var _this$props=this.props,renderHandle=_this$props.renderHandle,initialSnapIndex=_this$props.initialSnapIndex,containerStyle=_this$props.containerStyle,rest=(0,_objectWithoutProperties2.default)(_this$props,_excluded);var AnimatedScrollableComponent=this.scrollComponent;var normalisedSnapPoints=this.getNormalisedSnapPoints();var initialSnap=normalisedSnapPoints[initialSnapIndex];var Content=(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[_reactNative.StyleSheet.absoluteFillObject,containerStyle,{transform:[{translateY:this.translateY}]}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler,{ref:this.drawerHandleRef,shouldCancelWhenOutside:false,simultaneousHandlers:this.masterDrawer,onGestureEvent:this.onHandleGestureEvent,onHandlerStateChange:this.onHandleGestureEvent,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{children:renderHandle()})}),(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler,{ref:this.drawerContentRef,simultaneousHandlers:[this.scrollComponentRef,this.masterDrawer],shouldCancelWhenOutside:false,onGestureEvent:this.onDrawerGestureEvent,onHandlerStateChange:this.onDrawerGestureEvent,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:styles.container,children:(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.NativeViewGestureHandler,{ref:this.scrollComponentRef,waitFor:this.masterDrawer,simultaneousHandlers:this.drawerContentRef,children:(0,_jsxRuntime.jsx)(AnimatedScrollableComponent,Object.assign({overScrollMode:"never",bounces:false},rest,{ref:this.props.innerRef,decelerationRate:this.decelerationRate,onScrollBeginDrag:this.onScrollBeginDrag,scrollEventThrottle:1,contentContainerStyle:[rest.contentContainerStyle,{paddingBottom:this.getNormalisedSnapPoints()[0]}]}))})})}),this.props.animatedPosition&&(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.Code,{exec:(0,_reactNativeReanimated.onChange)(this.position,(0,_reactNativeReanimated.set)(this.props.animatedPosition,this.position))}),(0,_jsxRuntime.jsx)(_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)))}),(0,_jsxRuntime.jsx)(_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)([],function(){var _this2$props,_this2$props$data;var _imperativeScrollOpti2=imperativeScrollOptions[_this2.props.componentType],method=_imperativeScrollOpti2.method,args=_imperativeScrollOpti2.args;var node=_this2.props.innerRef.current;if(node&&node[method]&&(_this2.props.componentType==="FlatList"&&(((_this2$props=_this2.props)==null?void 0:(_this2$props$data=_this2$props.data)==null?void 0:_this2$props$data.length)||0)>0||_this2.props.componentType==="SectionList"&&_this2.props.sections.length>0||_this2.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],function(_ref4){var _this2$masterDrawer,_this2$masterDrawer$c;var _ref5=(0,_slicedToArray2.default)(_ref4,1),value=_ref5[0];(_this2$masterDrawer=_this2.masterDrawer)==null?void 0:(_this2$masterDrawer$c=_this2$masterDrawer.current)==null?void 0:_this2$masterDrawer$c.setNativeProps({maxDeltaY:value-_this2.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))]))}),(0,_jsxRuntime.jsx)(_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],function(_ref6){var _this2$masterDrawer2,_this2$masterDrawer2$;var _ref7=(0,_slicedToArray2.default)(_ref6,1),value=_ref7[0];(_this2$masterDrawer2=_this2.masterDrawer)==null?void 0:(_this2$masterDrawer2$=_this2$masterDrawer2.current)==null?void 0:_this2$masterDrawer2$.setNativeProps({maxDeltaY:value-_this2.getNormalisedSnapPoints()[0]});})],[(0,_reactNativeReanimated.set)(this.nextSnapIndex,0)])])})]});if(_reactNative.Platform.OS==="android"){return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.TapGestureHandler,{maxDurationMs:100000,ref:this.masterDrawer,maxDeltaY:initialSnap-this.getNormalisedSnapPoints()[0],shouldCancelWhenOutside:false,children:Content});}return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.TapGestureHandler,{maxDurationMs:100000,ref:this.masterDrawer,maxDeltaY:initialSnap-this.getNormalisedSnapPoints()[0],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_reactNative.StyleSheet.absoluteFillObject,pointerEvents:"box-none",children:Content})});}}]);return ScrollBottomSheet;}(_react.Component);exports.ScrollBottomSheet=ScrollBottomSheet;ScrollBottomSheet.defaultProps={topInset:0,friction:0.95,animationType:"timing",innerRef:_react.default.createRef(),enableOverScroll:false};var _default=ScrollBottomSheet;exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{flex:1}});

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

@@ -1,175 +0,0 @@
-/**
- * TODO: Replace with https://github.com/gorhom/react-native-bottom-sheet. (@gorhom/bottom-sheet)
- * @gorhom/bottom-sheet v5 (which is not ready yet) will support web, allowing us to transition to that better supported library
- *
- * We are unable to upgrade to reanimated v3 until this is removed since it relies on reanimated v1 APIs
- */
-/**
- * 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, RefObject } from "react";
-import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, ViewStyle } from "react-native";
-import Animated from "react-native-reanimated";
-import { Assign } from "utility-types";
-declare const FlatListComponentType: "FlatList";
-declare const ScrollViewComponentType: "ScrollView";
-declare const SectionListComponentType: "SectionList";
-declare const TimingAnimationType: "timing";
-declare const SpringAnimationType: "spring";
-declare type AnimatedScrollableComponent = FlatList | ScrollView | SectionList;
-declare type FlatListOption<T> = Assign<{
-    componentType: typeof FlatListComponentType;
-}, FlatListProps<T>>;
-declare type ScrollViewOption = Assign<{
-    componentType: typeof ScrollViewComponentType;
-}, ScrollViewProps>;
-declare type SectionListOption<T> = Assign<{
-    componentType: typeof SectionListComponentType;
-}, SectionListProps<T>>;
-declare type CommonProps = {
-    /**
-     * Array of numbers that indicate the different resting positions of the bottom sheet (in dp or %), starting from the top.
-     * If a percentage is used, that would translate to the relative amount of the total window height.
-     * For instance, if 50% is used, that'd be windowHeight * 0.5. If you wanna take into account safe areas during
-     * the calculation, such as status bars and notches, please use 'topInset' prop
-     */
-    snapPoints: Array<string | number>;
-    /**
-     * Index that references the initial resting position of the drawer, starting from the top
-     */
-    initialSnapIndex: number;
-    /**
-     * Render prop for the handle
-     */
-    renderHandle: () => React.ReactNode;
-    /**
-     * Callback that is executed right after the drawer settles on one of the snapping points.
-     * The new index is provided on the callback
-     * @param index
-     */
-    onSettle?: (index: number) => void;
-    /**
-     * Animated value that tracks the position of the drawer, being:
-     * 0 => closed
-     * 1 => fully opened
-     */
-    animatedPosition?: Animated.Value<number>;
-    /**
-     * This value is useful if you want to take into consideration safe area insets
-     * when applying percentages for snapping points. We recommend using react-native-safe-area-context
-     * library for that.
-     * @see https://github.com/th3rdwave/react-native-safe-area-context#usage, insets.top
-     */
-    topInset: number;
-    /**
-     * Reference to FlatList, ScrollView or SectionList in order to execute its imperative methods.
-     */
-    innerRef: RefObject<FlatList | ScrollView | SectionList>;
-    containerStyle?: Animated.AnimateStyle<ViewStyle>;
-    friction: number;
-    enableOverScroll: boolean;
-};
-declare type TimingAnimationProps = {
-    animationType: typeof TimingAnimationType;
-    /**
-     * Configuration for the timing reanimated function
-     */
-    animationConfig?: Partial<Animated.TimingConfig>;
-};
-declare type SpringAnimationProps = {
-    animationType: typeof SpringAnimationType;
-    /**
-     * Configuration for the spring reanimated function
-     */
-    animationConfig?: Partial<Animated.SpringConfig>;
-};
-declare type Props<T> = CommonProps & (FlatListOption<T> | ScrollViewOption | SectionListOption<T>) & (TimingAnimationProps | SpringAnimationProps);
-export declare class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
-    static defaultProps: {
-        topInset: number;
-        friction: number;
-        animationType: string;
-        innerRef: React.RefObject<AnimatedScrollableComponent>;
-        enableOverScroll: boolean;
-    };
-    /**
-     * Gesture Handler references
-     */
-    private masterDrawer;
-    private drawerHandleRef;
-    private drawerContentRef;
-    private scrollComponentRef;
-    /**
-     * ScrollView prop
-     */
-    private onScrollBeginDrag;
-    /**
-     * Pan gesture handler events for drawer handle and content
-     */
-    private onHandleGestureEvent;
-    private onDrawerGestureEvent;
-    /**
-     * Main Animated Value that drives the top position of the UI drawer at any point in time
-     */
-    private translateY;
-    /**
-     * Animated value that keeps track of the position: 0 => closed, 1 => opened
-     */
-    private position;
-    /**
-     * Flag to indicate imperative snapping
-     */
-    private isManuallySetValue;
-    /**
-     * Manual snapping amount
-     */
-    private manualYOffset;
-    /**
-     * Keeps track of the current index
-     */
-    private nextSnapIndex;
-    /**
-     * Deceleration rate of the scroll component. This is used only on Android to
-     * compensate the unexpected glide it gets sometimes.
-     */
-    private decelerationRate;
-    private prevSnapIndex;
-    private dragY;
-    private prevDragY;
-    private tempDestSnapPoint;
-    private isAndroid;
-    private animationClock;
-    private animationPosition;
-    private animationFinished;
-    private animationFrameTime;
-    private velocityY;
-    private lastStartScrollY;
-    private prevTranslateYOffset;
-    private translationY;
-    private destSnapPoint;
-    private lastSnap;
-    private dragWithHandle;
-    private scrollUpAndPullDown;
-    private didGestureFinish;
-    private didScrollUpAndPullDown;
-    private setTranslationY;
-    private extraOffset;
-    private calculateNextSnapPoint;
-    private scrollComponent;
-    convertPercentageToDp: (str: string) => number;
-    constructor(props: Props<T>);
-    private getNormalisedSnapPoints;
-    private getScrollComponent;
-    snapTo: (index: number) => void;
-    render(): React.JSX.Element;
-}
-export default ScrollBottomSheet;