Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pass correct params to animateToPosition #610

Merged
merged 2 commits into from
Aug 30, 2021
Merged

fix: pass correct params to animateToPosition #610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2bdf32
fix: pass correct params to animateToPosition
vonovak Aug 30, 2021
a14e0d3
refactor: updated gesture handler param name from type to source
gorhom Aug 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 27 additions & 33 deletions example/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts
View file
Open in desktop
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
Open in desktop
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 &&
gorhom marked this conversation as resolved.
Show resolved Hide resolved
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