Skip to content

Commit 26eb9f6

Browse files
m-bertj-piasecki
authored andcommitted
[iOS] Fix Pressable onPressOut callback (#3777)
## Description Currently `onPressOut` is not called when `Pressable` gestures are cancelled. `iOS` and `android` are different when it comes to order of callbacks. In that particular case, when gesture is cancelled, on `android` we first receive `onTouchesCancelled`. However, on `iOS` `onFinalize` is called first. Inside `handleFinalize` function `isCurrentlyPressed` is reset to false, which means that `onPressOut` will not be called when we enter `onTouchesCancelled` callback. The thing is, in that place we don't have information required for event, so it is not possible to call `handlePressOut` from this place. In this PR, I disabled calling `handleFinalize` on `iOS` in `onFinalize` callback, so that it calls `handlePressOut` when inside `onTouchesCancelled` callback. It also aligns with `android` implementation, as now the flow is the same. Fixes #3769 ## Test plan Tested on: - `Pressable` examples on `expo-example` app. <details> <summary> On the following code: </summary> ```tsx import { View } from 'react-native'; import { GestureHandlerRootView, Pressable, ScrollView, } from 'react-native-gesture-handler'; export default function Test() { return ( <GestureHandlerRootView> <ScrollView style={{ flexGrow: 1, backgroundColor: 'white' }}> <View style={{ paddingTop: 200, height: 2000 }}> <Pressable style={{ width: 30, height: 30, backgroundColor: 'pink' }} onPress={() => console.log('press')} onPressOut={() => console.log('press out')} /> </View> </ScrollView> </GestureHandlerRootView> ); } ``` </details>
1 parent c202c8a commit 26eb9f6

1 file changed

Lines changed: 4 additions & 1 deletion

File tree

  • packages/react-native-gesture-handler/src/components/Pressable

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,10 @@ const Pressable = (props: PressableProps) => {
311311
} else {
312312
stateMachine.handleEvent(StateMachineEvent.CANCEL);
313313
}
314-
handleFinalize();
314+
315+
if (Platform.OS !== 'ios') {
316+
handleFinalize();
317+
}
315318
}
316319
}),
317320
[stateMachine, handlePressOut, handleFinalize]

0 commit comments

Comments
 (0)