Flow TouchableWithoutFeedback (#22479)

Summary:
Related to #22100

Enhance TouchableWithoutFeedback with press and target event types.
There are still work to do to update `UNSAFE_componentWillReceiveProps` and `touchableGetHitSlop` to make Flow not complain about `DeprecatedEdgeInsetsPropType` inexact type.
Pull Request resolved: https://github.com/facebook/react-native/pull/22479

Reviewed By: RSNara

Differential Revision: D13310764

Pulled By: TheSavior

fbshipit-source-id: 9002e542378491fb800c8e81c63f4fbe125b563c

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -26,7 +26,7 @@ const {
   DeprecatedAccessibilityTraits,
 } = require('DeprecatedViewAccessibility');
 
-import type {PressEvent} from 'CoreEventTypes';
+import type {SyntheticEvent, LayoutEvent, PressEvent} from 'CoreEventTypes';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type {
   AccessibilityComponentType,
@@ -35,17 +35,21 @@ import type {
   AccessibilityTraits,
 } from 'ViewAccessibility';
 
+type TargetEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+type BlurEvent = TargetEvent;
+type FocusEvent = TargetEvent;
+
 const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
 export type Props = $ReadOnly<{|
   accessible?: ?boolean,
   accessibilityComponentType?: ?AccessibilityComponentType,
-  accessibilityLabel?:
-    | null
-    | React$PropType$Primitive<any>
-    | string
-    | Array<any>
-    | any,
+  accessibilityLabel?: ?Stringish,
   accessibilityHint?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityRole?: ?AccessibilityRole,
@@ -58,13 +62,13 @@ export type Props = $ReadOnly<{|
   disabled?: ?boolean,
   hitSlop?: ?EdgeInsetsProp,
   nativeID?: ?string,
-  onBlur?: ?Function,
-  onFocus?: ?Function,
-  onLayout?: ?Function,
-  onLongPress?: ?Function,
-  onPress?: ?Function,
-  onPressIn?: ?Function,
-  onPressOut?: ?Function,
+  onBlur?: ?(e: BlurEvent) => void,
+  onFocus?: ?(e: FocusEvent) => void,
+  onLayout?: ?(event: LayoutEvent) => mixed,
+  onLongPress?: ?(event: PressEvent) => mixed,
+  onPress?: ?(event: PressEvent) => mixed,
+  onPressIn?: ?(event: PressEvent) => mixed,
+  onPressOut?: ?(event: PressEvent) => mixed,
   pressRetentionOffset?: ?EdgeInsetsProp,
   rejectResponderTermination?: ?boolean,
   testID?: ?string,

RNTester/js/RTLExample.js

@@ -526,18 +526,18 @@ class RTLExample extends React.Component<any, State> {
     );
   };
 
-  _linearTap = (refName: string, e: Object) => {
+  _linearTap = (e: Object) => {
     this.setState({
       toggleStatus: {
         ...this.state.toggleStatus,
-        [refName]: !this.state.toggleStatus[refName],
+        [e]: !this.state.toggleStatus[e],
       },
     });
     const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
     const toMaxDistance =
       (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
     Animated.timing(this.state.linear, {
-      toValue: this.state.toggleStatus[refName] ? toMaxDistance : 0,
+      toValue: this.state.toggleStatus[e] ? toMaxDistance : 0,
       duration: 2000,
       useNativeDriver: true,
     }).start();