Align press and scroll events with OSS

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

@@ -10,7 +10,7 @@
 
 import type {RefObject} from 'react';
 import type {HostInstance} from 'react-native';
-import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+import type {NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 import PopupMenuAndroidNativeComponent, {
   Commands,
@@ -19,13 +19,13 @@ import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {useCallback, useImperativeHandle, useRef} from 'react';
 
-type PopupMenuSelectionEvent = SyntheticEvent<
+type PopupMenuSelectionEvent = NativeSyntheticEvent<
   $ReadOnly<{
     item: number,
   }>,
 >;
 
-type PopupMenuDismissEvent = SyntheticEvent<$ReadOnly<{}>>;
+type PopupMenuDismissEvent = NativeSyntheticEvent<$ReadOnly<{}>>;
 
 export type PopupMenuAndroidInstance = {
   +show: () => void,

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

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -36,9 +36,9 @@ type ButtonProps = $ReadOnly<{
 
   /**
     Handler to be called when the user taps the button. The first function
-    argument is an event in form of [PressEvent](pressevent).
+    argument is an event in form of [GestureResponderEvent](pressevent).
    */
-  onPress: (event?: PressEvent) => mixed,
+  onPress: (event?: GestureResponderEvent) => mixed,
 
   /**
     If `true`, doesn't play system sound on touch.

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

@@ -8,10 +8,10 @@
  * @format
  */
 
 import type {
   LayoutChangeEvent,
   MouseEvent,
-  PressEvent,
+  GestureResponderEvent,
 } from '../../Types/CoreEventTypes';
 import type {
   AccessibilityActionEvent,
@@ -141,22 +141,22 @@
   /**
    * Called when a long-tap gesture is detected.
    */
-  onLongPress?: ?(event: PressEvent) => mixed,
+  onLongPress?: ?(event: GestureResponderEvent) => mixed,
 
   /**
    * Called when a single tap gesture is detected.
    */
-  onPress?: ?(event: PressEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => mixed,
 
   /**
    * Called when a touch is engaged before `onPress`.
    */
-  onPressIn?: ?(event: PressEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => mixed,
 
   /**
    * Called when a touch is released before `onPress`.
    */
-  onPressOut?: ?(event: PressEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => mixed,
 
   /**
    * Either view styles or a function that receives a boolean reflecting whether
@@ -299,7 +299,7 @@
       onHoverOut,
       onLongPress,
       onPress,
-      onPressIn(event: PressEvent): void {
+      onPressIn(event: GestureResponderEvent): void {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressIn(event);
         }
@@ -309,7 +309,7 @@
         }
       },
       onPressMove: android_rippleConfig?.onPressMove,
-      onPressOut(event: PressEvent): void {
+      onPressOut(event: GestureResponderEvent): void {
         if (android_rippleConfig != null) {
           android_rippleConfig.onPressOut(event);
         }

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

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import processColor from '../../StyleSheet/processColor';
 import Platform from '../../Utilities/Platform';
@@ -41,9 +41,9 @@ export default function useAndroidRippleForView(
   rippleConfig: ?RippleConfig,
   viewRef: {current: null | React.ElementRef<typeof View>},
 ): ?$ReadOnly<{
-  onPressIn: (event: PressEvent) => void,
-  onPressMove: (event: PressEvent) => void,
-  onPressOut: (event: PressEvent) => void,
+  onPressIn: (event: GestureResponderEvent) => void,
+  onPressMove: (event: GestureResponderEvent) => void,
+  onPressOut: (event: GestureResponderEvent) => void,
   viewProps:
     | $ReadOnly<{nativeBackgroundAndroid: NativeBackgroundProp}>
     | $ReadOnly<{nativeForegroundAndroid: NativeBackgroundProp}>,
@@ -75,7 +75,7 @@ export default function useAndroidRippleForView(
               {nativeForegroundAndroid: nativeRippleValue}
             : // $FlowFixMe[incompatible-return]
               {nativeBackgroundAndroid: nativeRippleValue},
-        onPressIn(event: PressEvent): void {
+        onPressIn(event: GestureResponderEvent): void {
           const view = viewRef.current;
           if (view != null) {
             Commands.hotspotUpdate(
@@ -86,7 +86,7 @@ export default function useAndroidRippleForView(
             Commands.setPressed(view, true);
           }
         },
-        onPressMove(event: PressEvent): void {
+        onPressMove(event: GestureResponderEvent): void {
           const view = viewRef.current;
           if (view != null) {
             Commands.hotspotUpdate(
@@ -96,7 +96,7 @@ export default function useAndroidRippleForView(
             );
           }
         },
-        onPressOut(event: PressEvent): void {
+        onPressOut(event: GestureResponderEvent): void {
           const view = viewRef.current;
           if (view != null) {
             Commands.setPressed(view, false);

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

@@ -15,7 +15,7 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
   LayoutChangeEvent,
-  PressEvent,
+  GestureResponderEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
@@ -1322,7 +1322,9 @@ class ScrollView extends React.Component<Props, State> {
   /**
    * Invoke this from an `onResponderGrant` event.
    */
-  _handleResponderGrant: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleResponderGrant: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     this._observedScrollSinceBecomingResponder = false;
     this.props.onResponderGrant && this.props.onResponderGrant(e);
     this._becameResponderWhileAnimating = this._isAnimating();
@@ -1343,7 +1345,9 @@ class ScrollView extends React.Component<Props, State> {
   /**
    * Invoke this from an `onResponderRelease` event.
    */
-  _handleResponderRelease: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleResponderRelease: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     this._isTouching = e.nativeEvent.touches.length !== 0;
     this.props.onResponderRelease && this.props.onResponderRelease(e);
 
@@ -1428,8 +1432,8 @@ class ScrollView extends React.Component<Props, State> {
    *   true.
    *
    */
-  _handleStartShouldSetResponder: (e: PressEvent) => boolean = (
-    e: PressEvent,
+  _handleStartShouldSetResponder: (e: GestureResponderEvent) => boolean = (
+    e: GestureResponderEvent,
   ) => {
     // Allow any event touch pass through if the default pan responder is disabled
     if (this.props.disableScrollViewPanResponder === true) {
@@ -1458,55 +1462,54 @@ class ScrollView extends React.Component<Props, State> {
    *
    * Invoke this from an `onStartShouldSetResponderCapture` event.
    */
-  _handleStartShouldSetResponderCapture: (e: PressEvent) => boolean = (
-    e: PressEvent,
-  ) => {
-    // The scroll view should receive taps instead of its descendants if:
-    // * it is already animating/decelerating
-    if (this._isAnimating()) {
-      return true;
-    }
+  _handleStartShouldSetResponderCapture: (e: GestureResponderEvent) => boolean =
+    (e: GestureResponderEvent) => {
+      // The scroll view should receive taps instead of its descendants if:
+      // * it is already animating/decelerating
+      if (this._isAnimating()) {
+        return true;
+      }
 
-    // Allow any event touch pass through if the default pan responder is disabled
-    if (this.props.disableScrollViewPanResponder === true) {
-      return false;
-    }
+      // Allow any event touch pass through if the default pan responder is disabled
+      if (this.props.disableScrollViewPanResponder === true) {
+        return false;
+      }
 
-    // * the keyboard is up, keyboardShouldPersistTaps is 'never' (the default),
-    // and a new touch starts with a non-textinput target (in which case the
-    // first tap should be sent to the scroll view and dismiss the keyboard,
-    // then the second tap goes to the actual interior view)
-    const {keyboardShouldPersistTaps} = this.props;
-    const keyboardNeverPersistTaps =
-      !keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
+      // * the keyboard is up, keyboardShouldPersistTaps is 'never' (the default),
+      // and a new touch starts with a non-textinput target (in which case the
+      // first tap should be sent to the scroll view and dismiss the keyboard,
+      // then the second tap goes to the actual interior view)
+      const {keyboardShouldPersistTaps} = this.props;
+      const keyboardNeverPersistTaps =
+        !keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
+
+      if (typeof e.target === 'number') {
+        if (__DEV__) {
+          console.error(
+            'Did not expect event target to be a number. Should have been a native component',
+          );
+        }
 
-    if (typeof e.target === 'number') {
-      if (__DEV__) {
-        console.error(
-          'Did not expect event target to be a number. Should have been a native component',
-        );
+        return false;
       }
 
-      return false;
-    }
-
-    // Let presses through if the soft keyboard is detached from the viewport
-    if (this._softKeyboardIsDetached()) {
-      return false;
-    }
+      // Let presses through if the soft keyboard is detached from the viewport
+      if (this._softKeyboardIsDetached()) {
+        return false;
+      }
 
-    if (
-      keyboardNeverPersistTaps &&
-      this._keyboardIsDismissible() &&
-      e.target != null &&
-      // $FlowFixMe[incompatible-call]
-      !TextInputState.isTextInput(e.target)
-    ) {
-      return true;
-    }
+      if (
+        keyboardNeverPersistTaps &&
+        this._keyboardIsDismissible() &&
+        e.target != null &&
+        // $FlowFixMe[incompatible-call]
+        !TextInputState.isTextInput(e.target)
+      ) {
+        return true;
+      }
 
-    return false;
-  };
+      return false;
+    };
 
   /**
    * Do we consider there to be a dismissible soft-keyboard open?
@@ -1550,9 +1553,11 @@ class ScrollView extends React.Component<Props, State> {
   /**
    * Invoke this from an `onTouchEnd` event.
    *
-   * @param {PressEvent} e Event.
+   * @param {GestureResponderEvent} e Event.
    */
-  _handleTouchEnd: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleTouchEnd: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     const nativeEvent = e.nativeEvent;
     this._isTouching = nativeEvent.touches.length !== 0;
 
@@ -1580,9 +1585,11 @@ class ScrollView extends React.Component<Props, State> {
   /**
    * Invoke this from an `onTouchCancel` event.
    *
-   * @param {PressEvent} e Event.
+   * @param {GestureResponderEvent} e Event.
    */
-  _handleTouchCancel: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleTouchCancel: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     this._isTouching = false;
     this.props.onTouchCancel && this.props.onTouchCancel(e);
   };
@@ -1596,9 +1603,11 @@ class ScrollView extends React.Component<Props, State> {
    * responder). The `onResponderReject` won't fire in that case - it only
    * fires when a *current* responder rejects our request.
    *
-   * @param {PressEvent} e Touch Start event.
+   * @param {GestureResponderEvent} e Touch Start event.
    */
-  _handleTouchStart: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleTouchStart: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     this._isTouching = true;
     this.props.onTouchStart && this.props.onTouchStart(e);
   };
@@ -1612,9 +1621,11 @@ class ScrollView extends React.Component<Props, State> {
    * responder). The `onResponderReject` won't fire in that case - it only
    * fires when a *current* responder rejects our request.
    *
-   * @param {PressEvent} e Touch Start event.
+   * @param {GestureResponderEvent} e Touch Start event.
    */
-  _handleTouchMove: (e: PressEvent) => void = (e: PressEvent) => {
+  _handleTouchMove: (e: GestureResponderEvent) => void = (
+    e: GestureResponderEvent,
+  ) => {
     this.props.onTouchMove && this.props.onTouchMove(e);
   };
 

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

@@ -13,7 +13,10 @@
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {PressEvent, ScrollEvent} from '../../Types/CoreEventTypes';
+import type {
+  GestureResponderEvent,
+  ScrollEvent,
+} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 export type ScrollViewNativeProps = $ReadOnly<{
@@ -76,6 +79,6 @@ export type ScrollViewNativeProps = $ReadOnly<{
   snapToStart?: ?boolean,
   zoomScale?: ?number,
   // Overrides
-  onResponderGrant?: ?(e: PressEvent) => void | boolean,
+  onResponderGrant?: ?(e: GestureResponderEvent) => void | boolean,
   ...
 }>;

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

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -23,7 +23,7 @@ import SwitchNativeComponent, {
 } from './SwitchNativeComponent';
 import * as React from 'react';
 
-type SwitchChangeEvent = SyntheticEvent<
+type SwitchChangeEvent = NativeSyntheticEvent<
   $ReadOnly<{
     value: boolean,
     target: number,