Skip to content

Commit 1cceb8f

Browse files
j-piaseckifacebook-github-bot
j-piasecki
authored and
facebook-github-bot
committed
Align press and scroll events with OSS (#49424)
Summary: Pull Request resolved: #49424 Changelog: [Internal] Differential Revision: D69655561
1 parent 6357666 commit 1cceb8f

File tree

39 files changed

+559
-504
lines changed

39 files changed

+559
-504
lines changed

‎packages/debugger-frontend/dist/third-party/front_end/models/trace/types/types.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
import type {RefObject} from 'react';
1212
import type {HostInstance} from 'react-native';
13-
import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
13+
import type {NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
1414

1515
import PopupMenuAndroidNativeComponent, {
1616
Commands,
@@ -19,13 +19,13 @@ import nullthrows from 'nullthrows';
1919
import * as React from 'react';
2020
import {useCallback, useImperativeHandle, useRef} from 'react';
2121

22-
type PopupMenuSelectionEvent = SyntheticEvent<
22+
type PopupMenuSelectionEvent = NativeSyntheticEvent<
2323
$ReadOnly<{
2424
item: number,
2525
}>,
2626
>;
2727

28-
type PopupMenuDismissEvent = SyntheticEvent<$ReadOnly<{}>>;
28+
type PopupMenuDismissEvent = NativeSyntheticEvent<$ReadOnly<{}>>;
2929

3030
export type PopupMenuAndroidInstance = {
3131
+show: () => void,

‎packages/react-native/Libraries/Components/Button.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
'use strict';
1212

1313
import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
14-
import type {PressEvent} from '../Types/CoreEventTypes';
14+
import type {GestureResponderEvent} from '../Types/CoreEventTypes';
1515
import type {
1616
AccessibilityActionEvent,
1717
AccessibilityActionInfo,
@@ -36,9 +36,9 @@ type ButtonProps = $ReadOnly<{
3636

3737
/**
3838
Handler to be called when the user taps the button. The first function
39-
argument is an event in form of [PressEvent](pressevent).
39+
argument is an event in form of [GestureResponderEvent](pressevent).
4040
*/
41-
onPress: (event?: PressEvent) => mixed,
41+
onPress: (event?: GestureResponderEvent) => mixed,
4242

4343
/**
4444
If `true`, doesn't play system sound on touch.

‎packages/react-native/Libraries/Components/Pressable/Pressable.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import type {
1212
LayoutChangeEvent,
1313
MouseEvent,
14-
PressEvent,
14+
GestureResponderEvent,
1515
} from '../../Types/CoreEventTypes';
1616
import type {
1717
AccessibilityActionEvent,
@@ -141,22 +141,22 @@ type Props = $ReadOnly<{
141141
/**
142142
* Called when a long-tap gesture is detected.
143143
*/
144-
onLongPress?: ?(event: PressEvent) => mixed,
144+
onLongPress?: ?(event: GestureResponderEvent) => mixed,
145145

146146
/**
147147
* Called when a single tap gesture is detected.
148148
*/
149-
onPress?: ?(event: PressEvent) => mixed,
149+
onPress?: ?(event: GestureResponderEvent) => mixed,
150150

151151
/**
152152
* Called when a touch is engaged before `onPress`.
153153
*/
154-
onPressIn?: ?(event: PressEvent) => mixed,
154+
onPressIn?: ?(event: GestureResponderEvent) => mixed,
155155

156156
/**
157157
* Called when a touch is released before `onPress`.
158158
*/
159-
onPressOut?: ?(event: PressEvent) => mixed,
159+
onPressOut?: ?(event: GestureResponderEvent) => mixed,
160160

161161
/**
162162
* Either view styles or a function that receives a boolean reflecting whether
@@ -299,7 +299,7 @@ function Pressable(
299299
onHoverOut,
300300
onLongPress,
301301
onPress,
302-
onPressIn(event: PressEvent): void {
302+
onPressIn(event: GestureResponderEvent): void {
303303
if (android_rippleConfig != null) {
304304
android_rippleConfig.onPressIn(event);
305305
}
@@ -309,7 +309,7 @@ function Pressable(
309309
}
310310
},
311311
onPressMove: android_rippleConfig?.onPressMove,
312-
onPressOut(event: PressEvent): void {
312+
onPressOut(event: GestureResponderEvent): void {
313313
if (android_rippleConfig != null) {
314314
android_rippleConfig.onPressOut(event);
315315
}

‎packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*/
1010

1111
import type {ColorValue} from '../../StyleSheet/StyleSheet';
12-
import type {PressEvent} from '../../Types/CoreEventTypes';
12+
import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
1313

1414
import processColor from '../../StyleSheet/processColor';
1515
import Platform from '../../Utilities/Platform';
@@ -41,9 +41,9 @@ export default function useAndroidRippleForView(
4141
rippleConfig: ?RippleConfig,
4242
viewRef: {current: null | React.ElementRef<typeof View>},
4343
): ?$ReadOnly<{
44-
onPressIn: (event: PressEvent) => void,
45-
onPressMove: (event: PressEvent) => void,
46-
onPressOut: (event: PressEvent) => void,
44+
onPressIn: (event: GestureResponderEvent) => void,
45+
onPressMove: (event: GestureResponderEvent) => void,
46+
onPressOut: (event: GestureResponderEvent) => void,
4747
viewProps:
4848
| $ReadOnly<{nativeBackgroundAndroid: NativeBackgroundProp}>
4949
| $ReadOnly<{nativeForegroundAndroid: NativeBackgroundProp}>,
@@ -75,7 +75,7 @@ export default function useAndroidRippleForView(
7575
{nativeForegroundAndroid: nativeRippleValue}
7676
: // $FlowFixMe[incompatible-return]
7777
{nativeBackgroundAndroid: nativeRippleValue},
78-
onPressIn(event: PressEvent): void {
78+
onPressIn(event: GestureResponderEvent): void {
7979
const view = viewRef.current;
8080
if (view != null) {
8181
Commands.hotspotUpdate(
@@ -86,7 +86,7 @@ export default function useAndroidRippleForView(
8686
Commands.setPressed(view, true);
8787
}
8888
},
89-
onPressMove(event: PressEvent): void {
89+
onPressMove(event: GestureResponderEvent): void {
9090
const view = viewRef.current;
9191
if (view != null) {
9292
Commands.hotspotUpdate(
@@ -96,7 +96,7 @@ export default function useAndroidRippleForView(
9696
);
9797
}
9898
},
99-
onPressOut(event: PressEvent): void {
99+
onPressOut(event: GestureResponderEvent): void {
100100
const view = viewRef.current;
101101
if (view != null) {
102102
Commands.setPressed(view, false);

‎packages/react-native/Libraries/Components/ScrollView/ScrollView.js‎

Lines changed: 66 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
1515
import type {ColorValue} from '../../StyleSheet/StyleSheet';
1616
import type {
1717
LayoutChangeEvent,
18-
PressEvent,
18+
GestureResponderEvent,
1919
ScrollEvent,
2020
} from '../../Types/CoreEventTypes';
2121
import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
@@ -1322,7 +1322,9 @@ class ScrollView extends React.Component<Props, State> {
13221322
/**
13231323
* Invoke this from an `onResponderGrant` event.
13241324
*/
1325-
_handleResponderGrant: (e: PressEvent) => void = (e: PressEvent) => {
1325+
_handleResponderGrant: (e: GestureResponderEvent) => void = (
1326+
e: GestureResponderEvent,
1327+
) => {
13261328
this._observedScrollSinceBecomingResponder = false;
13271329
this.props.onResponderGrant && this.props.onResponderGrant(e);
13281330
this._becameResponderWhileAnimating = this._isAnimating();
@@ -1343,7 +1345,9 @@ class ScrollView extends React.Component<Props, State> {
13431345
/**
13441346
* Invoke this from an `onResponderRelease` event.
13451347
*/
1346-
_handleResponderRelease: (e: PressEvent) => void = (e: PressEvent) => {
1348+
_handleResponderRelease: (e: GestureResponderEvent) => void = (
1349+
e: GestureResponderEvent,
1350+
) => {
13471351
this._isTouching = e.nativeEvent.touches.length !== 0;
13481352
this.props.onResponderRelease && this.props.onResponderRelease(e);
13491353

@@ -1428,8 +1432,8 @@ class ScrollView extends React.Component<Props, State> {
14281432
* true.
14291433
*
14301434
*/
1431-
_handleStartShouldSetResponder: (e: PressEvent) => boolean = (
1432-
e: PressEvent,
1435+
_handleStartShouldSetResponder: (e: GestureResponderEvent) => boolean = (
1436+
e: GestureResponderEvent,
14331437
) => {
14341438
// Allow any event touch pass through if the default pan responder is disabled
14351439
if (this.props.disableScrollViewPanResponder === true) {
@@ -1458,55 +1462,54 @@ class ScrollView extends React.Component<Props, State> {
14581462
*
14591463
* Invoke this from an `onStartShouldSetResponderCapture` event.
14601464
*/
1461-
_handleStartShouldSetResponderCapture: (e: PressEvent) => boolean = (
1462-
e: PressEvent,
1463-
) => {
1464-
// The scroll view should receive taps instead of its descendants if:
1465-
// * it is already animating/decelerating
1466-
if (this._isAnimating()) {
1467-
return true;
1468-
}
1465+
_handleStartShouldSetResponderCapture: (e: GestureResponderEvent) => boolean =
1466+
(e: GestureResponderEvent) => {
1467+
// The scroll view should receive taps instead of its descendants if:
1468+
// * it is already animating/decelerating
1469+
if (this._isAnimating()) {
1470+
return true;
1471+
}
14691472

1470-
// Allow any event touch pass through if the default pan responder is disabled
1471-
if (this.props.disableScrollViewPanResponder === true) {
1472-
return false;
1473-
}
1473+
// Allow any event touch pass through if the default pan responder is disabled
1474+
if (this.props.disableScrollViewPanResponder === true) {
1475+
return false;
1476+
}
14741477

1475-
// * the keyboard is up, keyboardShouldPersistTaps is 'never' (the default),
1476-
// and a new touch starts with a non-textinput target (in which case the
1477-
// first tap should be sent to the scroll view and dismiss the keyboard,
1478-
// then the second tap goes to the actual interior view)
1479-
const {keyboardShouldPersistTaps} = this.props;
1480-
const keyboardNeverPersistTaps =
1481-
!keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
1478+
// * the keyboard is up, keyboardShouldPersistTaps is 'never' (the default),
1479+
// and a new touch starts with a non-textinput target (in which case the
1480+
// first tap should be sent to the scroll view and dismiss the keyboard,
1481+
// then the second tap goes to the actual interior view)
1482+
const {keyboardShouldPersistTaps} = this.props;
1483+
const keyboardNeverPersistTaps =
1484+
!keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
1485+
1486+
if (typeof e.target === 'number') {
1487+
if (__DEV__) {
1488+
console.error(
1489+
'Did not expect event target to be a number. Should have been a native component',
1490+
);
1491+
}
14821492

1483-
if (typeof e.target === 'number') {
1484-
if (__DEV__) {
1485-
console.error(
1486-
'Did not expect event target to be a number. Should have been a native component',
1487-
);
1493+
return false;
14881494
}
14891495

1490-
return false;
1491-
}
1492-
1493-
// Let presses through if the soft keyboard is detached from the viewport
1494-
if (this._softKeyboardIsDetached()) {
1495-
return false;
1496-
}
1496+
// Let presses through if the soft keyboard is detached from the viewport
1497+
if (this._softKeyboardIsDetached()) {
1498+
return false;
1499+
}
14971500

1498-
if (
1499-
keyboardNeverPersistTaps &&
1500-
this._keyboardIsDismissible() &&
1501-
e.target != null &&
1502-
// $FlowFixMe[incompatible-call]
1503-
!TextInputState.isTextInput(e.target)
1504-
) {
1505-
return true;
1506-
}
1501+
if (
1502+
keyboardNeverPersistTaps &&
1503+
this._keyboardIsDismissible() &&
1504+
e.target != null &&
1505+
// $FlowFixMe[incompatible-call]
1506+
!TextInputState.isTextInput(e.target)
1507+
) {
1508+
return true;
1509+
}
15071510

1508-
return false;
1509-
};
1511+
return false;
1512+
};
15101513

15111514
/**
15121515
* Do we consider there to be a dismissible soft-keyboard open?
@@ -1550,9 +1553,11 @@ class ScrollView extends React.Component<Props, State> {
15501553
/**
15511554
* Invoke this from an `onTouchEnd` event.
15521555
*
1553-
* @param {PressEvent} e Event.
1556+
* @param {GestureResponderEvent} e Event.
15541557
*/
1555-
_handleTouchEnd: (e: PressEvent) => void = (e: PressEvent) => {
1558+
_handleTouchEnd: (e: GestureResponderEvent) => void = (
1559+
e: GestureResponderEvent,
1560+
) => {
15561561
const nativeEvent = e.nativeEvent;
15571562
this._isTouching = nativeEvent.touches.length !== 0;
15581563

@@ -1580,9 +1585,11 @@ class ScrollView extends React.Component<Props, State> {
15801585
/**
15811586
* Invoke this from an `onTouchCancel` event.
15821587
*
1583-
* @param {PressEvent} e Event.
1588+
* @param {GestureResponderEvent} e Event.
15841589
*/
1585-
_handleTouchCancel: (e: PressEvent) => void = (e: PressEvent) => {
1590+
_handleTouchCancel: (e: GestureResponderEvent) => void = (
1591+
e: GestureResponderEvent,
1592+
) => {
15861593
this._isTouching = false;
15871594
this.props.onTouchCancel && this.props.onTouchCancel(e);
15881595
};
@@ -1596,9 +1603,11 @@ class ScrollView extends React.Component<Props, State> {
15961603
* responder). The `onResponderReject` won't fire in that case - it only
15971604
* fires when a *current* responder rejects our request.
15981605
*
1599-
* @param {PressEvent} e Touch Start event.
1606+
* @param {GestureResponderEvent} e Touch Start event.
16001607
*/
1601-
_handleTouchStart: (e: PressEvent) => void = (e: PressEvent) => {
1608+
_handleTouchStart: (e: GestureResponderEvent) => void = (
1609+
e: GestureResponderEvent,
1610+
) => {
16021611
this._isTouching = true;
16031612
this.props.onTouchStart && this.props.onTouchStart(e);
16041613
};
@@ -1612,9 +1621,11 @@ class ScrollView extends React.Component<Props, State> {
16121621
* responder). The `onResponderReject` won't fire in that case - it only
16131622
* fires when a *current* responder rejects our request.
16141623
*
1615-
* @param {PressEvent} e Touch Start event.
1624+
* @param {GestureResponderEvent} e Touch Start event.
16161625
*/
1617-
_handleTouchMove: (e: PressEvent) => void = (e: PressEvent) => {
1626+
_handleTouchMove: (e: GestureResponderEvent) => void = (
1627+
e: GestureResponderEvent,
1628+
) => {
16181629
this.props.onTouchMove && this.props.onTouchMove(e);
16191630
};
16201631

‎packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
1414
import type {PointProp} from '../../StyleSheet/PointPropType';
1515
import type {ColorValue} from '../../StyleSheet/StyleSheet';
16-
import type {PressEvent, ScrollEvent} from '../../Types/CoreEventTypes';
16+
import type {
17+
GestureResponderEvent,
18+
ScrollEvent,
19+
} from '../../Types/CoreEventTypes';
1720
import type {ViewProps} from '../View/ViewPropTypes';
1821

1922
export type ScrollViewNativeProps = $ReadOnly<{
@@ -76,6 +79,6 @@ export type ScrollViewNativeProps = $ReadOnly<{
7679
snapToStart?: ?boolean,
7780
zoomScale?: ?number,
7881
// Overrides
79-
onResponderGrant?: ?(e: PressEvent) => void | boolean,
82+
onResponderGrant?: ?(e: GestureResponderEvent) => void | boolean,
8083
...
8184
}>;

‎packages/react-native/Libraries/Components/Switch/Switch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*/
1010

1111
import type {ColorValue} from '../../StyleSheet/StyleSheet';
12-
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
12+
import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
1313
import type {ViewProps} from '../View/ViewPropTypes';
1414

1515
import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -23,7 +23,7 @@ import SwitchNativeComponent, {
2323
} from './SwitchNativeComponent';
2424
import * as React from 'react';
2525

26-
type SwitchChangeEvent = SyntheticEvent<
26+
type SwitchChangeEvent = NativeSyntheticEvent<
2727
$ReadOnly<{
2828
value: boolean,
2929
target: number,

0 commit comments

Comments
 (0)