Skip to content

Commit 1415d55

Browse files
authored
Fix onSwipeableWillClose called on opening of ReanimatedSwipeable (#3478)
## Description Apparently faulty logic in `ReanimatedSwipeable` makes `onSwipeableClose` and `onSwipeableWillClose` callbacks being triggered right after opening swipeable. This PR fixes that behavior. Fixes #3475 ## Test plan <details> <summary>Tested on the following code:</summary> ```jsx import React from 'react'; import { View, Text } from 'react-native'; import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; export default function Example() { return ( <Swipeable renderLeftActions={() => { return ( <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}> <Text>Left</Text> </View> ); }} renderRightActions={() => { return ( <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}> <Text>Right</Text> </View> ); }} onSwipeableWillClose={() => console.log('Will close')}> <View style={{ height: 80, backgroundColor: 'blue', }} /> </Swipeable> ); } ``` </details>
1 parent ece00f2 commit 1415d55

File tree

1 file changed

+17
-11
lines changed

1 file changed

+17
-11
lines changed

packages/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -357,27 +357,33 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
357357
const dispatchImmediateEvents = useCallback(
358358
(fromValue: number, toValue: number) => {
359359
'worklet';
360-
if (toValue > 0 && onSwipeableWillOpen) {
361-
runOnJS(onSwipeableWillOpen)(SwipeDirection.RIGHT);
362-
} else if (toValue < 0 && onSwipeableWillOpen) {
363-
runOnJS(onSwipeableWillOpen)(SwipeDirection.LEFT);
364-
} else if (onSwipeableWillClose) {
360+
361+
if (onSwipeableWillOpen && toValue !== 0) {
362+
runOnJS(onSwipeableWillOpen)(
363+
toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT
364+
);
365+
}
366+
367+
if (onSwipeableWillClose && toValue === 0) {
365368
runOnJS(onSwipeableWillClose)(
366369
fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
367370
);
368371
}
369372
},
370-
[onSwipeableWillClose, onSwipeableWillOpen]
373+
[onSwipeableWillClose, onSwipeableWillOpen, rowState]
371374
);
372375

373376
const dispatchEndEvents = useCallback(
374377
(fromValue: number, toValue: number) => {
375378
'worklet';
376-
if (toValue > 0 && onSwipeableOpen) {
377-
runOnJS(onSwipeableOpen)(SwipeDirection.RIGHT);
378-
} else if (toValue < 0 && onSwipeableOpen) {
379-
runOnJS(onSwipeableOpen)(SwipeDirection.LEFT);
380-
} else if (onSwipeableClose) {
379+
380+
if (onSwipeableOpen && toValue !== 0) {
381+
runOnJS(onSwipeableOpen)(
382+
toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT
383+
);
384+
}
385+
386+
if (onSwipeableClose && toValue === 0) {
381387
runOnJS(onSwipeableClose)(
382388
fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
383389
);

0 commit comments

Comments
 (0)