[Feature Request]Support bounce

[sunnylqm]

Currently you can not go beyond snap points even a single pixel, which makes it hard to implement something like pull to refresh/load more.

[rgommezz]

Hey @sunnylqm,

Using a standard RefreshControl is not feasible with this component, since you can swipe down the drawer via the content as well when it's scrolled to the top, so it interferes with pull to refresh feature. However, you could use some custom code to try to achieve it.

Off the top of my head, maybe a combination of onScroll prop, to know the scrollY offset of the underlying scrollable component, and animatedPosition to know the position of the drawer (you could subscribe to animation changes imperatively) could be useful to trigger a custom refreshing animation - when scrollY is close (or equal to 0) and you are pulling the drawer down.

Good luck!

[sunnylqm]

I used an extra snappoint to mock the behavior and it works fine. I just think it might be a common needs. Thanks

[rgommezz]

If you'd like to document your approach as a section in the readme I am more than happy to accept a PR!

Maybe it could be the beginning of a FAQ section.

[sunnylqm]

Here is my workaround but the bounce behavior is very simple and not customizable. The basic idea is to create an extra snap point and give the moving a damping force. So I think it can be a setting but seems challenging to design the parameters.

--- a/node_modules/react-native-scroll-bottom-sheet/src/index.tsx
+++ b/node_modules/react-native-scroll-bottom-sheet/src/index.tsx
@@ -258,7 +258,8 @@ export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
 
     const snapPoints = this.getNormalisedSnapPoints();
     const openPosition = snapPoints[0];
-    const closedPosition = snapPoints[snapPoints.length - 1];
+    const closedPosition = snapPoints[snapPoints.length - 2];
+    const extendedPosition = snapPoints[snapPoints.length - 1];
     const initialSnap = snapPoints[initialSnapIndex];
     this.nextSnapIndex = new Value(initialSnapIndex);
 
@@ -540,18 +541,22 @@ export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
       )
     );
 
+    const dampingPosition = (extendedPosition - closedPosition) / 2 + closedPosition;
+
     this.translateY = interpolate(
       add(translateYOffset, this.dragY, multiply(scrollY, -1)),
       {
-        inputRange: [openPosition, closedPosition],
-        outputRange: [openPosition, closedPosition],
-        extrapolate: Extrapolate.CLAMP,
+        // so it can go further than the last snap point 
+        // to implement pull to refresh
+        inputRange: [openPosition, closedPosition, extendedPosition],
+        outputRange: [openPosition, closedPosition, dampingPosition],
+        extrapolateLeft: Extrapolate.CLAMP,
       }
     );
 
     this.position = interpolate(this.translateY, {
-      inputRange: [openPosition, closedPosition],
-      outputRange: [1, 0],
+      inputRange: [openPosition, closedPosition, dampingPosition],
+      outputRange: [1, 0, -1],
       extrapolate: Extrapolate.CLAMP,
     });
   }

[ankushShetty1993]

Give bounces props to true, to have the effect and for lazy loading you can use onMomentumScrollEnd to get the end of the list and then using ListFooterComponent to render a loader at the bottom, It worked for me using Flatlist as ComponentType.