refactor TouchableOpacity forwarding event on onPress and onLongPress (#2462)

* refactor TouchableOpacity forwarding event on onPress and onLongPress

* improve typing

* formatting + edit API

---------

Co-authored-by: Lidor Dafna <lidord@wix.com>

Author: AmitShwarts

src/components/touchableOpacity/index.tsx

@@ -1,6 +1,10 @@
 import _ from 'lodash';
-import React, {BaseSyntheticEvent, PureComponent} from 'react';
-import {TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps as RNTouchableOpacityProps} from 'react-native';
+import React, {PureComponent} from 'react';
+import {
+  GestureResponderEvent,
+  TouchableOpacity as RNTouchableOpacity,
+  TouchableOpacityProps as RNTouchableOpacityProps
+} from 'react-native';
 import {
   asBaseComponent,
   forwardRef,
@@ -43,10 +47,16 @@ export interface TouchableOpacityProps
    */
   customValue?: any;
   style?: ViewProps['style'];
-  onPress?: (props?: TouchableOpacityProps | any) => void;
-  onPressIn?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressIn'];
-  onPressOut?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressOut'];
-  onLongPress?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onLongPress'];
+  onPress?: (props?: (TouchableOpacityProps & {event: GestureResponderEvent}) | any) => void;
+  onPressIn?: (
+    props?: TouchableOpacityProps | GestureResponderEvent | any
+  ) => void | RNTouchableOpacityProps['onPressIn'];
+  onPressOut?: (
+    props?: TouchableOpacityProps | GestureResponderEvent | any
+  ) => void | RNTouchableOpacityProps['onPressOut'];
+  onLongPress?: (
+    props?: (TouchableOpacityProps & {event: GestureResponderEvent}) | any
+  ) => void | RNTouchableOpacityProps['onLongPress'];
 }
 
 type Props = BaseComponentInjectedProps & ForwardRefInjectedProps & TouchableOpacityProps;
@@ -155,12 +165,12 @@ class TouchableOpacity extends PureComponent<Props, {active: boolean}> {
     );
   }
 
-  onPress(event: BaseSyntheticEvent) {
-    this.props.onPress?.({...this.props, ...event});
+  onPress(event: GestureResponderEvent) {
+    this.props.onPress?.({...this.props, event});
   }
 
-  onLongPress = (event: BaseSyntheticEvent) => {
-    this.props.onLongPress?.({...this.props, ...event});
+  onLongPress = (event: GestureResponderEvent) => {
+    this.props.onLongPress?.({...this.props, event});
   };
 }
 

src/components/touchableOpacity/touchableOpacity.api.json

@@ -27,7 +27,7 @@
       "description": "Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback"
     },
     {"name": "style", "type": "ViewStyle", "description": "Custom style"},
-    {"name": "onPress", "type": "(props) => void", "description": "On press callback"}
+    {"name": "onPress", "type": "(props?: TouchableOpacityProps & {event: GestureResponderEvent} | any) => void", "description": "On press callback"}
   ],
   "snippet": [
     "<TouchableOpacity onPress={() => console.log('pressed')$1}/>"