Skip to content

Commit

Permalink
fix: pass correct params to animateToPosition (#610)
Browse files Browse the repository at this point in the history 
* fix: pass correct params to animateToPosition

* refactor: updated gesture handler param name from type to source

Co-authored-by: Mo Gorhom <[email protected]>
  • Loading branch information
@vonovak @gorhom
vonovak and gorhom authored Aug 30, 2021
1 parent 3316c8b commit 01883fb
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 59 deletions.
60 changes: 27 additions & 33 deletions example/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
SCROLLABLE_TYPE,
WINDOW_HEIGHT,
GestureEventHandlerCallbackType,
ANIMATION_SOURCE,
} from '@gorhom/bottom-sheet';
import { useGestureTranslationY } from './GestureTranslationContext';

Expand Down Expand Up @@ -55,7 +56,7 @@ export const useCustomGestureEventsHandlers = () => {
[animatedPosition, animatedKeyboardState, animatedScrollableContentOffsetY]
);
const handleOnActive: GestureEventHandlerCallbackType = useWorkletCallback(
function handleOnActive(type, { translationY }, context) {
function handleOnActive(source, { translationY }, context) {
gestureTranslationY.value = translationY;

let highestSnapPoint =
Expand Down Expand Up @@ -91,7 +92,7 @@ export const useCustomGestureEventsHandlers = () => {
* point, then do not interact with current gesture.
*/
if (
type === GESTURE_SOURCE.SCROLLABLE &&
source === GESTURE_SOURCE.SCROLLABLE &&
isScrollableRefreshable.value &&
animatedPosition.value === highestSnapPoint
) {
Expand All @@ -106,7 +107,7 @@ export const useCustomGestureEventsHandlers = () => {
*/
const negativeScrollableContentOffset =
(context.initialPosition === highestSnapPoint &&
type === GESTURE_SOURCE.SCROLLABLE) ||
source === GESTURE_SOURCE.SCROLLABLE) ||
!context.isScrollablePositionLocked
? animatedScrollableContentOffsetY.value * -1
: 0;
Expand Down Expand Up @@ -134,7 +135,7 @@ export const useCustomGestureEventsHandlers = () => {
context.initialPosition > secondHighestSnapPoint;

const clampedPosition = (() => {
if (type === GESTURE_SOURCE.SCROLLABLE) {
if (source === GESTURE_SOURCE.SCROLLABLE) {
const clampSource = (() => {
if (isDraggingFromBottom) {
return accumulatedDraggedPosition;
Expand All @@ -157,7 +158,7 @@ export const useCustomGestureEventsHandlers = () => {
*/
if (
context.isScrollablePositionLocked &&
type === GESTURE_SOURCE.SCROLLABLE &&
source === GESTURE_SOURCE.SCROLLABLE &&
animatedPosition.value === highestSnapPoint
) {
context.isScrollablePositionLocked = false;
Expand All @@ -168,7 +169,7 @@ export const useCustomGestureEventsHandlers = () => {
*/
if (enableOverDrag) {
if (
(type === GESTURE_SOURCE.HANDLE ||
(source === GESTURE_SOURCE.HANDLE ||
animatedScrollableType.value === SCROLLABLE_TYPE.VIEW) &&
draggedPosition < highestSnapPoint
) {
Expand All @@ -181,7 +182,7 @@ export const useCustomGestureEventsHandlers = () => {
}

if (
type === GESTURE_SOURCE.HANDLE &&
source === GESTURE_SOURCE.HANDLE &&
draggedPosition > lowestSnapPoint
) {
const resistedPosition =
Expand Down Expand Up @@ -210,12 +211,13 @@ export const useCustomGestureEventsHandlers = () => {
);
const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
function handleOnEnd(
type,
source,
{ translationY, absoluteY, velocityY },
context
) {
const highestSnapPoint = animatedHighestSnapPoint.value;

const isSheetAtHighestSnapPoint =
animatedPosition.value === highestSnapPoint;
/**
* if the sheet is in a temporary position and the gesture ended above
* the current position, then we snap back to the temporary position.
Expand All @@ -225,7 +227,11 @@ export const useCustomGestureEventsHandlers = () => {
context.initialPosition >= animatedPosition.value
) {
if (context.initialPosition > animatedPosition.value) {
animateToPosition(context.initialPosition, velocityY / 2);
animateToPosition(
context.initialPosition,
ANIMATION_SOURCE.GESTURE,
velocityY / 2
);
}
return;
}
Expand Down Expand Up @@ -291,7 +297,7 @@ export const useCustomGestureEventsHandlers = () => {
velocityY,
snapPoints
);
if (type === GESTURE_SOURCE.HANDLE) {
if (source === GESTURE_SOURCE.HANDLE) {
return endingSnapPoint;
}
const secondHighestSnapPoint =
Expand All @@ -309,33 +315,21 @@ export const useCustomGestureEventsHandlers = () => {
return;
}

const wasGestureHandledByScrollView =
source === GESTURE_SOURCE.SCROLLABLE &&
animatedScrollableContentOffsetY.value > 0;
/**
* if gesture was picked by scrollable and did not move the sheet,
* then exit the method to prevent snapping.
* prevents snapping from top to middle / bottom with repeated interrupted scrolls
*/
if (
(type === GESTURE_SOURCE.SCROLLABLE
? animatedScrollableContentOffsetY.value
: 0) > 0 &&
context.initialPosition === highestSnapPoint &&
animatedPosition.value === highestSnapPoint
) {
return;
}

/**
* if gesture started by scrollable dragging the sheet than continue scrolling,
* then exit the method to prevent snapping.
*/
if (
type === GESTURE_SOURCE.SCROLLABLE &&
animatedScrollableContentOffsetY.value > 0 &&
animatedPosition.value === highestSnapPoint
) {
if (wasGestureHandledByScrollView && isSheetAtHighestSnapPoint) {
return;
}

animateToPosition(destinationPoint, velocityY / 2);
animateToPosition(
destinationPoint,
ANIMATION_SOURCE.GESTURE,
velocityY / 2
);
},
[
enablePanDownToClose,
Expand Down
38 changes: 12 additions & 26 deletions src/hooks/useGestureEventsHandlersDefault.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
context
) {
const highestSnapPoint = animatedHighestSnapPoint.value;
const isSheetAtHighestSnapPoint =
animatedPosition.value === highestSnapPoint;

/**
* if scrollable is refreshable and sheet position at the highest
Expand All @@ -240,7 +242,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
if (
source === GESTURE_SOURCE.SCROLLABLE &&
isScrollableRefreshable.value &&
animatedPosition.value === highestSnapPoint
isSheetAtHighestSnapPoint
) {
return;
}
Expand All @@ -256,8 +258,8 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
if (context.initialPosition > animatedPosition.value) {
animateToPosition(
context.initialPosition,
velocityY / 2,
ANIMATION_SOURCE.GESTURE
ANIMATION_SOURCE.GESTURE,
velocityY / 2
);
}
return;
Expand Down Expand Up @@ -330,36 +332,20 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
return;
}

const wasGestureHandledByScrollView =
source === GESTURE_SOURCE.SCROLLABLE &&
animatedScrollableContentOffsetY.value > 0;
/**
* if gesture was picked by scrollable and did not move the sheet,
* then exit the method to prevent snapping.
*/
if (
(source === GESTURE_SOURCE.SCROLLABLE
? animatedScrollableContentOffsetY.value
: 0) > 0 &&
context.initialPosition === highestSnapPoint &&
animatedPosition.value === highestSnapPoint
) {
return;
}

/**
* if gesture started by scrollable dragging the sheet than continue scrolling,
* then exit the method to prevent snapping.
* prevents snapping from top to middle / bottom with repeated interrupted scrolls
*/
if (
source === GESTURE_SOURCE.SCROLLABLE &&
animatedScrollableContentOffsetY.value > 0 &&
animatedPosition.value === highestSnapPoint
) {
if (wasGestureHandledByScrollView && isSheetAtHighestSnapPoint) {
return;
}

animateToPosition(
destinationPoint,
velocityY / 2,
ANIMATION_SOURCE.GESTURE
ANIMATION_SOURCE.GESTURE,
velocityY / 2
);
},
[
Expand Down

0 comments on commit 01883fb

Please sign in to comment.