react-native-windows 0.72.16 → 0.73.0-preview.2

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,99 +12,73 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
+import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
-function createAnimatedStyle(inputStyle: any): Object {
+function createAnimatedStyle(
+  inputStyle: any,
+  keepUnanimatedValues: boolean,
+): Object {
   // $FlowFixMe[underconstrained-implicit-instantiation]
   const style = flattenStyle(inputStyle);
   const animatedStyles: any = {};
   for (const key in style) {
     const value = style[key];
     if (key === 'transform') {
-      animatedStyles[key] = new AnimatedTransform(value);
+      animatedStyles[key] =
+        ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+          ? new AnimatedObject(value)
+          : new AnimatedTransform(value);
     } else if (value instanceof AnimatedNode) {
       animatedStyles[key] = value;
-    } else if (value && !Array.isArray(value) && typeof value === 'object') {
-      animatedStyles[key] = createAnimatedStyle(value);
+    } else if (hasAnimatedNode(value)) {
+      animatedStyles[key] = new AnimatedObject(value);
+    } else if (keepUnanimatedValues) {
+      animatedStyles[key] = value;
     }
   }
   return animatedStyles;
 }
 
-function createStyleWithAnimatedTransform(inputStyle: any): Object {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(inputStyle) || ({}: {[string]: any});
-
-  if (style.transform) {
-    style = {
-      ...style,
-      transform: new AnimatedTransform(style.transform),
-    };
-  }
-  return style;
-}
-
 export default class AnimatedStyle extends AnimatedWithChildren {
   _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    if (Platform.OS === 'web') {
-      this._inputStyle = style;
-      this._style = createAnimatedStyle(style);
-    } else {
-      this._style = createStyleWithAnimatedTransform(style);
-    }
+    this._inputStyle = style;
+    this._style = createAnimatedStyle(style, Platform.OS !== 'web');
   }
 
-  // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style: any): {[string]: any | {...}} {
-    const updatedStyle: {[string]: any | {...}} = {};
-    for (const key in style) {
-      const value = style[key];
+  __getValue(): Object | Array<Object> {
+    const result: {[string]: any} = {};
+    for (const key in this._style) {
+      const value = this._style[key];
       if (value instanceof AnimatedNode) {
-        updatedStyle[key] = value.__getValue();
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetValues(value);
+        result[key] = value.__getValue();
       } else {
-        updatedStyle[key] = value;
+        result[key] = value;
       }
     }
-    return updatedStyle;
-  }
 
-  __getValue(): Object | Array<Object> {
-    if (Platform.OS === 'web') {
-      return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
-    }
-
-    return this._walkStyleAndGetValues(this._style);
+    return Platform.OS === 'web' ? [this._inputStyle, result] : result;
   }
 
-  // Recursively get animated values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetAnimatedValues(style: any): {[string]: any | {...}} {
-    const updatedStyle: {[string]: any | {...}} = {};
-    for (const key in style) {
-      const value = style[key];
+  __getAnimatedValue(): Object {
+    const result: {[string]: any} = {};
+    for (const key in this._style) {
+      const value = this._style[key];
       if (value instanceof AnimatedNode) {
-        updatedStyle[key] = value.__getAnimatedValue();
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetAnimatedValues(value);
+        result[key] = value.__getAnimatedValue();
       }
     }
-    return updatedStyle;
-  }
-
-  __getAnimatedValue(): Object {
-    return this._walkStyleAndGetAnimatedValues(this._style);
+    return result;
   }
 
   __attach(): void {

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -19,11 +19,7 @@ import invariant from 'invariant';
 export type AnimatedValueXYConfig = $ReadOnly<{
   useNativeDriver: boolean,
 }>;
-type ValueXYListenerCallback = (value: {
-  x: number,
-  y: number,
-  ...
-}) => mixed;
+type ValueXYListenerCallback = (value: {x: number, y: number, ...}) => mixed;
 
 let _uniqueId = 1;
 
@@ -135,11 +131,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    * See https://reactnative.dev/docs/animatedvaluexy#resetanimation
    */
   resetAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
+    callback?: (value: {x: number, y: number, ...}) => void,
   ): void {
     this.x.resetAnimation();
     this.y.resetAnimation();
@@ -153,13 +145,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    *
    * See https://reactnative.dev/docs/animatedvaluexy#stopanimation
    */
-  stopAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
-  ): void {
+  stopAnimation(callback?: (value: {x: number, y: number, ...}) => void): void {
     this.x.stopAnimation();
     this.y.stopAnimation();
     callback && callback(this.__getValue());

package/Libraries/Animated/shouldUseTurboAnimatedModule.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import Platform from '../Utilities/Platform';
+
+function shouldUseTurboAnimatedModule(): boolean {
+  return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+}
+
+export default shouldUseTurboAnimatedModule;

package/Libraries/Animated/useAnimatedProps.js

@@ -10,7 +10,8 @@
 
 'use strict';
 
-import {isPublicInstance as isFabricPublicInstance} from '../Renderer/public/ReactFabricPublicInstanceUtils';
+import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -45,6 +46,8 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
     () => new AnimatedProps(props, () => onUpdateRef.current?.()),
     [props],
   );
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -66,13 +69,15 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       // changes), but `setNativeView` already optimizes for that.
       node.setNativeView(instance);
 
-      // NOTE: This callback is only used by the JavaScript animation driver.
+      // NOTE: When using the JS animation driver, this callback is called on
+      // every animation frame. When using the native driver, this callback is
+      // called when the animation completes.
       onUpdateRef.current = () => {
         if (
           process.env.NODE_ENV === 'test' ||
           typeof instance !== 'object' ||
           typeof instance?.setNativeProps !== 'function' ||
-          isFabricInstance(instance)
+          (isFabricInstance(instance) && !useNativePropsInFabric)
         ) {
           // Schedule an update for this component to update `reducedProps`,
           // but do not compute it immediately. If a parent also updated, we
@@ -82,12 +87,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           // $FlowIgnore[not-a-function] - Assume it's still a function.
           // $FlowFixMe[incompatible-use]
           instance.setNativeProps(node.__getAnimatedValue());
-        } else {
-          throw new Error(
-            'Attempting to run JS driven animation on animated node ' +
-              'that has been moved to "native" earlier by starting an ' +
-              'animation with `useNativeDriver: true`',
-          );
         }
       };
 
@@ -110,7 +109,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [props, node],
+    [props, node, useNativePropsInFabric],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 

package/Libraries/AppState/AppState.d.ts

@@ -24,7 +24,7 @@ import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter'
  * App States
  *      active - The app is running in the foreground
  *      background - The app is running in the background. The user is either in another app or on the home screen
- *      inactive [iOS] - This is a transition state that currently never happens for typical React Native apps.
+ *      inactive [iOS] - This is a transition state that happens when the app launches, is asking for permissions or when a call or SMS message is received.
  *      unknown [iOS] - Initial value until the current app state is determined
  *      extension [iOS] - The app is running as an app extension
  *

package/Libraries/AppState/NativeAppState.js

@@ -12,12 +12,16 @@ import type {TurboModule} from '../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
+export type AppStateConstants = {|
+  initialAppState: string,
+|};
+
+export type AppState = {|app_state: string|};
+
 export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    initialAppState: string,
-  |};
+  +getConstants: () => AppStateConstants;
   +getCurrentAppState: (
-    success: (appState: {|app_state: string|}) => void,
+    success: (appState: AppState) => void,
     error: (error: Object) => void,
   ) => void;
 

package/Libraries/AppTheme/AppTheme.js

@@ -15,7 +15,7 @@ import NativeAppTheme, {
   type HighContrastColors,
 } from './NativeAppTheme';
 
-// Default values here are used in jest environment, or when native module otherwise not availiable
+// Default values here are used in jest environment, or when native module otherwise not available
 let _isHighContrast = false;
 let _highContrastColors = {
   ButtonFaceColor: '',
@@ -38,7 +38,7 @@ type NativeAppThemeEventDefinitions = {
 };
 
 // $FlowFixMe[underconstrained-implicit-instantiation]
-const _notifHandlers = new Map();
+const _notifyHandlers = new Map();
 
 if (NativeAppTheme) {
   _isHighContrast = NativeAppTheme.getConstants().isHighContrast;
@@ -75,16 +75,16 @@ module.exports = {
     event: AppThemeEvent,
   ): EventSubscription {
     const listener = eventEmitter.addListener(eventName, event);
-    _notifHandlers.set(eventName, listener);
+    _notifyHandlers.set(eventName, listener);
     return listener;
   },
 
   removeListener(eventName: 'highContrastChanged', event: AppThemeEvent): void {
-    const listener = _notifHandlers.get(eventName);
+    const listener = _notifyHandlers.get(eventName);
     if (!listener) {
       return;
     }
     listener.remove();
-    _notifHandlers.delete(eventName);
+    _notifyHandlers.delete(eventName);
   },
 };

package/Libraries/BatchedBridge/MessageQueue.js

@@ -388,10 +388,13 @@ class MessageQueue {
 
   __callReactNativeMicrotasks() {
     Systrace.beginEvent('JSTimers.callReactNativeMicrotasks()');
-    if (this._reactNativeMicrotasksCallback != null) {
-      this._reactNativeMicrotasksCallback();
+    try {
+      if (this._reactNativeMicrotasksCallback != null) {
+        this._reactNativeMicrotasksCallback();
+      }
+    } finally {
+      Systrace.endEvent();
     }
-    Systrace.endEvent();
   }
 
   __callFunction(module: string, method: string, args: mixed[]): void {
@@ -402,31 +405,35 @@ class MessageQueue {
     } else {
       Systrace.beginEvent(`${module}.${method}(...)`);
     }
-    if (this.__spy) {
-      this.__spy({type: TO_JS, module, method, args});
-    }
-    const moduleMethods = this.getCallableModule(module);
-    if (!moduleMethods) {
-      const callableModuleNames = Object.keys(this._lazyCallableModules);
-      const n = callableModuleNames.length;
-      const callableModuleNameList = callableModuleNames.join(', ');
-
-      // TODO(T122225939): Remove after investigation: Why are we getting to this line in bridgeless mode?
-      const isBridgelessMode = global.RN$Bridgeless === true ? 'true' : 'false';
-      invariant(
-        false,
-        `Failed to call into JavaScript module method ${module}.${method}(). Module has not been registered as callable. Bridgeless Mode: ${isBridgelessMode}. Registered callable JavaScript modules (n = ${n}): ${callableModuleNameList}.
-        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
-      );
-    }
-    if (!moduleMethods[method]) {
-      invariant(
-        false,
-        `Failed to call into JavaScript module method ${module}.${method}(). Module exists, but the method is undefined.`,
-      );
+    try {
+      if (this.__spy) {
+        this.__spy({type: TO_JS, module, method, args});
+      }
+      const moduleMethods = this.getCallableModule(module);
+      if (!moduleMethods) {
+        const callableModuleNames = Object.keys(this._lazyCallableModules);
+        const n = callableModuleNames.length;
+        const callableModuleNameList = callableModuleNames.join(', ');
+
+        // TODO(T122225939): Remove after investigation: Why are we getting to this line in bridgeless mode?
+        const isBridgelessMode =
+          global.RN$Bridgeless === true ? 'true' : 'false';
+        invariant(
+          false,
+          `Failed to call into JavaScript module method ${module}.${method}(). Module has not been registered as callable. Bridgeless Mode: ${isBridgelessMode}. Registered callable JavaScript modules (n = ${n}): ${callableModuleNameList}.
+          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
+        );
+      }
+      if (!moduleMethods[method]) {
+        invariant(
+          false,
+          `Failed to call into JavaScript module method ${module}.${method}(). Module exists, but the method is undefined.`,
+        );
+      }
+      moduleMethods[method].apply(moduleMethods, args);
+    } finally {
+      Systrace.endEvent();
     }
-    moduleMethods[method].apply(moduleMethods, args);
-    Systrace.endEvent();
   }
 
   __invokeCallback(cbID: number, args: mixed[]): void {
@@ -465,16 +472,18 @@ class MessageQueue {
       );
     }
 
-    if (!callback) {
-      return;
-    }
-
-    this._successCallbacks.delete(callID);
-    this._failureCallbacks.delete(callID);
-    callback(...args);
+    try {
+      if (!callback) {
+        return;
+      }
 
-    if (__DEV__) {
-      Systrace.endEvent();
+      this._successCallbacks.delete(callID);
+      this._failureCallbacks.delete(callID);
+      callback(...args);
+    } finally {
+      if (__DEV__) {
+        Systrace.endEvent();
+      }
     }
   }
 }

package/Libraries/Blob/Blob.js

@@ -57,7 +57,10 @@ class Blob {
    * Currently we only support creating Blobs from other Blobs.
    * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
    */
-  constructor(parts: Array<Blob | string> = [], options?: BlobOptions) {
+  constructor(
+    parts: Array<$ArrayBufferView | ArrayBuffer | Blob | string> = [],
+    options?: BlobOptions,
+  ) {
     const BlobManager = require('./BlobManager');
     this.data = BlobManager.createFromParts(parts, options).data;
   }
@@ -81,7 +84,7 @@ class Blob {
     return this._data;
   }
 
-  slice(start?: number, end?: number): Blob {
+  slice(start?: number, end?: number, contentType: string = ''): Blob {
     const BlobManager = require('./BlobManager');
     let {offset, size} = this.data;
 
@@ -109,6 +112,7 @@ class Blob {
       blobId: this.data.blobId,
       offset,
       size,
+      type: contentType,
       /* Since `blob.slice()` creates a new view onto the same binary
        * data as the original blob, we should re-use the same collector
        * object so that the underlying resource gets deallocated when

package/Libraries/Blob/BlobManager.js

@@ -11,6 +11,7 @@
 import type {BlobCollector, BlobData, BlobOptions} from './BlobTypes';
 
 import NativeBlobModule from './NativeBlobModule';
+import {fromByteArray} from 'base64-js';
 import invariant from 'invariant';
 
 const Blob = require('./Blob');
@@ -59,22 +60,20 @@ class BlobManager {
    * Create blob from existing array of blobs.
    */
   static createFromParts(
-    parts: Array<Blob | string>,
+    parts: Array<$ArrayBufferView | ArrayBuffer | Blob | string>,
     options?: BlobOptions,
   ): Blob {
     invariant(NativeBlobModule, 'NativeBlobModule is available.');
 
     const blobId = uuidv4();
     const items = parts.map(part => {
-      if (
-        part instanceof ArrayBuffer ||
-        (global.ArrayBufferView && part instanceof global.ArrayBufferView)
-      ) {
-        throw new Error(
-          "Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported",
-        );
-      }
-      if (part instanceof Blob) {
+      if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
+        return {
+          // $FlowFixMe[incompatible-cast]
+          data: fromByteArray(new Uint8Array((part: ArrayBuffer))),
+          type: 'string',
+        };
+      } else if (part instanceof Blob) {
         return {
           data: part.data,
           type: 'blob',

package/Libraries/Blob/BlobRegistry.js

@@ -8,27 +8,32 @@
  * @format
  */
 
-const registry: {[key: string]: number, ...} = {};
+const registry: Map<string, number> = new Map();
 
 const register = (id: string) => {
-  if (registry[id]) {
-    registry[id]++;
+  const used = registry.get(id);
+
+  if (used != null) {
+    registry.set(id, used + 1);
   } else {
-    registry[id] = 1;
+    registry.set(id, 1);
   }
 };
 
 const unregister = (id: string) => {
-  if (registry[id]) {
-    registry[id]--;
-    if (registry[id] <= 0) {
-      delete registry[id];
+  const used = registry.get(id);
+
+  if (used != null) {
+    if (used <= 1) {
+      registry.delete(id);
+    } else {
+      registry.set(id, used - 1);
     }
   }
 };
 
 const has = (id: string): number | boolean => {
-  return registry[id] && registry[id] > 0;
+  return registry.get(id) || false;
 };
 
 module.exports = {

package/Libraries/Blob/File.js

@@ -23,7 +23,7 @@ class File extends Blob {
    * Constructor for JS consumers.
    */
   constructor(
-    parts: Array<Blob | string>,
+    parts: Array<$ArrayBufferView | ArrayBuffer | Blob | string>,
     name: string,
     options?: BlobOptions,
   ) {

package/Libraries/Blob/FileReader.js

@@ -12,8 +12,7 @@ import type Blob from './Blob';
 
 import NativeFileReaderModule from './NativeFileReaderModule';
 import {toByteArray} from 'base64-js';
-
-const EventTarget = require('event-target-shim');
+import EventTarget from 'event-target-shim';
 
 type ReadyState =
   | 0 // EMPTY

package/Libraries/Components/Clipboard/Clipboard.d.ts

@@ -14,15 +14,15 @@ export interface ClipboardStatic {
 
 /**
  * Clipboard has been extracted from react-native core and will be removed in a future release.
- * It can now be installed and imported from `@react-native-community/clipboard` instead of 'react-native'.
- * @see https://github.com/react-native-community/clipboard
+ * It can now be installed and imported from `@react-native-clipboard/clipboard` instead of 'react-native'.
+ * @see https://github.com/react-native-clipboard/clipboard
  * @deprecated
  */
 export const Clipboard: ClipboardStatic;
 /**
  * Clipboard has been extracted from react-native core and will be removed in a future release.
- * It can now be installed and imported from `@react-native-community/clipboard` instead of 'react-native'.
- * @see https://github.com/react-native-community/clipboard
+ * It can now be installed and imported from `@react-native-clipboard/clipboard` instead of 'react-native'.
+ * @see https://github.com/react-native-clipboard/clipboard
  * @deprecated
  */
 export type Clipboard = ClipboardStatic;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -181,7 +181,9 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       ...props
     } = this.props;
     const drawStatusBar =
-      Platform.Version >= 21 && this.props.statusBarBackgroundColor != null;
+      Platform.OS === 'android' &&
+      Platform.Version >= 21 &&
+      this.props.statusBarBackgroundColor != null;
     const drawerViewWrapper = (
       <View
         style={[

package/Libraries/Components/Glyph/Glyph.js

@@ -36,7 +36,7 @@ export const Glyph: React.AbstractComponent<
   const nativeSwitchRef = React.useRef<React.ElementRef<
     typeof GlyphNativeComponent,
   > | null>(null);
-
+  // $FlowFixMe[incompatible-call]
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
   return <GlyphNativeComponent {...props} ref={ref} />;