From 0479ee9ff0089aa38f597b6e5622be1e1a611e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 10 Jun 2024 16:13:59 +0200 Subject: [PATCH 1/5] wrap everything in neccessary callbacks --- example/src/new_api/swipeable/Swipeable.tsx | 97 +++++++++++---------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/example/src/new_api/swipeable/Swipeable.tsx b/example/src/new_api/swipeable/Swipeable.tsx index 2b8cc161e7..7abaa6e624 100644 --- a/example/src/new_api/swipeable/Swipeable.tsx +++ b/example/src/new_api/swipeable/Swipeable.tsx @@ -5,6 +5,7 @@ import React, { ForwardedRef, forwardRef, + useCallback, useImperativeHandle, useMemo, } from 'react'; @@ -216,7 +217,7 @@ const Swipeable = forwardRef( const showLeftProgress = useSharedValue(0); const showRightProgress = useSharedValue(0); - let swipeableMethods: SwipeableMethods; + let swipeableMethods: SwipeableMethods | undefined; const defaultProps = { friction: 1, @@ -228,7 +229,7 @@ const Swipeable = forwardRef( overshootFriction = defaultProps.overshootFriction, } = props; - const calculateCurrentOffset = () => { + const calculateCurrentOffset = useCallback(() => { 'worklet'; if (rowState.value === 1) { return leftWidth.value; @@ -236,7 +237,7 @@ const Swipeable = forwardRef( return -rowWidth.value - rightOffset.value; } return 0; - }; + }, [leftWidth, rightOffset, rowState, rowWidth]); const updateAnimatedEvent = () => { 'worklet'; @@ -302,50 +303,49 @@ const Swipeable = forwardRef( ); }; - const animateRow = ( - fromValue: number, - toValue: number, - velocityX?: number - ) => { - 'worklet'; - - rowState.value = Math.sign(toValue); - - appliedTranslation.value = withSpring( - toValue, - { - duration: 1000, - dampingRatio: 1.2, - stiffness: 500, - velocity: velocityX, - ...props.animationOptions, - }, - (isFinished) => { - if (isFinished) { - if (toValue > 0 && props.onSwipeableOpen) { - runOnJS(props.onSwipeableOpen)('left', swipeableMethods); - } else if (toValue < 0 && props.onSwipeableOpen) { - runOnJS(props.onSwipeableOpen)('right', swipeableMethods); - } else if (props.onSwipeableClose) { - const closingDirection = fromValue > 0 ? 'left' : 'right'; - runOnJS(props.onSwipeableClose)( - closingDirection, - swipeableMethods - ); + const animateRow = useCallback( + (fromValue: number, toValue: number, velocityX?: number) => { + 'worklet'; + + rowState.value = Math.sign(toValue); + + appliedTranslation.value = withSpring( + toValue, + { + duration: 1000, + dampingRatio: 1.2, + stiffness: 500, + velocity: velocityX, + ...props.animationOptions, + }, + (isFinished) => { + if (isFinished) { + if (toValue > 0 && props.onSwipeableOpen) { + runOnJS(props.onSwipeableOpen)('left', swipeableMethods!); + } else if (toValue < 0 && props.onSwipeableOpen) { + runOnJS(props.onSwipeableOpen)('right', swipeableMethods!); + } else if (props.onSwipeableClose) { + const closingDirection = fromValue > 0 ? 'left' : 'right'; + runOnJS(props.onSwipeableClose)( + closingDirection, + swipeableMethods! + ); + } } } + ); + + if (toValue > 0 && props.onSwipeableWillOpen) { + runOnJS(props.onSwipeableWillOpen)('left'); + } else if (toValue < 0 && props.onSwipeableWillOpen) { + runOnJS(props.onSwipeableWillOpen)('right'); + } else if (props.onSwipeableWillClose) { + const closingDirection = fromValue > 0 ? 'left' : 'right'; + runOnJS(props.onSwipeableWillClose)(closingDirection); } - ); - - if (toValue > 0 && props.onSwipeableWillOpen) { - runOnJS(props.onSwipeableWillOpen)('left'); - } else if (toValue < 0 && props.onSwipeableWillOpen) { - runOnJS(props.onSwipeableWillOpen)('right'); - } else if (props.onSwipeableWillClose) { - const closingDirection = fromValue > 0 ? 'left' : 'right'; - runOnJS(props.onSwipeableWillClose)(closingDirection); - } - }; + }, + [appliedTranslation, props, rowState, swipeableMethods] + ); const onRowLayout = ({ nativeEvent }: LayoutChangeEvent) => { rowWidth.value = nativeEvent.layout.width; @@ -381,14 +381,15 @@ const Swipeable = forwardRef( rowState.value = 0; }, }), - // eslint-disable-next-line react-hooks/exhaustive-deps [ + animateRow, + calculateCurrentOffset, appliedTranslation, - leftWidth, - rightOffset, + leftWidth.value, + rightOffset.value, rightWidth, rowState, - rowWidth, + rowWidth.value, userDrag, ] ); From 51e2979b3d839b47bae5dcd608b7b48c2192b969 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 10 Jun 2024 16:32:08 +0200 Subject: [PATCH 2/5] fix incorrectly listed dependencies --- example/src/new_api/swipeable/Swipeable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/src/new_api/swipeable/Swipeable.tsx b/example/src/new_api/swipeable/Swipeable.tsx index 7abaa6e624..2b00033025 100644 --- a/example/src/new_api/swipeable/Swipeable.tsx +++ b/example/src/new_api/swipeable/Swipeable.tsx @@ -217,7 +217,7 @@ const Swipeable = forwardRef( const showLeftProgress = useSharedValue(0); const showRightProgress = useSharedValue(0); - let swipeableMethods: SwipeableMethods | undefined; + let swipeableMethods: SwipeableMethods; const defaultProps = { friction: 1, @@ -385,11 +385,11 @@ const Swipeable = forwardRef( animateRow, calculateCurrentOffset, appliedTranslation, - leftWidth.value, - rightOffset.value, + leftWidth, + rightOffset, rightWidth, rowState, - rowWidth.value, + rowWidth, userDrag, ] ); From 0e349335566c8f72632d9706c9966326e0fdfc61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 10 Jun 2024 16:33:10 +0200 Subject: [PATCH 3/5] revert removing methods initialization --- example/src/new_api/swipeable/Swipeable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/new_api/swipeable/Swipeable.tsx b/example/src/new_api/swipeable/Swipeable.tsx index 2b00033025..679f27eda3 100644 --- a/example/src/new_api/swipeable/Swipeable.tsx +++ b/example/src/new_api/swipeable/Swipeable.tsx @@ -217,7 +217,7 @@ const Swipeable = forwardRef( const showLeftProgress = useSharedValue(0); const showRightProgress = useSharedValue(0); - let swipeableMethods: SwipeableMethods; + let swipeableMethods: SwipeableMethods | undefined; const defaultProps = { friction: 1, From 3ff01115a25d4db061931bce95db227863fb41c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 11 Jun 2024 09:48:35 +0200 Subject: [PATCH 4/5] fix update loop between swipeableMethods and callbacks --- example/src/new_api/swipeable/Swipeable.tsx | 71 ++++++++++++++------- 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/example/src/new_api/swipeable/Swipeable.tsx b/example/src/new_api/swipeable/Swipeable.tsx index 679f27eda3..deda32f028 100644 --- a/example/src/new_api/swipeable/Swipeable.tsx +++ b/example/src/new_api/swipeable/Swipeable.tsx @@ -6,8 +6,9 @@ import React, { ForwardedRef, forwardRef, useCallback, + useEffect, useImperativeHandle, - useMemo, + useRef, } from 'react'; import { Gesture, @@ -217,7 +218,20 @@ const Swipeable = forwardRef( const showLeftProgress = useSharedValue(0); const showRightProgress = useSharedValue(0); - let swipeableMethods: SwipeableMethods | undefined; + const swipeableMethods = useRef({ + close: () => { + 'worklet'; + }, + openLeft: () => { + 'worklet'; + }, + openRight: () => { + 'worklet'; + }, + reset: () => { + 'worklet'; + }, + }); const defaultProps = { friction: 1, @@ -321,14 +335,20 @@ const Swipeable = forwardRef( (isFinished) => { if (isFinished) { if (toValue > 0 && props.onSwipeableOpen) { - runOnJS(props.onSwipeableOpen)('left', swipeableMethods!); + runOnJS(props.onSwipeableOpen)( + 'left', + swipeableMethods.current + ); } else if (toValue < 0 && props.onSwipeableOpen) { - runOnJS(props.onSwipeableOpen)('right', swipeableMethods!); + runOnJS(props.onSwipeableOpen)( + 'right', + swipeableMethods.current + ); } else if (props.onSwipeableClose) { const closingDirection = fromValue > 0 ? 'left' : 'right'; runOnJS(props.onSwipeableClose)( closingDirection, - swipeableMethods! + swipeableMethods.current ); } } @@ -359,8 +379,10 @@ const Swipeable = forwardRef( dragOffsetFromRightEdge = 10, } = props; - swipeableMethods = useMemo( - () => ({ + useEffect(() => { + console.log('useEffect'); + + swipeableMethods.current = { close() { 'worklet'; animateRow(calculateCurrentOffset(), 0); @@ -380,19 +402,18 @@ const Swipeable = forwardRef( appliedTranslation.value = 0; rowState.value = 0; }, - }), - [ - animateRow, - calculateCurrentOffset, - appliedTranslation, - leftWidth, - rightOffset, - rightWidth, - rowState, - rowWidth, - userDrag, - ] - ); + }; + }, [ + animateRow, + calculateCurrentOffset, + appliedTranslation, + leftWidth, + rightOffset, + rightWidth, + rowState, + rowWidth, + userDrag, + ]); const leftAnimatedStyle = useAnimatedStyle(() => ({ transform: [ @@ -407,7 +428,7 @@ const Swipeable = forwardRef( {renderLeftActions( showLeftProgress, appliedTranslation, - swipeableMethods + swipeableMethods.current )} @@ -430,7 +451,7 @@ const Swipeable = forwardRef( {renderRightActions( showRightProgress, appliedTranslation, - swipeableMethods + swipeableMethods.current )} @@ -521,13 +542,17 @@ const Swipeable = forwardRef( ]); tapGesture.shouldCancelWhenOutside(true); - useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]); + useImperativeHandle(ref, () => swipeableMethods.current, [ + swipeableMethods, + ]); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: appliedTranslation.value }], pointerEvents: rowState.value === 0 ? 'auto' : 'box-only', })); + console.log('rerender'); + const composedGesture = Gesture.Race(panGesture, tapGesture); return ( Date: Tue, 11 Jun 2024 09:51:06 +0200 Subject: [PATCH 5/5] remove console logs --- example/src/new_api/swipeable/Swipeable.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/example/src/new_api/swipeable/Swipeable.tsx b/example/src/new_api/swipeable/Swipeable.tsx index deda32f028..05d308ea3c 100644 --- a/example/src/new_api/swipeable/Swipeable.tsx +++ b/example/src/new_api/swipeable/Swipeable.tsx @@ -380,8 +380,6 @@ const Swipeable = forwardRef( } = props; useEffect(() => { - console.log('useEffect'); - swipeableMethods.current = { close() { 'worklet'; @@ -551,8 +549,6 @@ const Swipeable = forwardRef( pointerEvents: rowState.value === 0 ? 'auto' : 'box-only', })); - console.log('rerender'); - const composedGesture = Gesture.Race(panGesture, tapGesture); return (