Add swipe right drawer gesture (#852)

Author: Perronef5

ios/Podfile.lock

@@ -2043,9 +2043,9 @@ SPEC CHECKSUMS:
   TcpSockets: 14306fb79f9750ea7d2ddd02d8bed182abb01797
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   Turf: a1604e74adce15c58462c9ae2acdbf049d5be35e
-  Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09
+  Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
 PODFILE CHECKSUM: 51a354c5ff94b58e8c8bd1903d2326a93a17b4d0
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.16.1

src/app/services/ServiceSheet.tsx

@@ -28,12 +28,18 @@ import HeliumBottomSheet from '@components/HeliumBottomSheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useAccountStorage } from '@config/storage/AccountStorageProvider'
 import changeNavigationBarColor from 'react-native-navigation-bar-color'
-import { Platform, StyleProp, ViewStyle } from 'react-native'
+import {
+  GestureResponderEvent,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
 import { wh } from '@utils/layout'
 import { useSelector } from 'react-redux'
 import { RootState } from '@store/rootReducer'
 import StickersPage from '@features/stickers/StickersPage'
 import { StickerProvider } from '@features/stickers/StickerContext'
+import { useSwipe } from '@hooks/useSwipe'
 import { ServiceSheetNavigationProp } from './serviceSheetTypes'
 
 type ServiceSheetProps = {
@@ -59,6 +65,12 @@ const ServiceSheet = ({
 
   const { rootSheetPosition } = useSelector((state: RootState) => state.app)
 
+  const onSwipeRight = useCallback((_: GestureResponderEvent) => {
+    setIsExpanded(true)
+  }, [])
+
+  const { onTouchStart, onTouchEnd } = useSwipe(undefined, onSwipeRight, 6)
+
   const onRoute = useCallback(
     (value: string) => {
       setIsExpanded(false)
@@ -179,6 +191,7 @@ const ServiceSheet = ({
       ),
     }
   }, [isChild, rootSheetPosition])
+
   return (
     <Box flex={1} style={{ paddingTop: top }}>
       <SideDrawer
@@ -205,6 +218,7 @@ const ServiceSheet = ({
           backgroundStyle={backgroundStyle}
           // // TODO: Bring this back once we have the stickers page
           enablePanDownToClose={false}
+          enableContentPanningGesture={false}
         >
           <ThemeProvider theme={lightTheme}>
             <Box
@@ -213,6 +227,9 @@ const ServiceSheet = ({
               flexDirection="column"
               zIndex={100}
               position="relative"
+              onTouchStart={onTouchStart}
+              onTouchEnd={onTouchEnd}
+              onTouchEndCapture={onTouchEnd}
             >
               {children}
             </Box>

src/hooks/useSwipe.ts

@@ -0,0 +1,34 @@
+import { Dimensions, GestureResponderEvent } from 'react-native'
+
+const windowWidth = Dimensions.get('window').width
+
+export function useSwipe(
+  onSwipeLeft?: ((event: GestureResponderEvent) => void) | undefined,
+  onSwipeRight?: ((event: GestureResponderEvent) => void) | undefined,
+  rangeOffset = 4,
+) {
+  let firstTouch = 0
+
+  // set user touch start position
+  function onTouchStart(e: GestureResponderEvent) {
+    firstTouch = e.nativeEvent.pageX
+  }
+
+  // when touch ends check for swipe directions
+  function onTouchEnd(e: GestureResponderEvent) {
+    // get touch position and screen size
+    const positionX = e.nativeEvent.pageX
+    const range = windowWidth / rangeOffset
+
+    // check if position is growing positively and has reached specified range
+    if (positionX - firstTouch > range) {
+      if (onSwipeRight) onSwipeRight(e)
+    }
+    // check if position is growing negatively and has reached specified range
+    else if (firstTouch - positionX > range) {
+      if (onSwipeLeft) onSwipeLeft(e)
+    }
+  }
+
+  return { onTouchStart, onTouchEnd }
+}