@office-iss/react-native-win32 0.0.0-canary.274 → 0.0.0-canary.276

package/Libraries/Core/ExceptionsManager.js

@@ -121,6 +121,12 @@ function reportException(
     const NativeExceptionsManager =
       require('./NativeExceptionsManager').default;
     if (NativeExceptionsManager) {
+      if (isFatal) {
+        if (global.RN$hasHandledFatalException?.()) {
+          return;
+        }
+        global.RN$notifyOfFatalException?.();
+      }
       NativeExceptionsManager.reportException(data);
     }
   }
@@ -177,10 +183,7 @@ function reactConsoleErrorHandler(...args) {
   if (!console.reportErrorsAsExceptions) {
     return;
   }
-  if (
-    inExceptionHandler ||
-    (global.RN$inExceptionHandler && global.RN$inExceptionHandler())
-  ) {
+  if (inExceptionHandler || global.RN$inExceptionHandler?.()) {
     // The fundamental trick here is that are multiple entry point to logging errors:
     // (see D19743075 for more background)
     //

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 77,
   patch: 0,
-  prerelease: 'nightly-20241031-3a01a0c9c',
+  prerelease: 'nightly-20241125-4cffff35e',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpErrorHandling.js

@@ -10,24 +10,26 @@
 
 'use strict';
 
-/**
- * Sets up the console and exception handling (redbox) for React Native.
- * You can use this module directly, or just require InitializeCore.
- */
-const ExceptionsManager = require('./ExceptionsManager');
-ExceptionsManager.installConsoleErrorReporter();
+if (global.RN$useAlwaysAvailableJSErrorHandling !== true) {
+  /**
+   * Sets up the console and exception handling (redbox) for React Native.
+   * You can use this module directly, or just require InitializeCore.
+   */
+  const ExceptionsManager = require('./ExceptionsManager');
+  ExceptionsManager.installConsoleErrorReporter();
 
-// Set up error handler
-if (!global.__fbDisableExceptionsManager) {
-  const handleError = (e: mixed, isFatal: boolean) => {
-    try {
-      ExceptionsManager.handleException(e, isFatal);
-    } catch (ee) {
-      console.log('Failed to print error: ', ee.message);
-      throw e;
-    }
-  };
+  // Set up error handler
+  if (!global.__fbDisableExceptionsManager) {
+    const handleError = (e: mixed, isFatal: boolean) => {
+      try {
+        ExceptionsManager.handleException(e, isFatal);
+      } catch (ee) {
+        console.log('Failed to print error: ', ee.message);
+        throw e;
+      }
+    };
 
-  const ErrorUtils = require('../vendor/core/ErrorUtils');
-  ErrorUtils.setGlobalHandler(handleError);
+    const ErrorUtils = require('../vendor/core/ErrorUtils');
+    ErrorUtils.setGlobalHandler(handleError);
+  }
 }

package/Libraries/Core/setUpTimers.js

@@ -26,18 +26,10 @@ const isEventLoopEnabled = (() => {
     return false;
   }
 
-  if (NativeReactNativeFeatureFlags.disableEventLoopOnBridgeless == null) {
-    // Flags not unified yet
-    return (
-      ReactNativeFeatureFlags.useModernRuntimeScheduler() &&
-      ReactNativeFeatureFlags.enableMicrotasks()
-    );
-  } else {
-    return (
-      ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
-      !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
-    );
-  }
+  return (
+    ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
+    !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
+  );
 })();
 
 // In bridgeless mode, timers are host functions installed from cpp.

package/Libraries/Image/Image.android.js

@@ -133,7 +133,6 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       width: undefined,
       height: undefined,
     };
-    const defaultSource = resolveAssetSource(props.defaultSource);
     const loadingIndicatorSource = resolveAssetSource(
       props.loadingIndicatorSource,
     );
@@ -179,7 +178,6 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
       headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
-      defaultSrc: defaultSource ? defaultSource.uri : null,
       loadingIndicatorSrc: loadingIndicatorSource
         ? loadingIndicatorSource.uri
         : null,

package/Libraries/Image/Image.d.ts

@@ -200,6 +200,8 @@ export interface ImagePropsBase
    * 'center': Scale the image down so that it is completely visible,
    * if bigger than the area of the view.
    * The image will not be scaled up.
+   *
+   * 'none': Do not resize the image. The image will be displayed at its intrinsic size.
    */
   resizeMode?: ImageResizeMode | undefined;
 

package/Libraries/Image/ImageProps.js

@@ -19,6 +19,7 @@ import type {
 } from '../StyleSheet/StyleSheet';
 import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
 import typeof Image from './Image';
+import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource} from './ImageSource';
 import type {ElementRef, Node, RefSetter} from 'react';
 
@@ -234,7 +235,7 @@ export type ImageProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/image#resizemode
    */
-  resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
+  resizeMode?: ?ImageResizeMode,
 
   /**
    * A unique identifier for this element to be used in UI Automation

package/Libraries/Image/ImageResizeMode.d.ts

@@ -12,7 +12,8 @@ export type ImageResizeMode =
   | 'contain'
   | 'stretch'
   | 'repeat'
-  | 'center';
+  | 'center'
+  | 'none';
 
 /**
  * @see ImageResizeMode.js
@@ -46,4 +47,10 @@ export interface ImageResizeModeStatic {
    * image will keep it's size and aspect ratio.
    */
   repeat: ImageResizeMode;
+
+  /**
+   * none - The image will be displayed at its intrinsic size, which means the
+   * image will not be scaled up or down.
+   */
+  none: ImageResizeMode;
 }

