Skip to content

Commit 1e89ff8

Browse files
j-piaseckij-piasecki
committed
Namespace button press events to avoid colliding with core topPress 
1 parent 6d1d962 commit 1e89ff8

9 files changed

Lines changed: 66 additions & 55 deletions

File tree

‎packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/events/RNGestureHandlerButtonEvent.kt‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,11 @@ class RNGestureHandlerButtonEvent private constructor() : Event<RNGestureHandler
7373
}
7474

7575
companion object {
76-
private const val ON_PRESS_EVENT_NAME = "onPress"
77-
private const val ON_PRESS_IN_EVENT_NAME = "onPressIn"
78-
private const val ON_PRESS_OUT_EVENT_NAME = "onPressOut"
79-
private const val ON_LONG_PRESS_EVENT_NAME = "onLongPress"
80-
private const val ON_INTERACTION_FINISHED_EVENT_NAME = "onInteractionFinished"
76+
private const val ON_PRESS_EVENT_NAME = "onButtonPress"
77+
private const val ON_PRESS_IN_EVENT_NAME = "onButtonPressIn"
78+
private const val ON_PRESS_OUT_EVENT_NAME = "onButtonPressOut"
79+
private const val ON_LONG_PRESS_EVENT_NAME = "onButtonLongPress"
80+
private const val ON_INTERACTION_FINISHED_EVENT_NAME = "onButtonInteractionFinished"
8181

8282
private const val TOUCH_EVENTS_POOL_SIZE = 7 // magic
8383
private val EVENTS_POOL = Pools.SynchronizedPool<RNGestureHandlerButtonEvent>(TOUCH_EVENTS_POOL_SIZE)

‎packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -383,19 +383,20 @@ - (void)dispatchButtonEvent:(RNGHButtonEventType)type withExtraData:(RNGestureHa
383383

384384
switch (type) {
385385
case RNGHButtonEventTypePress:
386-
eventEmitter.onPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnPress{}));
386+
eventEmitter.onButtonPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnButtonPress{}));
387387
break;
388388
case RNGHButtonEventTypePressIn:
389-
eventEmitter.onPressIn(fillEvent(RNGestureHandlerButtonEventEmitter::OnPressIn{}));
389+
eventEmitter.onButtonPressIn(fillEvent(RNGestureHandlerButtonEventEmitter::OnButtonPressIn{}));
390390
break;
391391
case RNGHButtonEventTypePressOut:
392-
eventEmitter.onPressOut(fillEvent(RNGestureHandlerButtonEventEmitter::OnPressOut{}));
392+
eventEmitter.onButtonPressOut(fillEvent(RNGestureHandlerButtonEventEmitter::OnButtonPressOut{}));
393393
break;
394394
case RNGHButtonEventTypeLongPress:
395-
eventEmitter.onLongPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnLongPress{}));
395+
eventEmitter.onButtonLongPress(fillEvent(RNGestureHandlerButtonEventEmitter::OnButtonLongPress{}));
396396
break;
397397
case RNGHButtonEventTypeInteractionFinished:
398-
eventEmitter.onInteractionFinished(fillEvent(RNGestureHandlerButtonEventEmitter::OnInteractionFinished{}));
398+
eventEmitter.onButtonInteractionFinished(
399+
fillEvent(RNGestureHandlerButtonEventEmitter::OnButtonInteractionFinished{}));
399400
break;
400401
}
401402
}

