@office-iss/react-native-win32 0.83.0-preview.1 → 0.84.0-preview.1

package/Libraries/Core/ExceptionsManager.js

@@ -135,8 +135,8 @@ function reportException(
 }
 
 declare var console: {
-  error: (...data: $ReadOnlyArray<mixed>) => void,
-  _errorOriginal: (...data: $ReadOnlyArray<mixed>) => void,
+  error: (...data: $ReadOnlyArray<unknown>) => void,
+  _errorOriginal: (...data: $ReadOnlyArray<unknown>) => void,
   reportErrorsAsExceptions: boolean,
   ...
 };
@@ -148,7 +148,7 @@ let inExceptionHandler = false;
 /**
  * Logs exceptions to the (native) console and displays them
  */
-function handleException(e: mixed, isFatal: boolean) {
+function handleException(e: unknown, isFatal: boolean) {
   // TODO(T196834299): We should really use a c++ turbomodule for this
   const reportToConsole = true;
   if (

package/Libraries/Core/RawEventEmitter.js

@@ -17,7 +17,7 @@ export type RawEventEmitterEvent = $ReadOnly<{
   // We expect, but do not/cannot require, that nativeEvent is an object
   // with the properties: key, elementType (string), type (string), tag (numeric),
   // and a stateNode of the native element/Fiber the event was emitted to.
-  nativeEvent: {[string]: mixed},
+  nativeEvent: {[string]: unknown},
 }>;
 
 type RawEventDefinitions = {

package/Libraries/Core/ReactFiberErrorDialog.js

@@ -14,7 +14,7 @@ import ExceptionsManager, {SyntheticError} from './ExceptionsManager';
 
 export type CapturedError = {
   +componentStack: string,
-  +error: mixed,
+  +error: unknown,
   +errorBoundary: ?{...},
   ...
 };

package/Libraries/Core/ReactNativeVersion.js

@@ -27,7 +27,7 @@
  */
 export default class ReactNativeVersion {
   static major: number = 0;
-  static minor: number = 83;
+  static minor: number = 84;
   static patch: number = 0;
   static prerelease: string | null = 'rc.5';
 

package/Libraries/Core/setUpDeveloperTools.js

@@ -37,7 +37,7 @@ if (__DEV__) {
         ] as const
       ).forEach(level => {
         const originalFunction = console[level];
-        console[level] = function (...args: $ReadOnlyArray<mixed>) {
+        console[level] = function (...args: $ReadOnlyArray<unknown>) {
           HMRClient.log(level, args);
           originalFunction.apply(console, args);
         };

package/Libraries/Core/setUpErrorHandling.js

@@ -20,7 +20,7 @@ if (global.RN$useAlwaysAvailableJSErrorHandling !== true) {
 
   // Set up error handler
   if (!global.__fbDisableExceptionsManager) {
-    const handleError = (e: mixed, isFatal: boolean) => {
+    const handleError = (e: unknown, isFatal: boolean) => {
       try {
         ExceptionsManager.handleException(e, isFatal);
       } catch (ee) {

package/Libraries/EventEmitter/NativeEventEmitter.js

@@ -85,8 +85,8 @@ export default class NativeEventEmitter<
 
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
-    context?: mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => unknown,
+    context?: unknown,
   ): EventSubscription {
     this._nativeModule?.addListener(eventType);
     let subscription: ?EventSubscription = RCTDeviceEventEmitter.addListener(

package/Libraries/Image/Image.android.js

@@ -48,7 +48,7 @@ function generateRequestId() {
 function getSize(
   url: string,
   success?: (width: number, height: number) => void,
-  failure?: (error: mixed) => void,
+  failure?: (error: unknown) => void,
 ): void | Promise<ImageSize> {
   const promise = NativeImageLoaderAndroid.getSize(url);
   if (typeof success !== 'function') {
@@ -74,7 +74,7 @@ function getSizeWithHeaders(
   url: string,
   headers: {[string]: string, ...},
   success?: (width: number, height: number) => void,
-  failure?: (error: mixed) => void,
+  failure?: (error: unknown) => void,
 ): void | Promise<ImageSize> {
   const promise = NativeImageLoaderAndroid.getSizeWithHeaders(url, headers);
   if (typeof success !== 'function') {

package/Libraries/Image/Image.ios.js

@@ -33,7 +33,7 @@ import * as React from 'react';
 function getSize(
   uri: string,
   success?: (width: number, height: number) => void,
-  failure?: (error: mixed) => void,
+  failure?: (error: unknown) => void,
 ): void | Promise<ImageSize> {
   const promise = NativeImageLoaderIOS.getSize(uri).then(([width, height]) => ({
     width,
@@ -56,7 +56,7 @@ function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
   success?: (width: number, height: number) => void,
-  failure?: (error: mixed) => void,
+  failure?: (error: unknown) => void,
 ): void | Promise<ImageSize> {
   const promise = NativeImageLoaderIOS.getSizeWithHeaders(uri, headers);
   if (typeof success !== 'function') {

package/Libraries/Image/Image.win32.js

@@ -73,7 +73,7 @@ function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
   success?: (width: number, height: number) => void,
-  failure?: (error: mixed) => void,
+  failure?: (error: unknown) => void,
   // $FlowFixMe[unclear-type]
 ): any {
   return NativeImageLoaderWin32.getSizeWithHeaders(uri, headers)

package/Libraries/Image/ImageProps.js

@@ -220,7 +220,7 @@ export type ImagePropsBase = $ReadOnly<{
    * See https://reactnative.dev/docs/image#onlayout
    */
 
-  onLayout?: ?(event: LayoutChangeEvent) => mixed,
+  onLayout?: ?(event: LayoutChangeEvent) => unknown,
 
   /**
    * Invoked when load completes successfully.

package/Libraries/Image/ImageTypes.flow.js

@@ -28,7 +28,7 @@ type ImageComponentStaticsIOS = $ReadOnly<{
   getSize(
     uri: string,
     success: (width: number, height: number) => void,
-    failure?: (error: mixed) => void,
+    failure?: (error: unknown) => void,
   ): void,
 
   getSizeWithHeaders(
@@ -39,7 +39,7 @@ type ImageComponentStaticsIOS = $ReadOnly<{
     uri: string,
     headers: {[string]: string, ...},
     success: (width: number, height: number) => void,
-    failure?: (error: mixed) => void,
+    failure?: (error: unknown) => void,
   ): void,
 
   prefetch(url: string): Promise<boolean>,

package/Libraries/Interaction/InteractionManager.js

@@ -98,7 +98,7 @@ const InteractionManagerStub = {
   runAfterInteractions(task: ?Task): {
     then: <U>(
       onFulfill?: ?(void) => ?(Promise<U> | U),
-      onReject?: ?(error: mixed) => ?(Promise<U> | U),
+      onReject?: ?(error: unknown) => ?(Promise<U> | U),
     ) => Promise<U>,
     cancel: () => void,
     ...
@@ -165,8 +165,8 @@ const InteractionManagerStub = {
   addListener(
     eventType: string,
     // $FlowFixMe[unclear-type]
-    listener: (...args: any) => mixed,
-    context: mixed,
+    listener: (...args: any) => unknown,
+    context: unknown,
   ): EventSubscription {
     return {
       remove() {},

package/Libraries/Interaction/PanResponder.js

@@ -187,7 +187,7 @@ type ActiveCallback = (
 type PassiveCallback = (
   event: GestureResponderEvent,
   gestureState: PanResponderGestureState,
-) => mixed;
+) => unknown;
 
 export type GestureResponderHandlerMethods = {
   onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean,

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -201,7 +201,7 @@ const LayoutAnimation = {
     scaleY: 'scaleY',
     scaleXY: 'scaleXY',
   }) as LayoutAnimationProperties,
-  checkConfig(...args: Array<mixed>) {
+  checkConfig(...args: Array<unknown>) {
     console.error('LayoutAnimation.checkConfig(...) has been disabled.');
   },
   Presets,

package/Libraries/Linking/Linking.js

@@ -34,7 +34,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    */
   addEventListener<K: $Keys<LinkingEventDefinitions>>(
     eventType: K,
-    listener: (...LinkingEventDefinitions[K]) => mixed,
+    listener: (...LinkingEventDefinitions[K]) => unknown,
   ): EventSubscription {
     return this.addListener(eventType, listener);
   }

package/Libraries/Lists/FlatList.js

@@ -172,7 +172,7 @@ function numColumnsOrDefault(numColumns: ?number) {
   return numColumns ?? 1;
 }
 
-function isArrayLike(data: mixed): boolean {
+function isArrayLike(data: unknown): boolean {
   // $FlowExpectedError[incompatible-use]
   return typeof Object(data).length === 'number';
 }
@@ -413,7 +413,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
     }
   }
 
-  setNativeProps(props: {[string]: mixed, ...}) {
+  setNativeProps(props: {[string]: unknown, ...}) {
     if (this._listRef) {
       this._listRef.setNativeProps(props);
     }

package/Libraries/LogBox/Data/LogBoxData.js

@@ -412,6 +412,21 @@ export function observe(observer: Observer): Subscription {
   };
 }
 
+/**
+ * Same as observe(), but doesn't call notify observer sync at the time of subscription.
+ * Expected to be used only in LogBoxStateSubscription.
+ */
+function observeNext(observer: Observer): Subscription {
+  const subscription = {observer};
+  observers.add(subscription);
+
+  return {
+    unsubscribe(): void {
+      observers.delete(subscription);
+    },
+  };
+}
+
 type LogBoxStateSubscriptionProps = $ReadOnly<{}>;
 type LogBoxStateSubscriptionState = $ReadOnly<{
   logs: LogBoxLogs,
@@ -447,12 +462,11 @@ export function withSubscription(
     }
 
     _subscription: ?Subscription;
+    _updateStateOnMountTimeoutId: ?TimeoutID;
 
     state: LogBoxStateSubscriptionState = {
-      logs: new Set(),
-      isDisabled: false,
       hasError: false,
-      selectedLogIndex: -1,
+      ...getNextState(),
     };
 
     render(): React.Node {
@@ -472,12 +486,25 @@ export function withSubscription(
     }
 
     componentDidMount(): void {
-      this._subscription = observe(data => {
+      this._subscription = observeNext(data => {
         this.setState(data);
       });
+
+      /**
+       * This should cover the case when the state changes in between the first render and mount effect.
+       * We defer the state update to next task to avoid cascading update.
+       */
+      this._updateStateOnMountTimeoutId = setTimeout(() => {
+        this._updateStateOnMountTimeoutId = null;
+        this.setState(getNextState());
+      }, 0);
     }
 
     componentWillUnmount(): void {
+      if (this._updateStateOnMountTimeoutId != null) {
+        clearTimeout(this._updateStateOnMountTimeoutId);
+      }
+
       if (this._subscription != null) {
         this._subscription.unsubscribe();
       }

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -65,7 +65,7 @@ export type LogBoxLogData = $ReadOnly<{
   componentStack: ComponentStack,
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
-  extraData?: mixed,
+  extraData?: unknown,
   onNotificationPress?: ?() => void,
 }>;
 
@@ -81,7 +81,7 @@ class LogBoxLog {
   codeFrame: ?CodeFrame;
   componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
-  extraData: mixed | void;
+  extraData: unknown | void;
   symbolicated:
     | $ReadOnly<{error: null, stack: null, status: 'NONE'}>
     | $ReadOnly<{error: null, stack: null, status: 'PENDING'}>

package/Libraries/LogBox/Data/LogBoxSymbolication.js

@@ -53,7 +53,7 @@ export function deleteStack(stack: Stack): void {
 
 export function symbolicate(
   stack: Stack,
-  extraData?: mixed,
+  extraData?: unknown,
 ): Promise<SymbolicatedStackTrace> {
   let promise = cache.get(stack);
   if (promise == null) {

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -93,7 +93,7 @@ const RE_BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
   'm',
 );
 
-export function hasComponentStack(args: $ReadOnlyArray<mixed>): boolean {
+export function hasComponentStack(args: $ReadOnlyArray<unknown>): boolean {
   for (const arg of args) {
     if (typeof arg === 'string' && isComponentStack(arg)) {
       return true;
@@ -136,7 +136,7 @@ export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{
+export function parseInterpolation(args: $ReadOnlyArray<unknown>): $ReadOnly<{
   category: Category,
   message: Message,
 }> {
@@ -444,7 +444,7 @@ export function parseLogBoxException(
   };
 }
 
-export function withoutANSIColorStyles(message: mixed): mixed {
+export function withoutANSIColorStyles(message: unknown): unknown {
   if (typeof message !== 'string') {
     return message;
   }
@@ -456,14 +456,14 @@ export function withoutANSIColorStyles(message: mixed): mixed {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
+export function parseLogBoxLog(args: $ReadOnlyArray<unknown>): {
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
 } {
   const message = withoutANSIColorStyles(args[0]);
-  let argsWithoutComponentStack: Array<mixed> = [];
+  let argsWithoutComponentStack: Array<unknown> = [];
   let componentStack: ComponentStack = [];
   let componentStackType = 'legacy';
 

package/Libraries/LogBox/LogBox.js

@@ -27,7 +27,7 @@ interface ILogBox {
   ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
-  addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void;
+  addConsoleLog(level: 'warn' | 'error', ...args: Array<unknown>): void;
   addException(error: ExtendedExceptionData): void;
 }
 
@@ -42,7 +42,7 @@ if (__DEV__) {
   } = require('./Data/parseLogBoxLog');
 
   let originalConsoleWarn;
-  let consoleWarnImpl: (...args: Array<mixed>) => void;
+  let consoleWarnImpl: (...args: Array<unknown>) => void;
 
   let isLogBoxInstalled: boolean = false;
 
@@ -56,7 +56,7 @@ if (__DEV__) {
 
       if (global.RN$registerExceptionListener != null) {
         global.RN$registerExceptionListener(
-          (error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
+          (error: ExtendedExceptionData & {preventDefault: () => unknown}) => {
             if (global.RN$isRuntimeReady?.() || !error.isFatal) {
               error.preventDefault();
               addException(error);
@@ -140,7 +140,7 @@ if (__DEV__) {
       }
     },
 
-    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>) {
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<unknown>) {
       if (isLogBoxInstalled) {
         let filteredLevel: 'warn' | 'error' | 'fatal' = level;
         try {
@@ -207,13 +207,13 @@ if (__DEV__) {
     }
   }
 
-  const isRCTLogAdviceWarning = (...args: Array<mixed>) => {
+  const isRCTLogAdviceWarning = (...args: Array<unknown>) => {
     // RCTLogAdvice is a native logging function designed to show users
     // a message in the console, but not show it to them in Logbox.
     return typeof args[0] === 'string' && args[0].startsWith('(ADVICE)');
   };
 
-  const registerWarning = (...args: Array<mixed>): void => {
+  const registerWarning = (...args: Array<unknown>): void => {
     // Let warnings within LogBox itself fall through.
     if (LogBoxData.isLogBoxErrorMessage(String(args[0]))) {
       return;
@@ -271,7 +271,7 @@ if (__DEV__) {
       // Do nothing.
     },
 
-    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void {
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<unknown>): void {
       // Do nothing.
     },
 

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -122,6 +122,18 @@ const bubblingEventTypes = {
       bubbled: 'onFocus',
     },
   },
+  topKeyDown: {
+    phasedRegistrationNames: {
+      captured: 'onKeyDownCapture',
+      bubbled: 'onKeyDown',
+    },
+  },
+  topKeyUp: {
+    phasedRegistrationNames: {
+      captured: 'onKeyUpCapture',
+      bubbled: 'onKeyUp',
+    },
+  },
 };
 
 const directEventTypes = {

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -15,13 +15,13 @@ export type Difference =
   | {
       type: 'missing',
       path: Array<string>,
-      nativeValue: mixed,
+      nativeValue: unknown,
     }
   | {
       type: 'unequal',
       path: Array<string>,
-      nativeValue: mixed,
-      staticValue: mixed,
+      nativeValue: unknown,
+      staticValue: unknown,
     };
 
 export type ValidationResult = ValidResult | InvalidResult;
@@ -143,6 +143,6 @@ function accumulateDifferences(
   }
 }
 
-function ifObject(value: mixed): ?{...} {
+function ifObject(value: unknown): ?{...} {
   return typeof value === 'object' && !Array.isArray(value) ? value : null;
 }

package/Libraries/NativeComponent/ViewConfigIgnore.js

@@ -43,7 +43,7 @@ export function ConditionallyIgnoredEventHandlers<
   return undefined;
 }
 
-export function isIgnored(value: mixed): boolean {
+export function isIgnored(value: unknown): boolean {
   if (typeof value === 'object' && value != null) {
     return ignoredViewConfigProps.has(value);
   }

package/Libraries/Network/RCTNetworking.android.js

@@ -50,8 +50,8 @@ const emitter = new NativeEventEmitter<$FlowFixMe>(
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
-    context?: mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => unknown,
+    context?: unknown,
   ): EventSubscription {
     // $FlowFixMe[incompatible-type]
     return emitter.addListener(eventType, listener, context);
@@ -66,7 +66,7 @@ const RCTNetworking = {
     responseType: NativeResponseType,
     incrementalUpdates: boolean,
     timeout: number,
-    callback: (requestId: number) => mixed,
+    callback: (requestId: number) => unknown,
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);

package/Libraries/Network/RCTNetworking.ios.js

@@ -20,8 +20,8 @@ import {type NativeResponseType} from './XMLHttpRequest';
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
-    context?: mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => unknown,
+    context?: unknown,
   ): EventSubscription {
     // $FlowFixMe[incompatible-type]
     return RCTDeviceEventEmitter.addListener(eventType, listener, context);

package/Libraries/Network/RCTNetworking.js.flow

@@ -19,8 +19,8 @@ declare const RCTNetworking: interface {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
     // $FlowFixMe[invalid-computed-prop]
-    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
-    context?: mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => unknown,
+    context?: unknown,
   ): EventSubscription,
 
   sendRequest(

package/Libraries/Network/RCTNetworking.win32.js

@@ -20,8 +20,8 @@ import {type NativeResponseType} from './XMLHttpRequest';
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
-    context?: mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => unknown,
+    context?: unknown,
   ): EventSubscription {
     // $FlowFixMe[incompatible-type]
     return RCTDeviceEventEmitter.addListener(eventType, listener, context);

package/Libraries/Pressability/Pressability.js

@@ -88,47 +88,47 @@ export type PressabilityConfig = $ReadOnly<{
   /**
    * Called after the element loses focus.
    */
-  onBlur?: ?(event: BlurEvent) => mixed,
+  onBlur?: ?(event: BlurEvent) => unknown,
 
   /**
    * Called after the element is focused.
    */
-  onFocus?: ?(event: FocusEvent) => mixed,
+  onFocus?: ?(event: FocusEvent) => unknown,
 
   /**
    * Called when the hover is activated to provide visual feedback.
    */
-  onHoverIn?: ?(event: MouseEvent) => mixed,
+  onHoverIn?: ?(event: MouseEvent) => unknown,
 
   /**
    * Called when the hover is deactivated to undo visual feedback.
    */
-  onHoverOut?: ?(event: MouseEvent) => mixed,
+  onHoverOut?: ?(event: MouseEvent) => unknown,
 
   /**
    * Called when a long press gesture has been triggered.
    */
-  onLongPress?: ?(event: GestureResponderEvent) => mixed,
+  onLongPress?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when a press gesture has been triggered.
    */
-  onPress?: ?(event: GestureResponderEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when the press is activated to provide visual feedback.
    */
-  onPressIn?: ?(event: GestureResponderEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when the press location moves. (This should rarely be used.)
    */
-  onPressMove?: ?(event: GestureResponderEvent) => mixed,
+  onPressMove?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when the press is deactivated to undo visual feedback.
    */
-  onPressOut?: ?(event: GestureResponderEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Whether to prevent any other native components from becoming responder