@draftbit/core 47.1.1-ee131b.2 → 47.2.1-a33ddf.2

package/src/components/BottomSheet/BottomSheetComponent.tsx

@@ -0,0 +1,895 @@
+/**
+ * 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 {
+  Dimensions,
+  FlatList,
+  FlatListProps,
+  Platform,
+  ScrollView,
+  ScrollViewProps,
+  SectionList,
+  SectionListProps,
+  StyleSheet,
+  View,
+  ViewStyle,
+} 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,
+  PanGestureHandlerProperties,
+  State as GestureState,
+  TapGestureHandler,
+} from "react-native-gesture-handler";
+import { Assign } from "utility-types";
+
+const {
+  //@ts-ignore
+  interpolate: interpolateDeprecated,
+  // @ts-ignore: this property is only present in Reanimated 2
+  interpolateNode,
+} = Animated;
+
+const interpolate: typeof interpolateDeprecated =
+  interpolateNode ?? interpolateDeprecated;
+//@ts-ignore
+const Easing: typeof EasingDeprecated = EasingNode ?? EasingDeprecated;
+
+const FlatListComponentType = "FlatList" as const;
+const ScrollViewComponentType = "ScrollView" as const;
+const SectionListComponentType = "SectionList" as const;
+const TimingAnimationType = "timing" as const;
+const SpringAnimationType = "spring" as const;
+
+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,
+    },
+  },
+};
+
+type AnimatedScrollableComponent = FlatList | ScrollView | SectionList;
+
+type FlatListOption<T> = Assign<
+  { componentType: typeof FlatListComponentType },
+  FlatListProps<T>
+>;
+type ScrollViewOption = Assign<
+  { componentType: typeof ScrollViewComponentType },
+  ScrollViewProps
+>;
+type SectionListOption<T> = Assign<
+  { componentType: typeof SectionListComponentType },
+  SectionListProps<T>
+>;
+
+interface TimingParams {
+  clock: Animated.Clock;
+  from: Animated.Node<number>;
+  to: Animated.Node<number>;
+  position: Animated.Value<number>;
+  finished: Animated.Value<number>;
+  frameTime: Animated.Value<number>;
+  velocity: Animated.Node<number>;
+}
+
+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>;
+  /*
+   * Style to be applied to the container.
+   */
+  containerStyle?: Animated.AnimateStyle<ViewStyle>;
+  /*
+   * Factor of resistance when the gesture is released. A value of 0 offers maximum
+   * acceleration, whereas 1 acts as the opposite. Defaults to 0.95
+   */
+  friction: number;
+  /*
+   * Allow drawer to be dragged beyond lowest snap point
+   */
+  enableOverScroll: boolean;
+};
+
+type TimingAnimationProps = {
+  animationType: typeof TimingAnimationType;
+  /**
+   * Configuration for the timing reanimated function
+   */
+  animationConfig?: Partial<Animated.TimingConfig>;
+};
+
+type SpringAnimationProps = {
+  animationType: typeof SpringAnimationType;
+  /**
+   * Configuration for the spring reanimated function
+   */
+  animationConfig?: Partial<Animated.SpringConfig>;
+};
+
+type Props<T> = CommonProps &
+  (FlatListOption<T> | ScrollViewOption | SectionListOption<T>) &
+  (TimingAnimationProps | SpringAnimationProps);
+
+export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
+  static defaultProps = {
+    topInset: 0,
+    friction: 0.95,
+    animationType: "timing",
+    innerRef: React.createRef<AnimatedScrollableComponent>(),
+    enableOverScroll: false,
+  };
+
+  /**
+   * Gesture Handler references
+   */
+  private masterDrawer = React.createRef<TapGestureHandler>();
+  private drawerHandleRef = React.createRef<PanGestureHandler>();
+  private drawerContentRef = React.createRef<PanGestureHandler>();
+  private scrollComponentRef = React.createRef<NativeViewGestureHandler>();
+
+  /**
+   * ScrollView prop
+   */
+  private onScrollBeginDrag: ScrollViewProps["onScrollBeginDrag"];
+  /**
+   * Pan gesture handler events for drawer handle and content
+   */
+  private onHandleGestureEvent: PanGestureHandlerProperties["onGestureEvent"];
+  private onDrawerGestureEvent: PanGestureHandlerProperties["onGestureEvent"];
+  /**
+   * Main Animated Value that drives the top position of the UI drawer at any point in time
+   */
+  private translateY: Animated.Node<number>;
+  /**
+   * Animated value that keeps track of the position: 0 => closed, 1 => opened
+   */
+  private position: Animated.Node<number>;
+  /**
+   * Flag to indicate imperative snapping
+   */
+  private isManuallySetValue: Animated.Value<number> = new Value(0);
+  /**
+   * Manual snapping amount
+   */
+  private manualYOffset: Animated.Value<number> = new Value(0);
+  /**
+   * Keeps track of the current index
+   */
+  private nextSnapIndex: Animated.Value<number>;
+  /**
+   * Deceleration rate of the scroll component. This is used only on Android to
+   * compensate the unexpected glide it gets sometimes.
+   */
+  private decelerationRate: Animated.Value<number>;
+  private prevSnapIndex = -1;
+  private dragY = new Value(0);
+  private prevDragY = new Value(0);
+  private tempDestSnapPoint = new Value(0);
+  private isAndroid = new Value(Number(Platform.OS === "android"));
+  private animationClock = new Clock();
+  private animationPosition = new Value(0);
+  private animationFinished = new Value(0);
+  private animationFrameTime = new Value(0);
+  private velocityY = new Value(0);
+  private lastStartScrollY: Animated.Value<number> = new Value(0);
+  private prevTranslateYOffset: Animated.Value<number>;
+  private translationY: Animated.Value<number>;
+  private destSnapPoint = new Value(0);
+
+  private lastSnap: Animated.Value<number>;
+  private dragWithHandle = new Value(0);
+  private scrollUpAndPullDown = new Value(0);
+  private didGestureFinish: Animated.Node<0 | 1>;
+  private didScrollUpAndPullDown: Animated.Node<number>;
+  private setTranslationY: Animated.Node<number>;
+  private extraOffset: Animated.Node<number>;
+  private calculateNextSnapPoint: (
+    i?: number
+  ) => number | Animated.Node<number>;
+
+  private scrollComponent: React.ComponentType<
+    FlatListProps<T> | ScrollViewProps | SectionListProps<T>
+  >;
+
+  convertPercentageToDp = (str: string) =>
+    (Number(str.split("%")[0]) * (windowHeight - this.props.topInset)) / 100;
+
+  constructor(props: Props<T>) {
+    super(props);
+    const { initialSnapIndex, animationType } = props;
+
+    const animationDriver = animationType === "timing" ? 0 : 1;
+    const animationDuration =
+      (props.animationType === "timing" && props.animationConfig?.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<GestureState>(-1);
+    //@ts-ignore
+    const handleOldGestureState = new Value<GestureState>(-1);
+    //@ts-ignore
+    const drawerGestureState = new Value<GestureState>(-1);
+    //@ts-ignore
+    const drawerOldGestureState = new Value<GestureState>(-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 = (i: number = 0): Animated.Node<number> =>
+      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 = (i = 0): Animated.Node<number> | number =>
+      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 = ({
+      clock,
+      from,
+      to,
+      position,
+      finished,
+      velocity,
+      frameTime,
+    }: TimingParams) => {
+      const state = {
+        finished,
+        velocity: new Value(0),
+        position,
+        time: new Value(0),
+        frameTime,
+      };
+
+      const timingConfig = {
+        duration: animationDuration,
+        easing:
+          (props.animationType === "timing" && props.animationConfig?.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], ([value]) => {
+              if (value !== this.prevSnapIndex) {
+                this.props.onSettle?.(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,
+    });
+  }
+
+  private 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 ${p}: ${typeof p}. It should be either a percentage string or a number`
+      );
+    });
+  };
+
+  private 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`"
+        );
+    }
+  };
+
+  snapTo = (index: number) => {
+    const snapPoints = this.getNormalisedSnapPoints();
+    this.isManuallySetValue.setValue(1);
+    this.manualYOffset.setValue(snapPoints[index]);
+    this.nextSnapIndex.setValue(index);
+  };
+
+  render() {
+    const { renderHandle, initialSnapIndex, containerStyle, ...rest } =
+      this.props;
+    const AnimatedScrollableComponent = this.scrollComponent;
+    const normalisedSnapPoints = this.getNormalisedSnapPoints();
+    const initialSnap = normalisedSnapPoints[initialSnapIndex];
+
+    const Content = (
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          containerStyle,
+          // @ts-ignore
+          {
+            transform: [{ translateY: this.translateY }],
+          },
+        ]}
+      >
+        <PanGestureHandler
+          ref={this.drawerHandleRef}
+          shouldCancelWhenOutside={false}
+          simultaneousHandlers={this.masterDrawer}
+          onGestureEvent={this.onHandleGestureEvent}
+          onHandlerStateChange={this.onHandleGestureEvent}
+        >
+          <Animated.View>{renderHandle()}</Animated.View>
+        </PanGestureHandler>
+        <PanGestureHandler
+          ref={this.drawerContentRef}
+          simultaneousHandlers={[this.scrollComponentRef, this.masterDrawer]}
+          shouldCancelWhenOutside={false}
+          onGestureEvent={this.onDrawerGestureEvent}
+          onHandlerStateChange={this.onDrawerGestureEvent}
+        >
+          <Animated.View style={styles.container}>
+            <NativeViewGestureHandler
+              ref={this.scrollComponentRef}
+              waitFor={this.masterDrawer}
+              simultaneousHandlers={this.drawerContentRef}
+            >
+              <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] },
+                ]}
+              />
+            </NativeViewGestureHandler>
+          </Animated.View>
+        </PanGestureHandler>
+        {this.props.animatedPosition && (
+          <Animated.Code
+            exec={onChange(
+              this.position,
+              set(this.props.animatedPosition, this.position)
+            )}
+          />
+        )}
+        <Animated.Code
+          exec={onChange(
+            this.dragY,
+            cond(not(eq(this.dragY, 0)), set(this.prevDragY, this.dragY))
+          )}
+        />
+        <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([], () => {
+                  // 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 as any;
+
+                  if (
+                    node &&
+                    node[method] &&
+                    ((this.props.componentType === "FlatList" &&
+                      (this.props?.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], ([value]) => {
+                // This is the TapGHandler trick
+                // @ts-ignore
+                this.masterDrawer?.current?.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
+                )
+              ),
+            ])
+          )}
+        />
+        <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], ([value]) => {
+                  // This is the TapGHandler trick
+                  // @ts-ignore
+                  this.masterDrawer?.current?.setNativeProps({
+                    maxDeltaY: value - this.getNormalisedSnapPoints()[0],
+                  });
+                }),
+              ],
+              [set(this.nextSnapIndex, 0)]
+            ),
+          ])}
+        />
+      </Animated.View>
+    );
+
+    // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+    // waitFor logic
+    if (Platform.OS === "android") {
+      return (
+        <TapGestureHandler
+          maxDurationMs={100000}
+          ref={this.masterDrawer}
+          maxDeltaY={initialSnap - this.getNormalisedSnapPoints()[0]}
+          shouldCancelWhenOutside={false}
+        >
+          {Content}
+        </TapGestureHandler>
+      );
+    }
+
+    // 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 (
+      <TapGestureHandler
+        maxDurationMs={100000}
+        ref={this.masterDrawer}
+        maxDeltaY={initialSnap - this.getNormalisedSnapPoints()[0]}
+      >
+        <View style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
+          {Content}
+        </View>
+      </TapGestureHandler>
+    );
+  }
+}
+
+export default ScrollBottomSheet;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});