Align InteractionManager and PanResponder types with OSS (#49517)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49517

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69742877

fbshipit-source-id: ccd99b29aed4ec4ef8c0b7b2a57763f716be411e

packages/react-native/Libraries/Interaction/InteractionManager.js

@@ -12,12 +12,15 @@ import type {Task} from './TaskQueue';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge').default;
 const infoLog = require('../Utilities/infoLog').default;
 const TaskQueue = require('./TaskQueue').default;
 const invariant = require('invariant');
 
+export type {Task, SimpleTask, PromiseTask} from './TaskQueue';
+
 export type Handle = number;
 
 const _emitter = new EventEmitter<{
@@ -140,7 +143,12 @@ const InteractionManagerImpl = {
 
   // $FlowFixMe[unclear-type] unclear type of _emitter
   // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-  addListener: _emitter.addListener.bind(_emitter) as Function,
+  addListener: _emitter.addListener.bind(_emitter) as (
+    eventType: string,
+    // $FlowFixMe[unclear-type] unclear type of arguments
+    listener: (...args: any) => mixed,
+    context: mixed,
+  ) => EventSubscription,
 
   /**
    * A positive number will use setTimeout to schedule any tasks after the

packages/react-native/Libraries/Interaction/PanResponder.js

@@ -124,7 +124,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
  */
 
-export type GestureState = {
+export type PanResponderGestureState = {
   /**
    * ID of the gestureState - persisted as long as there at least one touch on screen
    */
@@ -185,15 +185,15 @@ export type GestureState = {
 
 type ActiveCallback = (
   event: GestureResponderEvent,
-  gestureState: GestureState,
+  gestureState: PanResponderGestureState,
 ) => boolean;
 
 type PassiveCallback = (
   event: GestureResponderEvent,
-  gestureState: GestureState,
+  gestureState: PanResponderGestureState,
 ) => mixed;
 
-export type PanHandlers = {
+export type GestureResponderHandlers = {
   onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
   onResponderEnd: (event: GestureResponderEvent) => void,
@@ -208,7 +208,7 @@ export type PanHandlers = {
   onStartShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
 };
 
-type PanResponderConfig = $ReadOnly<{
+export type PanResponderCallbacks = $ReadOnly<{
   onMoveShouldSetPanResponder?: ?ActiveCallback,
   onMoveShouldSetPanResponderCapture?: ?ActiveCallback,
   onStartShouldSetPanResponder?: ?ActiveCallback,
@@ -293,7 +293,7 @@ const PanResponder = {
    * - vx/vy: Velocity.
    */
 
-  _initializeGestureState(gestureState: GestureState) {
+  _initializeGestureState(gestureState: PanResponderGestureState) {
     gestureState.moveX = 0;
     gestureState.moveY = 0;
     gestureState.x0 = 0;
@@ -332,7 +332,7 @@ const PanResponder = {
    * avoids more dispatches than necessary.
    */
   _updateGestureStateOnMove(
-    gestureState: GestureState,
+    gestureState: PanResponderGestureState,
     touchHistory: $PropertyType<GestureResponderEvent, 'touchHistory'>,
   ) {
     gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
@@ -401,14 +401,14 @@ const PanResponder = {
    *  accordingly. (numberActiveTouches) may not be totally accurate unless you
    *  are the responder.
    */
-  create(config: PanResponderConfig): {
+  create(config: PanResponderCallbacks): {
     getInteractionHandle: () => ?number,
-    panHandlers: PanHandlers,
+    panHandlers: GestureResponderHandlers,
   } {
     const interactionState = {
       handle: (null: ?number),
     };
-    const gestureState: GestureState = {
+    const gestureState: PanResponderGestureState = {
       // Useful for debugging
       stateID: Math.random(),
       moveX: 0,
@@ -566,7 +566,7 @@ function clearInteractionHandle(
   interactionState: {handle: ?number, ...},
   callback: ?(ActiveCallback | PassiveCallback),
   event: GestureResponderEvent,
-  gestureState: GestureState,
+  gestureState: PanResponderGestureState,
 ) {
   if (interactionState.handle) {
     InteractionManager.clearInteractionHandle(interactionState.handle);

packages/react-native/Libraries/Interaction/TaskQueue.js

@@ -13,11 +13,11 @@
 const infoLog = require('../Utilities/infoLog').default;
 const invariant = require('invariant');
 
-type SimpleTask = {
+export type SimpleTask = {
   name: string,
   run: () => void,
 };
-type PromiseTask = {
+export type PromiseTask = {
   name: string,
   gen: () => Promise<void>,
 };

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -4728,7 +4728,8 @@ declare export default typeof FrameRateLogger;
 `;
 
 exports[`public API should not change unintentionally Libraries/Interaction/InteractionManager.js 1`] = `
-"export type Handle = number;
+"export type { Task, SimpleTask, PromiseTask } from \\"./TaskQueue\\";
+export type Handle = number;
 declare const InteractionManagerImpl: {
   Events: {
     interactionStart: \\"interactionStart\\",
@@ -4744,7 +4745,11 @@ declare const InteractionManagerImpl: {
   },
   createInteractionHandle(): Handle,
   clearInteractionHandle(handle: Handle): void,
-  addListener: Function,
+  addListener: (
+    eventType: string,
+    listener: (...args: any) => mixed,
+    context: mixed
+  ) => EventSubscription,
   setDeadline(deadline: number): void,
 };
 declare const InteractionManager: typeof InteractionManagerImpl;
@@ -4809,7 +4814,7 @@ declare export default typeof NativeFrameRateLogger;
 `;
 
 exports[`public API should not change unintentionally Libraries/Interaction/PanResponder.js 1`] = `
-"export type GestureState = {
+"export type PanResponderGestureState = {
   stateID: number,
   moveX: number,
   moveY: number,
@@ -4823,13 +4828,13 @@ exports[`public API should not change unintentionally Libraries/Interaction/PanR
 };
 type ActiveCallback = (
   event: GestureResponderEvent,
-  gestureState: GestureState
+  gestureState: PanResponderGestureState
 ) => boolean;
 type PassiveCallback = (
   event: GestureResponderEvent,
-  gestureState: GestureState
+  gestureState: PanResponderGestureState
 ) => mixed;
-export type PanHandlers = {
+export type GestureResponderHandlers = {
   onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
   onResponderEnd: (event: GestureResponderEvent) => void,
@@ -4843,7 +4848,7 @@ export type PanHandlers = {
   onStartShouldSetResponder: (event: GestureResponderEvent) => boolean,
   onStartShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
 };
-type PanResponderConfig = $ReadOnly<{
+export type PanResponderCallbacks = $ReadOnly<{
   onMoveShouldSetPanResponder?: ?ActiveCallback,
   onMoveShouldSetPanResponderCapture?: ?ActiveCallback,
   onStartShouldSetPanResponder?: ?ActiveCallback,
@@ -4859,9 +4864,9 @@ type PanResponderConfig = $ReadOnly<{
   onShouldBlockNativeResponder?: ?ActiveCallback,
 }>;
 declare const PanResponder: {
-  create(config: PanResponderConfig): {
+  create(config: PanResponderCallbacks): {
     getInteractionHandle: () => ?number,
-    panHandlers: PanHandlers,
+    panHandlers: GestureResponderHandlers,
   },
 };
 export type PanResponderInstance = ReturnType<(typeof PanResponder)[\\"create\\"]>;
@@ -4870,11 +4875,11 @@ declare export default typeof PanResponder;
 `;
 
 exports[`public API should not change unintentionally Libraries/Interaction/TaskQueue.js 1`] = `
-"type SimpleTask = {
+"export type SimpleTask = {
   name: string,
   run: () => void,
 };
-type PromiseTask = {
+export type PromiseTask = {
   name: string,
   gen: () => Promise<void>,
 };

packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {GestureState} from 'react-native/Libraries/Interaction/PanResponder';
+import type {PanResponderGestureState} from 'react-native/Libraries/Interaction/PanResponder';
 import type {GestureResponderEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 import React from 'react';
@@ -38,7 +38,7 @@ class AnExChained extends React.Component<Object, any> {
     }
     const releaseChain = (
       e: GestureResponderEvent,
-      gestureState: GestureState,
+      gestureState: PanResponderGestureState,
     ) => {
       this.state.stickers[0].flattenOffset(); // merges offset into value and resets
       Animated.sequence([

scripts/build/build-types/buildTypes.js

@@ -38,6 +38,8 @@ const ENTRY_POINTS = [
   'packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js',
   'packages/react-native/Libraries/Components/Clipboard/Clipboard.js',
   'packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js',
+  'packages/react-native/Libraries/Interaction/InteractionManager.js',
+  'packages/react-native/Libraries/Interaction/PanResponder.js',
   'packages/react-native/Libraries/EventEmitter/NativeEventEmitter.js',
   'packages/react-native/Libraries/EventEmitter/RCTDeviceEventEmitter.js',
   'packages/react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter.js',