diff --git a/ios/Podfile.lock b/ios/Podfile.lock index f594257f..d2aa2edb 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/src/app/services/ServiceSheet.tsx b/src/app/services/ServiceSheet.tsx index c4b9039b..b78cdc69 100644 --- a/src/app/services/ServiceSheet.tsx +++ b/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 ( {children} diff --git a/src/hooks/useSwipe.ts b/src/hooks/useSwipe.ts new file mode 100644 index 00000000..7edfc3f7 --- /dev/null +++ b/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 } +}