Flow ViewPropTypes (#22504)

Summary:
Related to #22100

Enhance ViewPropTypes flow types.
- I had some troubles with a TODO left for `onResponderGrant` hence the return type.
- I wasn't able to properly type `nativeBackgroundAndroid` and `nativeForegroundAndroid` at the moment.
Pull Request resolved: https://github.com/facebook/react-native/pull/22504

Reviewed By: cpojer

Differential Revision: D13334024

Pulled By: TheSavior

fbshipit-source-id: cada236e0d716ae78cb663172e5315cf11c6406a

Libraries/Components/View/ViewPropTypes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {Layout, LayoutEvent} from 'CoreEventTypes';
+import type {PressEvent, Layout, LayoutEvent} from 'CoreEventTypes';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type React from 'React';
 import type {ViewStyleProp} from 'StyleSheet';
@@ -32,7 +32,7 @@ type DirectEventProps = $ReadOnly<{|
    *
    * @platform ios
    */
-  onAccessibilityAction?: ?Function,
+  onAccessibilityAction?: ?(string) => void,
 
   /**
    * When `accessible` is true, the system will try to invoke this function
@@ -40,7 +40,7 @@ type DirectEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onaccessibilitytap
    */
-  onAccessibilityTap?: ?Function,
+  onAccessibilityTap?: ?() => void,
 
   /**
    * Invoked on mount and layout changes with:
@@ -61,18 +61,18 @@ type DirectEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onmagictap
    */
-  onMagicTap?: ?Function,
+  onMagicTap?: ?() => void,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|
-  onTouchCancel?: ?Function,
-  onTouchCancelCapture?: ?Function,
-  onTouchEnd?: ?Function,
-  onTouchEndCapture?: ?Function,
-  onTouchMove?: ?Function,
-  onTouchMoveCapture?: ?Function,
-  onTouchStart?: ?Function,
-  onTouchStartCapture?: ?Function,
+  onTouchCancel?: ?(e: PressEvent) => void,
+  onTouchCancelCapture?: ?(e: PressEvent) => void,
+  onTouchEnd?: ?(e: PressEvent) => void,
+  onTouchEndCapture?: ?(e: PressEvent) => void,
+  onTouchMove?: ?(e: PressEvent) => void,
+  onTouchMoveCapture?: ?(e: PressEvent) => void,
+  onTouchStart?: ?(e: PressEvent) => void,
+  onTouchStartCapture?: ?(e: PressEvent) => void,
 |}>;
 
 /**
@@ -90,7 +90,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onmoveshouldsetresponder
    */
-  onMoveShouldSetResponder?: ?Function,
+  onMoveShouldSetResponder?: ?(e: PressEvent) => boolean,
 
   /**
    * If a parent `View` wants to prevent a child `View` from becoming responder
@@ -101,7 +101,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onMoveShouldsetrespondercapture
    */
-  onMoveShouldSetResponderCapture?: ?Function,
+  onMoveShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
 
   /**
    * The View is now responding for touch events. This is the time to highlight
@@ -110,9 +110,12 @@ type GestureResponderEventProps = $ReadOnly<{|
    * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic
    * touch event as described above.
    *
+   * PanResponder includes a note `// TODO: t7467124 investigate if this can be removed` that
+   * should help fixing this return type.
+   *
    * See http://facebook.github.io/react-native/docs/view.html#onrespondergrant
    */
-  onResponderGrant?: ?Function,
+  onResponderGrant?: ?(e: PressEvent) => void | boolean,
 
   /**
    * The user is moving their finger.
@@ -122,7 +125,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onrespondermove
    */
-  onResponderMove?: ?Function,
+  onResponderMove?: ?(e: PressEvent) => void,
 
   /**
    * Another responder is already active and will not release it to that `View`
@@ -133,7 +136,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onresponderreject
    */
-  onResponderReject?: ?Function,
+  onResponderReject?: ?(e: PressEvent) => void,
 
   /**
    * Fired at the end of the touch.
@@ -143,10 +146,10 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onresponderrelease
    */
-  onResponderRelease?: ?Function,
+  onResponderRelease?: ?(e: PressEvent) => void,
 
-  onResponderStart?: ?Function,
-  onResponderEnd?: ?Function,
+  onResponderStart?: ?(e: PressEvent) => void,
+  onResponderEnd?: ?(e: PressEvent) => void,
 
   /**
    * The responder has been taken from the `View`. Might be taken by other
@@ -159,7 +162,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onresponderterminate
    */
-  onResponderTerminate?: ?Function,
+  onResponderTerminate?: ?(e: PressEvent) => void,
 
   /**
    * Some other `View` wants to become responder and is asking this `View` to
@@ -170,7 +173,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onresponderterminationrequest
    */
-  onResponderTerminationRequest?: ?Function,
+  onResponderTerminationRequest?: ?(e: PressEvent) => boolean,
 
   /**
    * Does this view want to become responder on the start of a touch?
@@ -180,7 +183,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetresponder
    */
-  onStartShouldSetResponder?: ?Function,
+  onStartShouldSetResponder?: ?(e: PressEvent) => boolean,
 
   /**
    * If a parent `View` wants to prevent a child `View` from becoming responder
@@ -191,7 +194,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetrespondercapture
    */
-  onStartShouldSetResponderCapture?: ?Function,
+  onStartShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
 |}>;
 
 type AndroidViewProps = $ReadOnly<{|

Libraries/Inspector/InspectorOverlay.js

@@ -17,12 +17,9 @@ const StyleSheet = require('StyleSheet');
 const UIManager = require('UIManager');
 const View = require('View');
 
+import type {PressEvent} from 'CoreEventTypes';
 import type {ViewStyleProp} from 'StyleSheet';
 
-type EventLike = {
-  nativeEvent: Object,
-};
-
 type Inspected = $ReadOnly<{|
   frame?: Object,
   style?: ViewStyleProp,
@@ -35,7 +32,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 class InspectorOverlay extends React.Component<Props> {
-  findViewForTouchEvent = (e: EventLike) => {
+  findViewForTouchEvent = (e: PressEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
     UIManager.findSubviewIn(
       this.props.inspectedViewTag,
@@ -50,7 +47,7 @@ class InspectorOverlay extends React.Component<Props> {
     );
   };
 
-  shouldSetResponser = (e: EventLike): boolean => {
+  shouldSetResponser = (e: PressEvent): boolean => {
     this.findViewForTouchEvent(e);
     return true;
   };