@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.2

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -16,9 +16,6 @@ const NativeModules = require('../BatchedBridge/NativeModules');
 
 const turboModuleProxy = global.__turboModuleProxy;
 
-const useLegacyNativeModuleInterop =
-  global.RN$Bridgeless !== true || global.RN$TurboInterop === true;
-
 function requireModule<T: TurboModule>(name: string): ?T {
   if (turboModuleProxy != null) {
     const module: ?T = turboModuleProxy(name);
@@ -27,8 +24,11 @@ function requireModule<T: TurboModule>(name: string): ?T {
     }
   }
 
-  if (useLegacyNativeModuleInterop) {
-    // Backward compatibility layer during migration.
+  if (
+    global.RN$Bridgeless !== true ||
+    global.RN$TurboInterop === true ||
+    global.RN$UnifiedNativeModuleProxy === true
+  ) {
     const legacyModule: ?T = NativeModules[name];
     if (legacyModule != null) {
       return legacyModule;

package/Libraries/Types/CoreEventTypes.d.ts

@@ -8,7 +8,7 @@
  */
 
 import type * as React from 'react';
-import {HostComponent} from '../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../types/public/ReactNativeTypes';
 
 export interface LayoutRectangle {
   x: number;
@@ -41,11 +41,7 @@ export interface TextLayoutEventData extends TargetedEvent {
 
 // Similar to React.SyntheticEvent except for nativeEvent
 export interface NativeSyntheticEvent<T>
-  extends React.BaseSyntheticEvent<
-    T,
-    React.ElementRef<HostComponent<unknown>>,
-    React.ElementRef<HostComponent<unknown>>
-  > {}
+  extends React.BaseSyntheticEvent<T, HostInstance, HostInstance> {}
 
 export interface NativeTouchEvent {
   /**
@@ -173,10 +169,7 @@ export interface NativeMouseEvent extends NativeUIEvent {
   /**
    * The secondary target for the event, if there is one.
    */
-  readonly relatedTarget:
-    | null
-    | number
-    | React.ElementRef<HostComponent<unknown>>;
+  readonly relatedTarget: null | number | HostInstance;
   // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface
   /**
    * The X coordinate of the mouse pointer between that event and the padding edge of the target node

package/Libraries/Types/CoreEventTypes.js

@@ -8,14 +8,12 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
-
-import * as React from 'react';
+import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
 
 export type SyntheticEvent<+T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,
-  currentTarget: number | React.ElementRef<HostComponent<mixed>>,
+  currentTarget: number | HostInstance,
   defaultPrevented: ?boolean,
   dispatchConfig: $ReadOnly<{|
     registrationName: string,
@@ -28,7 +26,7 @@ export type SyntheticEvent<+T> = $ReadOnly<{|
   isTrusted: ?boolean,
   nativeEvent: T,
   persist: () => void,
-  target: ?number | React.ElementRef<HostComponent<mixed>>,
+  target: ?number | HostInstance,
   timeStamp: number,
   type: ?string,
 |}>;
@@ -157,7 +155,7 @@ export interface NativeMouseEvent extends NativeUIEvent {
   /**
    * The secondary target for the event, if there is one.
    */
-  +relatedTarget: null | number | React.ElementRef<HostComponent<mixed>>;
+  +relatedTarget: null | number | HostInstance;
   // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface
   /**
    * The X coordinate of the mouse pointer between that event and the padding edge of the target node

package/Libraries/Types/CoreEventTypes.win32.js

@@ -8,14 +8,12 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
-
-import * as React from 'react';
+import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
 
 export type SyntheticEvent<+T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,
-  currentTarget: number | React.ElementRef<HostComponent<mixed>>,
+  currentTarget: number | HostInstance,
   defaultPrevented: ?boolean,
   dispatchConfig: $ReadOnly<{|
     registrationName: string,
@@ -28,7 +26,7 @@ export type SyntheticEvent<+T> = $ReadOnly<{|
   isTrusted: ?boolean,
   nativeEvent: T,
   persist: () => void,
-  target: ?number | React.ElementRef<HostComponent<mixed>>,
+  target: ?number | HostInstance,
   timeStamp: number,
   type: ?string,
 |}>;
@@ -157,7 +155,7 @@ export interface NativeMouseEvent extends NativeUIEvent {
   /**
    * The secondary target for the event, if there is one.
    */
-  +relatedTarget: null | number | React.ElementRef<HostComponent<mixed>>;
+  +relatedTarget: null | number | HostInstance;
   // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface
   /**
    * The X coordinate of the mouse pointer between that event and the padding edge of the target node

package/Libraries/Utilities/Appearance.js

@@ -105,7 +105,9 @@ export function setColorScheme(colorScheme: ?ColorSchemeName): void {
   const {NativeAppearance} = state;
   if (NativeAppearance != null) {
     NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
-    state.appearance = {colorScheme};
+    state.appearance = {
+      colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+    };
   }
 }
 

package/Libraries/Utilities/BackHandler.android.js

@@ -59,10 +59,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 const BackHandler: TBackHandler = {
   exitApp: function (): void {
@@ -86,22 +82,14 @@ const BackHandler: TBackHandler = {
       _backPressSubscriptions.push(handler);
     }
     return {
-      remove: (): void => BackHandler.removeEventListener(eventName, handler),
+      remove: (): void => {
+        const index = _backPressSubscriptions.indexOf(handler);
+        if (index !== -1) {
+          _backPressSubscriptions.splice(index, 1);
+        }
+      },
     };
   },
-
-  /**
-   * Removes the event handler.
-   */
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    const index = _backPressSubscriptions.indexOf(handler);
-    if (index !== -1) {
-      _backPressSubscriptions.splice(index, 1);
-    }
-  },
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/BackHandler.d.ts

@@ -28,10 +28,6 @@ export interface BackHandlerStatic {
     eventName: BackPressEventName,
     handler: () => boolean | null | undefined,
   ): NativeEventSubscription;
-  removeEventListener(
-    eventName: BackPressEventName,
-    handler: () => boolean | null | undefined,
-  ): void;
 }
 
 export const BackHandler: BackHandlerStatic;

package/Libraries/Utilities/BackHandler.ios.js

@@ -10,8 +10,6 @@
 
 'use strict';
 
-module.exports = require('../Components/UnimplementedViews/UnimplementedView');
-
 type BackPressEventName = 'backPress' | 'hardwareBackPress';
 
 function emptyFunction(): void {}
@@ -22,10 +20,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 
 let BackHandler: TBackHandler = {
@@ -35,7 +29,6 @@ let BackHandler: TBackHandler = {
       remove: emptyFunction,
     };
   },
-  removeEventListener(_eventName: BackPressEventName, _handler: Function) {},
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/BackHandler.win32.js

@@ -59,10 +59,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 const BackHandler: TBackHandler = {
   exitApp: function (): void {
@@ -86,22 +82,14 @@ const BackHandler: TBackHandler = {
       _backPressSubscriptions.push(handler);
     }
     return {
-      remove: (): void => BackHandler.removeEventListener(eventName, handler),
+      remove: (): void => {
+        const index = _backPressSubscriptions.indexOf(handler);
+        if (index !== -1) {
+          _backPressSubscriptions.splice(index, 1);
+        }
+      },
     };
   },
-
-  /**
-   * Removes the event handler.
-   */
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    const index = _backPressSubscriptions.indexOf(handler);
-    if (index !== -1) {
-      _backPressSubscriptions.splice(index, 1);
-    }
-  },
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/FocusManager.win32.js

@@ -18,7 +18,7 @@ class FocusManager {
   // This function takes in a ref to a React Component and a bool value. If setWindowFocus = true, call aggressive focus.
   // Else, call polite focus
 
-  static focus(ref: React.Ref<any>, setWindowFocus: boolean) {
+  static focus(ref: React.RefObject<any>, setWindowFocus: boolean) {
     if (ref) {
       if (setWindowFocus) {
         UIManager.dispatchViewManagerCommand(

package/Libraries/Utilities/HMRClient.js

@@ -154,10 +154,9 @@ const HMRClient: HMRClientNativeInterface = {
         data: [
           '\n' +
             '\u001B[7m' +
-            ' \u001B[1m💡 JavaScript logs will be removed from Metro in React ' +
-            'Native 0.77!\u001B[22m Please use React Native DevTools as your ' +
-            'default tool. Tip: Type \u001B[1mj\u001B[22m in the terminal to ' +
-            'open (requires Google Chrome or Microsoft Edge).' +
+            ' \u001B[1m💡 JavaScript logs have moved!\u001B[22m They can now be ' +
+            'viewed in React Native DevTools. Tip: Type \u001B[1mj\u001B[22m in ' +
+            'the terminal to open (requires Google Chrome or Microsoft Edge).' +
             '\u001B[27m' +
             '\n',
         ],

package/Libraries/Utilities/Platform.flow.js

@@ -18,7 +18,7 @@ export type PlatformSelectSpec<T> = {
 
 type IOSPlatform = {
   __constants: null,
-  OS: $TEMPORARY$string<'ios'>,
+  OS: 'ios',
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): string,
   // $FlowFixMe[unsafe-getters-setters]
@@ -54,7 +54,7 @@ type IOSPlatform = {
 
 type AndroidPlatform = {
   __constants: null,
-  OS: $TEMPORARY$string<'android'>,
+  OS: 'android',
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): number,
   // $FlowFixMe[unsafe-getters-setters]

package/Libraries/Utilities/Platform.flow.win32.js

@@ -19,7 +19,7 @@ export type PlatformSelectSpec<T> = {
 
 type IOSPlatform = {
   __constants: null,
-  OS: $TEMPORARY$string<'ios'>,
+  OS: 'ios',
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): number,
   // $FlowFixMe[unsafe-getters-setters]
@@ -55,7 +55,7 @@ type IOSPlatform = {
 
 type AndroidPlatform = {
   __constants: null,
-  OS: $TEMPORARY$string<'android'>,
+  OS: 'android',
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): number,
   // $FlowFixMe[unsafe-getters-setters]
@@ -91,6 +91,7 @@ type AndroidPlatform = {
 
 type Win32Platform = {
   __constants: null,
+  // $FlowFixMe[cannot-resolve-name]
   OS: $TEMPORARY$string<'win32'>,
   // $FlowFixMe[unsafe-getters-setters]
   get Version(): number,

package/Libraries/Utilities/__mocks__/BackHandler.js

@@ -20,17 +20,12 @@ const BackHandler = {
   ): {remove: () => void} {
     _backPressSubscriptions.add(handler);
     return {
-      remove: () => BackHandler.removeEventListener(eventName, handler),
+      remove: () => {
+        _backPressSubscriptions.delete(handler);
+      },
     };
   },
 
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    _backPressSubscriptions.delete(handler);
-  },
-
   mockPressBack: function () {
     let invokeDefault = true;
     const subscriptions = [..._backPressSubscriptions].reverse();

package/Libraries/Utilities/codegenNativeComponent.js

@@ -31,7 +31,7 @@ export type NativeComponentType<T> = HostComponent<T>;
 // `requireNativeComponent` is not available in Bridgeless mode.
 // e.g. This function runs at runtime if `codegenNativeComponent` was not called
 // from a file suffixed with NativeComponent.js.
-function codegenNativeComponent<Props>(
+function codegenNativeComponent<Props: {...}>(
   componentName: string,
   options?: Options,
 ): NativeComponentType<Props> {

package/Libraries/Utilities/useMergeRefs.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import useRefEffect from './useRefEffect';
 import * as React from 'react';
 import {useCallback} from 'react';
 
@@ -22,19 +23,37 @@ import {useCallback} from 'react';
  */
 export default function useMergeRefs<Instance>(
   ...refs: $ReadOnlyArray<?React.RefSetter<Instance>>
-): (Instance | null) => void {
-  return useCallback(
-    (current: Instance | null) => {
-      for (const ref of refs) {
-        if (ref != null) {
+): React.RefSetter<Instance> {
+  const refEffect = useCallback(
+    (current: Instance) => {
+      const cleanups: $ReadOnlyArray<void | (() => void)> = refs.map(ref => {
+        if (ref == null) {
+          return undefined;
+        } else {
           if (typeof ref === 'function') {
-            ref(current);
+            // $FlowIssue[incompatible-type] - Flow does not understand ref cleanup.
+            const cleanup: void | (() => void) = ref(current);
+            return typeof cleanup === 'function'
+              ? cleanup
+              : () => {
+                  ref(null);
+                };
           } else {
             ref.current = current;
+            return () => {
+              ref.current = null;
+            };
           }
         }
-      }
+      });
+
+      return () => {
+        for (const cleanup of cleanups) {
+          cleanup?.();
+        }
+      };
     },
     [...refs], // eslint-disable-line react-hooks/exhaustive-deps
   );
+  return useRefEffect(refEffect);
 }

package/Libraries/WebSocket/WebSocketEvent.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
@@ -18,7 +19,9 @@
  * In case of "message", the `data` property contains the incoming data.
  */
 class WebSocketEvent {
-  constructor(type, eventInitDict) {
+  type: string;
+
+  constructor(type: string, eventInitDict: $FlowFixMe) {
     this.type = type.toString();
     Object.assign(this, eventInitDict);
   }

package/Libraries/WebSocket/WebSocketInterceptor.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
@@ -40,53 +41,53 @@ const WebSocketInterceptor = {
   /**
    * Invoked when RCTWebSocketModule.close(...) is called.
    */
-  setCloseCallback(callback) {
+  setCloseCallback(callback: $FlowFixMe) {
     closeCallback = callback;
   },
 
   /**
    * Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
    */
-  setSendCallback(callback) {
+  setSendCallback(callback: $FlowFixMe) {
     sendCallback = callback;
   },
 
   /**
    * Invoked when RCTWebSocketModule.connect(...) is called.
    */
-  setConnectCallback(callback) {
+  setConnectCallback(callback: $FlowFixMe) {
     connectCallback = callback;
   },
 
   /**
    * Invoked when event "websocketOpen" happens.
    */
-  setOnOpenCallback(callback) {
+  setOnOpenCallback(callback: $FlowFixMe) {
     onOpenCallback = callback;
   },
 
   /**
    * Invoked when event "websocketMessage" happens.
    */
-  setOnMessageCallback(callback) {
+  setOnMessageCallback(callback: $FlowFixMe) {
     onMessageCallback = callback;
   },
 
   /**
    * Invoked when event "websocketFailed" happens.
    */
-  setOnErrorCallback(callback) {
+  setOnErrorCallback(callback: $FlowFixMe) {
     onErrorCallback = callback;
   },
 
   /**
    * Invoked when event "websocketClosed" happens.
    */
-  setOnCloseCallback(callback) {
+  setOnCloseCallback(callback: $FlowFixMe) {
     onCloseCallback = callback;
   },
 
-  isInterceptorEnabled() {
+  isInterceptorEnabled(): boolean {
     return isInterceptorEnabled;
   },
 
@@ -100,6 +101,7 @@ const WebSocketInterceptor = {
    */
   _registerEvents() {
     subscriptions = [
+      // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketMessage', ev => {
         if (onMessageCallback) {
           onMessageCallback(
@@ -110,16 +112,19 @@ const WebSocketInterceptor = {
           );
         }
       }),
+      // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketOpen', ev => {
         if (onOpenCallback) {
           onOpenCallback(ev.id);
         }
       }),
+      // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketClosed', ev => {
         if (onCloseCallback) {
           onCloseCallback(ev.id, {code: ev.code, reason: ev.reason});
         }
       }),
+      // $FlowFixMe[incompatible-type]
       eventEmitter.addListener('websocketFailed', ev => {
         if (onErrorCallback) {
           onErrorCallback(ev.id, {message: ev.message});
@@ -132,6 +137,7 @@ const WebSocketInterceptor = {
     if (isInterceptorEnabled) {
       return;
     }
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     eventEmitter = new NativeEventEmitter(
       // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
       // If you want to use the native module on other platforms, please remove this condition and test its behavior
@@ -142,11 +148,13 @@ const WebSocketInterceptor = {
     // Override `connect` method for all RCTWebSocketModule requests
     // to intercept the request url, protocols, options and socketId,
     // then pass them through the `connectCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
     NativeWebSocketModule.connect = function (
-      url,
-      protocols,
-      options,
-      socketId,
+      url: string,
+      protocols: Array<string> | null,
+      options: $FlowFixMe,
+      socketId: number,
     ) {
       if (connectCallback) {
         connectCallback(url, protocols, options, socketId);
@@ -156,6 +164,8 @@ const WebSocketInterceptor = {
 
     // Override `send` method for all RCTWebSocketModule requests to intercept
     // the data sent, then pass them through the `sendCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
     NativeWebSocketModule.send = function (data, socketId) {
       if (sendCallback) {
         sendCallback(data, socketId);
@@ -165,6 +175,8 @@ const WebSocketInterceptor = {
 
     // Override `sendBinary` method for all RCTWebSocketModule requests to
     // intercept the data sent, then pass them through the `sendCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
     NativeWebSocketModule.sendBinary = function (data, socketId) {
       if (sendCallback) {
         sendCallback(WebSocketInterceptor._arrayBufferToString(data), socketId);
@@ -174,6 +186,8 @@ const WebSocketInterceptor = {
 
     // Override `close` method for all RCTWebSocketModule requests to intercept
     // the close information, then pass them through the `closeCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
     NativeWebSocketModule.close = function () {
       if (closeCallback) {
         if (arguments.length === 3) {
@@ -188,7 +202,7 @@ const WebSocketInterceptor = {
     isInterceptorEnabled = true;
   },
 
-  _arrayBufferToString(data) {
+  _arrayBufferToString(data: string): ArrayBuffer | string {
     const value = base64.toByteArray(data).buffer;
     if (value === undefined || value === null) {
       return '(no value)';
@@ -209,9 +223,13 @@ const WebSocketInterceptor = {
       return;
     }
     isInterceptorEnabled = false;
+    // $FlowFixMe[cannot-write]
     NativeWebSocketModule.send = originalRCTWebSocketSend;
+    // $FlowFixMe[cannot-write]
     NativeWebSocketModule.sendBinary = originalRCTWebSocketSendBinary;
+    // $FlowFixMe[cannot-write]
     NativeWebSocketModule.close = originalRCTWebSocketClose;
+    // $FlowFixMe[cannot-write]
     NativeWebSocketModule.connect = originalRCTWebSocketConnect;
 
     connectCallback = null;

package/Libraries/__flowtests__/ReactNativeTypes-flowtest.js

@@ -8,15 +8,16 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  HostInstance,
+} from '../Renderer/shims/ReactNativeTypes';
 
 import * as React from 'react';
 
-function takesHostComponentInstance(
-  instance: React.ElementRef<HostComponent<mixed>> | null,
-): void {}
+function takesHostComponentInstance(instance: HostInstance | null): void {}
 
-const MyHostComponent = (('Host': any): HostComponent<mixed>);
+const MyHostComponent = (('Host': any): HostComponent<{...}>);
 
 <MyHostComponent
   ref={hostComponentRef => {

package/Libraries/promiseRejectionTrackingOptions.js

@@ -36,7 +36,7 @@ let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
       }
       // It could although this object is not a standard error, it still has stack information to unwind
       // $FlowFixMe ignore types just check if stack is there
-      if (rejection.stack && typeof rejection.stack === 'string') {
+      if (rejection?.stack && typeof rejection.stack === 'string') {
         stack = rejection.stack;
       }
     }