package/Libraries/Image/ImageResizeMode.js

@@ -33,4 +33,7 @@ export type ImageResizeMode =
 
   // Resize by stretching it to fill the entire frame of the view without
   // clipping. This may change the aspect ratio of the image, distorting it.
-  | 'stretch';
+  | 'stretch'
+
+  // The image will not be resized at all.
+  | 'none';

package/Libraries/Image/ImageSource.d.ts

@@ -50,8 +50,6 @@ export interface ImageURISource {
    * its age or expiration date. If there is no existing data in the cache corresponding
    * to a URL load request, no attempt is made to load the data from the originating source,
    * and the load is considered to have failed.
-   *
-   * @platform ios
    */
   cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined;
   /**

package/Libraries/Image/ImageSource.js

@@ -65,8 +65,6 @@ export interface ImageURISource {
    * its age or expiration date. If there is no existing data in the cache corresponding
    * to a URL load request, no attempt is made to load the data from the originating source,
    * and the load is considered to have failed.
-   *
-   * @platform ios
    */
   +cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached');
 

package/Libraries/Image/ImageUtils.js

@@ -8,15 +8,18 @@
  * @format
  */
 
-type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+import type {ImageResizeMode} from './ImageResizeMode';
 
-const objectFitMap: {[string]: ResizeMode} = {
+const objectFitMap: {[string]: ImageResizeMode} = {
   contain: 'contain',
   cover: 'cover',
   fill: 'stretch',
   'scale-down': 'contain',
+  none: 'none',
 };
 
-export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+export function convertObjectFitToResizeMode(
+  objectFit: ?string,
+): ?ImageResizeMode {
   return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -82,6 +82,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         },
         validAttributes: {
           blurRadius: true,
+          defaultSource: {
+            process: require('./resolveAssetSource'),
+          },
           internal_analyticTag: true,
           resizeMethod: true,
           resizeMode: true,
@@ -100,7 +103,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           headers: true,
           shouldNotifyLoadEvents: true,
-          defaultSrc: true,
           overlayColor: {
             process: require('../StyleSheet/processColor').default,
           },

package/Libraries/Inspector/Inspector.win32.js

@@ -21,7 +21,7 @@ import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
-const ReactNative = require('../Renderer/shims/ReactNative');
+const ReactNative = require('../Renderer/shims/ReactNative').default;
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Platform = require('../Utilities/Platform');

package/Libraries/Interaction/InteractionManager.js

@@ -10,6 +10,7 @@
 
 import type {Task} from './TaskQueue';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge');
@@ -208,4 +209,8 @@ function _processUpdate() {
   _deleteInteractionSet.clear();
 }
 
-module.exports = InteractionManager;
+module.exports = (
+  ReactNativeFeatureFlags.disableInteractionManager()
+    ? require('./InteractionManagerStub')
+    : InteractionManager
+) as typeof InteractionManager;

package/Libraries/Interaction/InteractionManagerStub.js

@@ -0,0 +1,176 @@
+/**
+ * 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 strict
+ * @format
+ */
+
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
+
+const invariant = require('invariant');
+
+export type Handle = number;
+
+type Task =
+  | {
+      name: string,
+      run: () => void,
+    }
+  | {
+      name: string,
+      gen: () => Promise<void>,
+    }
+  | (() => void);
+
+/**
+ * InteractionManager allows long-running work to be scheduled after any
+ * interactions/animations have completed. In particular, this allows JavaScript
+ * animations to run smoothly.
+ *
+ * Applications can schedule tasks to run after interactions with the following:
+ *
+ * ```
+ * InteractionManager.runAfterInteractions(() => {
+ *   // ...long-running synchronous task...
+ * });
+ * ```
+ *
+ * Compare this to other scheduling alternatives:
+ *
+ * - requestAnimationFrame(): for code that animates a view over time.
+ * - setImmediate/setTimeout(): run code later, note this may delay animations.
+ * - runAfterInteractions(): run code later, without delaying active animations.
+ *
+ * The touch handling system considers one or more active touches to be an
+ * 'interaction' and will delay `runAfterInteractions()` callbacks until all
+ * touches have ended or been cancelled.
+ *
+ * InteractionManager also allows applications to register animations by
+ * creating an interaction 'handle' on animation start, and clearing it upon
+ * completion:
+ *
+ * ```
+ * var handle = InteractionManager.createInteractionHandle();
+ * // run animation... (`runAfterInteractions` tasks are queued)
+ * // later, on animation completion:
+ * InteractionManager.clearInteractionHandle(handle);
+ * // queued tasks run if all handles were cleared
+ * ```
+ *
+ * `runAfterInteractions` takes either a plain callback function, or a
+ * `PromiseTask` object with a `gen` method that returns a `Promise`.  If a
+ * `PromiseTask` is supplied, then it is fully resolved (including asynchronous
+ * dependencies that also schedule more tasks via `runAfterInteractions`) before
+ * starting on the next task that might have been queued up synchronously
+ * earlier.
+ *
+ * By default, queued tasks are executed together in a loop in one
+ * `setImmediate` batch. If `setDeadline` is called with a positive number, then
+ * tasks will only be executed until the deadline (in terms of js event loop run
+ * time) approaches, at which point execution will yield via setTimeout,
+ * allowing events such as touches to start interactions and block queued tasks
+ * from executing, making apps more responsive.
+ *
+ * @deprecated
+ */
+const InteractionManagerStub = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete',
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed. Returns a cancellable
+   * "promise".
+   *
+   * @deprecated
+   */
+  runAfterInteractions(task: ?Task): {
+    then: <U>(
+      onFulfill?: ?(void) => ?(Promise<U> | U),
+      onReject?: ?(error: mixed) => ?(Promise<U> | U),
+    ) => Promise<U>,
+    cancel: () => void,
+    ...
+  } {
+    let immediateID: ?$FlowIssue;
+    const promise = new Promise((resolve, reject) => {
+      immediateID = setImmediate(() => {
+        if (typeof task === 'object' && task !== null) {
+          if (typeof task.gen === 'function') {
+            task.gen().then(resolve, reject);
+          } else if (typeof task.run === 'function') {
+            try {
+              task.run();
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new TypeError(`Task "${task.name}" missing gen or run.`));
+          }
+        } else if (typeof task === 'function') {
+          try {
+            task();
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        } else {
+          reject(new TypeError('Invalid task of type: ' + typeof task));
+        }
+      });
+    });
+
+    return {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      then: promise.then.bind(promise),
+      cancel() {
+        clearImmediate(immediateID);
+      },
+    };
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   *
+   * @deprecated
+   */
+  createInteractionHandle(): Handle {
+    return -1;
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   *
+   * @deprecated
+   */
+  clearInteractionHandle(handle: Handle) {
+    invariant(!!handle, 'InteractionManager: Must provide a handle to clear.');
+  },
+
+  /**
+   * @deprecated
+   */
+  addListener(): EventSubscription {
+    return {
+      remove() {},
+    };
+  },
+
+  /**
+   * A positive number will use setTimeout to schedule any tasks after the
+   * eventLoopRunningTime hits the deadline value, otherwise all tasks will be
+   * executed in one setImmediate batch (default).
+   *
+   * @deprecated
+   */
+  setDeadline(deadline: number) {
+    // Do nothing.
+  },
+};
+
+module.exports = InteractionManagerStub;

package/Libraries/Lists/FlatList.js

@@ -480,10 +480,10 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     this._checkProps(this.props);
   }
 
-  _listRef: ?React.ElementRef<typeof VirtualizedList>;
+  _listRef: ?VirtualizedList;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
 
-  _captureRef = (ref: ?React.ElementRef<typeof VirtualizedList>) => {
+  _captureRef = (ref: ?VirtualizedList) => {
     this._listRef = ref;
   };
 

package/Libraries/LogBox/LogBox.js

@@ -55,7 +55,7 @@ if (__DEV__) {
       if (global.RN$registerExceptionListener != null) {
         global.RN$registerExceptionListener(
           (error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
-            if (!error.isFatal) {
+            if (global.RN$isRuntimeReady?.() || !error.isFatal) {
               error.preventDefault();
               addException(error);
             }

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -37,6 +37,8 @@ const COLORS = {
   'ansi-bright-white': 'rgb(247, 247, 247)',
 };
 
+const LRM = '\u200E'; // Left-to-Right Mark
+
 export default function Ansi({
   text,
   style,
@@ -80,25 +82,28 @@ export default function Ansi({
   };
 
   return (
-    <View>
+    <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          {items.map((bundle, key) => {
-            const textStyle =
-              bundle.fg && COLORS[bundle.fg]
-                ? {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                    color: bundle.fg && COLORS[bundle.fg],
-                  }
-                : {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                  };
-            return (
-              <Text style={[style, textStyle]} key={key}>
-                {getText(bundle.content, key)}
-              </Text>
-            );
-          })}
+          <Text>
+            {LRM}
+            {items.map((bundle, key) => {
+              const textStyle =
+                bundle.fg && COLORS[bundle.fg]
+                  ? {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                      color: bundle.fg && COLORS[bundle.fg],
+                    }
+                  : {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                    };
+              return (
+                <Text style={[style, textStyle]} key={key}>
+                  {getText(bundle.content, key)}
+                </Text>
+              );
+            })}
+          </Text>
         </View>
       ))}
     </View>
@@ -106,6 +111,10 @@ export default function Ansi({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    minWidth: '100%',
+    direction: 'ltr',
+  },
   line: {
     flexDirection: 'row',
   },

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.win32.js

@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

package/Libraries/Modal/Modal.d.ts

@@ -101,6 +101,11 @@ export interface ModalPropsAndroid {
    *  Determines whether your modal should go under the system statusbar.
    */
   statusBarTranslucent?: boolean | undefined;
+
+  /**
+   *  Determines whether your modal should go under the system navigationbar.
+   */
+  navigationBarTranslucent?: boolean | undefined;
 }
 
 export type ModalProps = ModalBaseProps &

package/Libraries/Modal/Modal.js

@@ -95,6 +95,14 @@ export type Props = $ReadOnly<{|
    */
   statusBarTranslucent?: ?boolean,
 
+  /**
+   * The `navigationBarTranslucent` prop determines whether your modal should go under
+   * the system navigationbar.
+   *
+   * See https://reactnative.dev/docs/modal.html#navigationbartranslucent-android
+   */
+  navigationBarTranslucent?: ?boolean,
+
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
    * acceleration for the underlying window.
@@ -176,6 +184,14 @@ function confirmProps(props: Props) {
         `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`,
       );
     }
+    if (
+      props.navigationBarTranslucent === true &&
+      props.statusBarTranslucent !== true
+    ) {
+      console.warn(
+        'Modal with translucent navigation bar and without translucent status bar is not supported.',
+      );
+    }
   }
 }
 
@@ -301,6 +317,7 @@ class Modal extends React.Component<Props, State> {
         onDismiss={onDismiss}
         visible={this.props.visible}
         statusBarTranslucent={this.props.statusBarTranslucent}
+        navigationBarTranslucent={this.props.navigationBarTranslucent}
         identifier={this._identifier}
         style={styles.modal}
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters

package/Libraries/NewAppScreen/components/HermesBadge.js

@@ -40,8 +40,8 @@ const HermesBadge = (): Node => {
 const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
-    top: 8,
     right: 12,
+    bottom: 8,
   },
   badgeText: {
     fontSize: 14,