Skip to content

Commit 154f204

Browse files
authored
Add missing handlers callbacks to buttons (#4033)
## Description In our buttons implementations we override `on*` callbacks for `Native` gesture (except of `onUpdate`). This PR fixes this issue by calling originally passed callbacks inside overriden ones. ## Test plan <details> <summary>Tested on the following example:</summary> ```tsx import { StyleSheet } from 'react-native'; import { RectButton, GestureHandlerRootView, } from 'react-native-gesture-handler'; export default function App() { return ( <GestureHandlerRootView style={styles.container}> <RectButton style={styles.box} onBegin={(e) => { console.log('onBegin', e, Date.now()); }} onActivate={(e) => { console.log('onActivate', e, Date.now()); }} onUpdate={(e) => { console.log('onUpdate', e, Date.now()); }} onDeactivate={(e, s) => { console.log('onDeactivate', e, s, Date.now()); }} onFinalize={(e, s) => { console.log('onFinalize', e, s, Date.now()); }} /> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 200, height: 50, borderRadius: 15, backgroundColor: '#007AFF', }, }); ``` </details>
1 parent 9e8c54c commit 154f204

1 file changed

Lines changed: 13 additions & 3 deletions

File tree

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ export const BaseButton = (props: BaseButtonProps) => {
3939
if (onLongPress) {
4040
longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
4141
}
42+
43+
props.onBegin?.(e);
4244
}
4345
};
4446

@@ -50,27 +52,35 @@ export const BaseButton = (props: BaseButtonProps) => {
5052
if (onLongPress) {
5153
longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
5254
}
55+
56+
props.onBegin?.(e);
5357
}
5458

5559
if (!e.pointerInside && longPressTimeout.current !== undefined) {
5660
clearTimeout(longPressTimeout.current);
5761
longPressTimeout.current = undefined;
5862
}
63+
64+
props.onActivate?.(e);
5965
};
6066

61-
const onDeactivate = (e: CallbackEventType, success: boolean) => {
67+
const onDeactivate = (e: CallbackEventType, didSucceed: boolean) => {
6268
onActiveStateChange?.(false);
6369

64-
if (success && !longPressDetected.current) {
70+
if (didSucceed && !longPressDetected.current) {
6571
onPress?.(e.pointerInside);
6672
}
73+
74+
props.onDeactivate?.(e, didSucceed);
6775
};
6876

69-
const onFinalize = (_e: CallbackEventType) => {
77+
const onFinalize = (e: CallbackEventType, didSucceed: boolean) => {
7078
if (longPressTimeout.current !== undefined) {
7179
clearTimeout(longPressTimeout.current);
7280
longPressTimeout.current = undefined;
7381
}
82+
83+
props.onFinalize?.(e, didSucceed);
7484
};
7585

7686
return (

0 commit comments

Comments
 (0)