Add UIManager to build-types and align Flow with TS defs (#49322)

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

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D69241595

fbshipit-source-id: 00dafa499fe70f47395ab363f6565619e1877bae

packages/react-native/src/private/specs_DEPRECATED/modules/NativeUIManager.js

@@ -13,6 +13,29 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
+export type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number,
+) => void;
+
+export type MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) => void;
+
+export type MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+) => void;
+
 export interface Spec extends TurboModule {
   +getConstants: () => Object;
   +createView: (
@@ -33,41 +56,79 @@ export interface Spec extends TurboModule {
       height: number,
     ) => void,
   ) => void;
+  /**
+   * Used to call a native view method from JavaScript
+   *
+   * reactTag - Id of react view.
+   * commandID - Id of the native method that should be called.
+   * commandArgs - Args of the native method that we can pass from JS to native.
+   */
   +dispatchViewManagerCommand: (
     reactTag: number,
     commandID: number, // number || string
-    commandArgs: ?Array<any>,
-  ) => void;
-  +measure: (
-    reactTag: number,
-    callback: (
-      left: number,
-      top: number,
-      width: number,
-      height: number,
-      pageX: number,
-      pageY: number,
-    ) => void,
+    commandArgs?: Array<any>,
   ) => void;
+  /**
+   * Determines the location on screen, width, and height of the given view and
+   * returns the values via an async callback. If successful, the callback will
+   * be called with the following arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *  - pageX
+   *  - pageY
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native. If you need the measurements as soon as
+   * possible, consider using the [`onLayout`
+   * prop](docs/view.html#onlayout) instead.
+   *
+   * @deprecated Use `ref.measure` instead.
+   */
+  +measure: (reactTag: number, callback: MeasureOnSuccessCallback) => void;
+  /**
+   * Determines the location of the given view in the window and returns the
+   * values via an async callback. If the React root view is embedded in
+   * another native view, this will give you the absolute coordinates. If
+   * successful, the callback will be called with the following
+   * arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native.
+   *
+   * @deprecated Use `ref.measureInWindow` instead.
+   */
   +measureInWindow: (
     reactTag: number,
-    callback: (x: number, y: number, width: number, height: number) => void,
+    callback: MeasureInWindowOnSuccessCallback,
   ) => void;
   +viewIsDescendantOf: (
     reactTag: number,
     ancestorReactTag: number,
     callback: (result: Array<boolean>) => void,
   ) => void;
+  /**
+   * Like [`measure()`](#measure), but measures the view relative an ancestor,
+   * specified as `relativeToNativeNode`. This means that the returned x, y
+   * are relative to the origin x, y of the ancestor view.
+   *
+   * As always, to obtain a native node handle for a component, you can use
+   * `React.findNodeHandle(component)`.
+   *
+   * @deprecated Use `ref.measureLayout` instead.
+   */
   +measureLayout: (
     reactTag: number,
     ancestorReactTag: number,
     errorCallback: (error: Object) => void,
-    callback: (
-      left: number,
-      top: number,
-      width: number,
-      height: number,
-    ) => void,
+    callback: MeasureLayoutOnSuccessCallback,
   ) => void;
   +measureLayoutRelativeToParent: (
     reactTag: number,
@@ -99,6 +160,18 @@ export interface Spec extends TurboModule {
   // Android only
   +getConstantsForViewManager?: (viewManagerName: string) => ?Object;
   +getDefaultEventTypes?: () => Array<string>;
+  /**
+   * Automatically animates views to their new positions when the
+   * next layout happens.
+   *
+   * A common way to use this API is to call it before calling `setState`.
+   *
+   * Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+   *
+   * ```js
+   * UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
+   * ```
+   */
   +setLayoutAnimationEnabledExperimental?: (enabled: boolean) => void;
   +sendAccessibilityEvent?: (reactTag: number, eventType: number) => void;
 

packages/react-native/types/__typetests__/index.tsx

@@ -1540,11 +1540,11 @@ class BridgedComponentTest extends React.Component {
   nativeComponentRef: React.ElementRef<typeof NativeBridgedComponent> | null;
 
   callNativeMethod = () => {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this.nativeComponentRef),
-      'someNativeMethod',
-      [],
-    );
+    const nodeHandle = findNodeHandle(this.nativeComponentRef);
+    if (nodeHandle != null) {
+      const commandID = 1; // some command
+      UIManager.dispatchViewManagerCommand(nodeHandle, commandID, []);
+    }
   };
 
   measureNativeComponent() {

scripts/build/build-types/buildTypes.js

@@ -37,6 +37,7 @@ const ENTRY_POINTS = [
   'packages/react-native/Libraries/Performance/Systrace.js',
   'packages/react-native/Libraries/LogBox/LogBox.js',
   'packages/react-native/Libraries/vendor/emitter/EventEmitter.js',
+  'packages/react-native/Libraries/ReactNative/UIManager.js',
 ];
 
 /**