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 (