minor improvements to scrolling & gestures

Author: ammarahm-ed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-actions-sheet",
-  "version": "0.8.21",
+  "version": "0.8.22",
   "description": "A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.",
   "main": "./dist/index.js",
   "repository": {

src/hooks/use-scroll-handlers.ts

@@ -15,13 +15,14 @@ import {ActionSheetRef} from '../index';
  * with it to enable vertical scrolling. For horizontal ScrollViews, you should not use this hook.
  * @param id Id for the handler. Could be any string value.
  * @param ref ref of the ActionSheet in which the ScrollView is present.
+ * @param minGesutureBoundary The minimum area of scrollView from top, where swipe gestures are allowed always.
  * @returns
  */
 export function useScrollHandlers<T>(
   id: string,
   ref: RefObject<ActionSheetRef>,
+  minGesutureBoundary: number = 50,
 ) {
-  //const [enabled,setEnabled] = useState(false);
   const scrollRef = useRef<T>(null);
   const scrollLayout = useRef<LayoutRectangle>();
   const scrollOffset = useRef(0);
@@ -37,10 +38,6 @@ export function useScrollHandlers<T>(
   };
 
   const disableScrolling = React.useCallback(() => {
-    //@ts-ignore
-    // scrollRef.current?.setNativeProps?.({
-    //   scrollEnabled: false,
-    // });
     if (Platform.OS === 'web') {
       //@ts-ignore
       scrollRef.current.style.touchAction = 'none';
@@ -50,10 +47,6 @@ export function useScrollHandlers<T>(
   }, [scrollRef]);
 
   const enableScrolling = React.useCallback(() => {
-    //@ts-ignore
-    // scrollRef.current?.setNativeProps?.({
-    //   scrollEnabled: true,
-    // });
     if (Platform.OS === 'web') {
       //@ts-ignore
       scrollRef.current.style.overflowY = 'scroll';
@@ -69,7 +62,10 @@ export function useScrollHandlers<T>(
   }, [id, ref, disableScrolling, enableScrolling]);
 
   const onLayout = (event: LayoutChangeEvent) => {
-    scrollLayout.current = event.nativeEvent.layout;
+    scrollLayout.current = {
+      ...event.nativeEvent.layout,
+      y: event.nativeEvent.layout.y || minGesutureBoundary,
+    };
     subscription.current = ref.current?.ev.subscribe(
       'onoffsetchange',
       (offset: number) => {
@@ -91,7 +87,10 @@ export function useScrollHandlers<T>(
     );
     ref.current?.modifyGesturesForLayout(
       id,
-      scrollLayout.current,
+      {
+        ...scrollLayout.current,
+        y: scrollLayout.current.y || minGesutureBoundary,
+      },
       scrollOffset.current,
     );
   };

src/index.tsx

@@ -26,6 +26,7 @@ import {
 } from 'react-native';
 import EventManager, {actionSheetEventManager} from './eventmanager';
 import {
+  Route,
   RouterContext,
   RouterParamsContext,
   useRouter,
@@ -294,7 +295,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
 
     const getCurrentPosition = React.useCallback(() => {
       //@ts-ignore
-      return animations.translateY._value <= minTranslateValue.current
+      return animations.translateY._value <= minTranslateValue.current + 5
         ? 0
         : //@ts-ignore
           (animations.translateY._value as number);
@@ -579,20 +580,23 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                 let gestures = true;
                 for (let _id in gestureBoundaries.current) {
                   const gestureBoundary = gestureBoundaries.current[_id];
-                  if (getCurrentPosition() > 0 || !gestureBoundary) {
+                  if (getCurrentPosition() > 3 || !gestureBoundary) {
                     gestures = true;
                     break;
                   }
                   const scrollOffset = gestureBoundary?.scrollOffset || 0;
                   if (
-                    event.nativeEvent.pageY < gestureBoundary?.y ||
+                    event.nativeEvent.locationY < gestureBoundary?.y ||
                     (gesture.vy > 0 && scrollOffset <= 0) ||
                     getCurrentPosition() !== 0
                   ) {
-                    if (event.nativeEvent.pageY > gestureBoundary?.y)
-                      gestures = false;
-
-                    if (Platform.OS === 'web') {
+                    if (
+                      !props.enableGesturesInScrollView &&
+                      Platform.OS !== 'web' &&
+                      event.nativeEvent.locationY > gestureBoundary?.y
+                    ) {
+                      return false;
+                    } else {
                       gestures = true;
                     }
                   } else {
@@ -614,29 +618,27 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
               onStartShouldSetPanResponder: (event, _gesture) => {
                 if (sheetId && !isRenderedOnTop(sheetId, currentContext))
                   return false;
-
-                if (Platform.OS === 'web') {
-                  let gestures = true;
-                  for (let _id in gestureBoundaries.current) {
-                    const gestureBoundary = gestureBoundaries.current[_id];
-                    if (getCurrentPosition() > 3 || !gestureBoundary) {
-                      gestures = true;
-                    }
-                    const scrollOffset = gestureBoundary?.scrollOffset || 0;
-                    if (
-                      event.nativeEvent.pageY < gestureBoundary?.y ||
-                      scrollOffset <= 0 ||
-                      getCurrentPosition() !== 0
-                    ) {
-                      gestures = true;
+                let gestures = true;
+                for (let _id in gestureBoundaries.current) {
+                  const gestureBoundary = gestureBoundaries.current[_id];
+                  if (getCurrentPosition() > 3 || !gestureBoundary) {
+                    gestures = true;
+                  }
+                  const scrollOffset = gestureBoundary?.scrollOffset || 0;
+                  if (
+                    event.nativeEvent.locationY < gestureBoundary?.y ||
+                    (scrollOffset <= 0 && getCurrentPosition() !== 0)
+                  ) {
+                    if (Platform.OS !== 'web') {
+                      return false;
                     } else {
-                      gestures = false;
+                      gestures = true;
                     }
+                  } else {
+                    gestures = false;
                   }
-
-                  return gestures;
                 }
-                return true;
+                return gestures;
               },
               onPanResponderMove: (_event, gesture) => {
                 const value = initialValue.current + gesture.dy;
@@ -688,6 +690,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
         sheetId,
         currentContext,
         getCurrentPosition,
+        props.enableGesturesInScrollView,
         overdrawFactor,
         overdrawSize,
         animations.translateY,
@@ -950,6 +953,30 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       ],
     );
 
+    const renderRoute = useCallback(
+      (route: Route) => {
+        const RouteComponent = route.component as any;
+        return (
+          <Animated.View
+            key={route.name}
+            style={{
+              display:
+                route.name !== router.currentRoute?.name ? 'none' : 'flex',
+              opacity: animations.routeOpacity,
+            }}>
+            <RouterParamsContext.Provider value={route?.params}>
+              <RouteComponent
+                router={router}
+                params={route?.params}
+                payload={payloadRef.current}
+              />
+            </RouterParamsContext.Provider>
+          </Animated.View>
+        );
+      },
+      [animations.routeOpacity, router],
+    );
+
     const getPaddingBottom = () => {
       if (!props.useBottomSafeAreaPadding && !props.containerStyle) return 0;
 
@@ -1147,29 +1174,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
 
                     {router?.hasRoutes() ? (
                       <RouterContext.Provider value={router}>
-                        {router?.stack.map(route => {
-                          const RouteComponent = route.component as any;
-                          return (
-                            <Animated.View
-                              key={route.name}
-                              style={{
-                                display:
-                                  route.name !== router.currentRoute?.name
-                                    ? 'none'
-                                    : 'flex',
-                                opacity: animations.routeOpacity,
-                              }}>
-                              <RouterParamsContext.Provider
-                                value={route?.params}>
-                                <RouteComponent
-                                  router={router}
-                                  params={route?.params}
-                                  payload={payloadRef.current}
-                                />
-                              </RouterParamsContext.Provider>
-                            </Animated.View>
-                          );
-                        })}
+                        {router?.stack.map(renderRoute)}
                       </RouterContext.Provider>
                     ) : (
                       props?.children

src/types.ts

@@ -296,4 +296,9 @@ export type ActionSheetProps = {
    * the sheet regardless of the route in stack.
    */
   enableRouterBackNavigation?: boolean;
+  /**
+   * Enable swipe gestures inside ScrollView/FlatList. Use this with caution. It
+   * might be a little buggy and conflict with ScrollView touch events.
+   */
+  enableGesturesInScrollView?: boolean;
 };