‎packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ const buttonEvent = (pointerInside = true) => ({
4141
// Mirrors the event sequence the native side dispatches for a successful tap.
4242
const fireNativeTap = (testID: string) => {
4343
const button = screen.getByTestId(testID);
44-
fireEvent(button, 'pressIn', buttonEvent());
45-
fireEvent(button, 'pressOut', buttonEvent());
46-
fireEvent(button, 'press', buttonEvent());
47-
fireEvent(button, 'interactionFinished', buttonEvent());
44+
fireEvent(button, 'buttonPressIn', buttonEvent());
45+
fireEvent(button, 'buttonPressOut', buttonEvent());
46+
fireEvent(button, 'buttonPress', buttonEvent());
47+
fireEvent(button, 'buttonInteractionFinished', buttonEvent());
4848
};
4949

5050
describe('[API v3] Hooks', () => {
@@ -479,12 +479,12 @@ describe('[API v3] Components', () => {
479479
// Includes a re-entry PressIn (finger dragged out and back in) so the
480480
// capture-once verdict path is exercised too.
481481
const button = screen.getByTestId('touchable');
482-
fireEvent(button, 'pressIn', buttonEvent());
483-
fireEvent(button, 'pressOut', buttonEvent(false));
484-
fireEvent(button, 'pressIn', buttonEvent());
485-
fireEvent(button, 'pressOut', buttonEvent());
486-
fireEvent(button, 'press', buttonEvent());
487-
fireEvent(button, 'interactionFinished', buttonEvent());
482+
fireEvent(button, 'buttonPressIn', buttonEvent());
483+
fireEvent(button, 'buttonPressOut', buttonEvent(false));
484+
fireEvent(button, 'buttonPressIn', buttonEvent());
485+
fireEvent(button, 'buttonPressOut', buttonEvent());
486+
fireEvent(button, 'buttonPress', buttonEvent());
487+
fireEvent(button, 'buttonInteractionFinished', buttonEvent());
488488

489489
// The whole interaction is swallowed - not just onPress, but the press-in/
490490
// out side effects too (incl. the re-entry as the finger moves).
@@ -564,9 +564,9 @@ describe('[API v3] Components', () => {
564564

565565
// A cancelled interaction ends without a Press event on the native side.
566566
const button = screen.getByTestId('touchable');
567-
fireEvent(button, 'pressIn', buttonEvent());
568-
fireEvent(button, 'pressOut', buttonEvent(false));
569-
fireEvent(button, 'interactionFinished', buttonEvent(false));
567+
fireEvent(button, 'buttonPressIn', buttonEvent());
568+
fireEvent(button, 'buttonPressOut', buttonEvent(false));
569+
fireEvent(button, 'buttonInteractionFinished', buttonEvent(false));
570570

571571
expect(pressFn).not.toHaveBeenCalled();
572572
});
@@ -596,10 +596,10 @@ describe('[API v3] Components', () => {
596596
expect(button.props.longPressDuration).toBe(DELAY);
597597

598598
// A long press ends without a Press event on the native side.
599-
fireEvent(button, 'pressIn', buttonEvent());
600-
fireEvent(button, 'longPress', buttonEvent());
601-
fireEvent(button, 'pressOut', buttonEvent());
602-
fireEvent(button, 'interactionFinished', buttonEvent());
599+
fireEvent(button, 'buttonPressIn', buttonEvent());
600+
fireEvent(button, 'buttonLongPress', buttonEvent());
601+
fireEvent(button, 'buttonPressOut', buttonEvent());
602+
fireEvent(button, 'buttonInteractionFinished', buttonEvent());
603603

604604
expect(longPressFn).toHaveBeenCalledTimes(1);
605605
expect(pressFn).not.toHaveBeenCalled();

‎packages/react-native-gesture-handler/src/__tests__/mocks.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ test('Trigger Touchable press', () => {
128128

129129
// The press state machine runs on the native side — the JS layer receives
130130
// the resulting press events directly from the button.
131-
fireEvent(screen.getByTestId('touchable'), 'press', {
131+
fireEvent(screen.getByTestId('touchable'), 'buttonPress', {
132132
nativeEvent: {
133133
pointerInside: true,
134134
x: 0,

‎packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,30 +44,36 @@ export interface ButtonProps extends ViewProps, AccessibilityProps {
4444
/**
4545
* Called when the button gets pressed.
4646
*/
47-
onPress?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
47+
onButtonPress?:
48+
| ((event: NativeSyntheticEvent<ButtonEvent>) => void)
49+
| undefined;
4850

4951
/**
5052
* Called when the pointer touches the button.
5153
*/
52-
onPressIn?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
54+
onButtonPressIn?:
55+
| ((event: NativeSyntheticEvent<ButtonEvent>) => void)
56+
| undefined;
5357

5458
/**
5559
* Called when the pointer is released or leaves the button.
5660
*/
57-
onPressOut?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
61+
onButtonPressOut?:
62+
| ((event: NativeSyntheticEvent<ButtonEvent>) => void)
63+
| undefined;
5864

5965
/**
6066
* Called when the button gets pressed and held past `longPressDuration`.
6167
*/
62-
onLongPress?:
68+
onButtonLongPress?:
6369
| ((event: NativeSyntheticEvent<ButtonEvent>) => void)
6470
| undefined;
6571

6672
/**
6773
* Called when the interaction with the button ends, after any terminal
68-
* `onPressOut`/`onPress` events, regardless of how it ended.
74+
* `onButtonPressOut`/`onButtonPress` events, regardless of how it ended.
6975
*/
70-
onInteractionFinished?:
76+
onButtonInteractionFinished?:
7177
| ((event: NativeSyntheticEvent<ButtonEvent>) => void)
7278
| undefined;
7379

‎packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ export type ButtonEvent = Readonly<{
1818

1919
// @ts-ignore - Redefining pointerEvents with WithDefault for codegen, conflicts with ViewProps type but codegen needs it
2020
interface NativeProps extends ViewProps {
21-
onPress?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
22-
onPressIn?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
23-
onPressOut?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
24-
onLongPress?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
25-
onInteractionFinished?:
21+
// The events are namespaced with `Button` because the base view config on iOS
22+
// already registers `topPress` as a bubbling event — a direct event with the
23+
// same top-level name would fail view config validation in dev.
24+
onButtonPress?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
25+
onButtonPressIn?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
26+
onButtonPressOut?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
27+
onButtonLongPress?: CodegenTypes.DirectEventHandler<ButtonEvent> | undefined;
28+
onButtonInteractionFinished?:
2629
| CodegenTypes.DirectEventHandler<ButtonEvent>
2730
| undefined;
2831

‎packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ export interface RawButtonProps
1313
// The native press events are omitted — the deprecated buttons drive
1414
// their press callbacks from the gesture in JS and redeclare them with
1515
// their own signatures.
16-
| 'onPress'
17-
| 'onPressIn'
18-
| 'onPressOut'
19-
| 'onLongPress'
20-
| 'onInteractionFinished'
16+
| 'onButtonPress'
17+
| 'onButtonPressIn'
18+
| 'onButtonPressOut'
19+
| 'onButtonLongPress'
20+
| 'onButtonInteractionFinished'
2121
| 'defaultOpacity'
2222
| 'defaultScale'
2323
| 'defaultUnderlayOpacity'

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,11 +190,11 @@ export const Touchable = (props: TouchableProps) => {
190190
underlayColor={underlayColor}
191191
longPressDuration={resolvedDelayLongPress}
192192
hasLongPressHandler={onLongPress !== undefined}
193-
onPress={internalOnPress}
194-
onPressIn={internalOnPressIn}
195-
onPressOut={internalOnPressOut}
196-
onLongPress={internalOnLongPress}
197-
onInteractionFinished={internalOnInteractionFinished}>
193+
onButtonPress={internalOnPress}
194+
onButtonPressIn={internalOnPressIn}
195+
onButtonPressOut={internalOnPressOut}
196+
onButtonLongPress={internalOnLongPress}
197+
onButtonInteractionFinished={internalOnInteractionFinished}>
198198
{children}
199199
</GestureHandlerButton>
200200
);

‎packages/react-native-gesture-handler/src/v3/components/Touchable/TouchableProps.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@ type PressableAndroidRippleConfig = {
2121
type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
2222

2323
// The press events are redeclared below with the unwrapped `ButtonEvent`
24-
// signature; `onInteractionFinished` is consumed internally by `Touchable`.
24+
// signature; `onButtonInteractionFinished` is consumed internally by
25+
// `Touchable`.
2526
type PressProps =
26-
| 'onPress'
27-
| 'onPressIn'
28-
| 'onPressOut'
29-
| 'onLongPress'
30-
| 'onInteractionFinished';
27+
| 'onButtonPress'
28+
| 'onButtonPressIn'
29+
| 'onButtonPressOut'
30+
| 'onButtonLongPress'
31+
| 'onButtonInteractionFinished';
3132

3233
type DurationProps =
3334
| 'tapAnimationInDuration'

0 commit comments

Comments
 (0)