@office-iss/react-native-win32 0.0.0-canary.259 → 0.0.0-canary.260

package/Libraries/Components/TextInput/TextInput.js

@@ -9,6 +9,7 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -1534,10 +1535,18 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  let style = flattenStyle<TextStyleProp>(props.style);
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe
-    style = [style, {fontWeight: style.fontWeight.toString()}];
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    _style = [
+      _style,
+      {
+        fontWeight:
+          // $FlowFixMe[incompatible-cast]
+          (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']),
+      },
+    ];
   }
 
   if (Platform.OS === 'ios') {
@@ -1548,10 +1557,10 @@ function InternalTextInput(props: Props): React.Node {
 
     const useMultilineDefaultStyle =
       props.multiline === true &&
-      (style == null ||
-        (style.padding == null &&
-          style.paddingVertical == null &&
-          style.paddingTop == null));
+      (flattenedStyle == null ||
+        (flattenedStyle.padding == null &&
+          flattenedStyle.paddingVertical == null &&
+          flattenedStyle.paddingTop == null));
 
     textInput = (
       <RCTTextInputView
@@ -1578,7 +1587,7 @@ function InternalTextInput(props: Props): React.Node {
         selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
-          style,
+          _style,
         )}
         text={text}
       />
@@ -1645,7 +1654,7 @@ function InternalTextInput(props: Props): React.Node {
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         placeholder={placeholder}
-        style={style}
+        style={_style}
         text={text}
         textBreakStrategy={props.textBreakStrategy}
       />

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -9,6 +9,7 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -1641,10 +1642,18 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  let style = flattenStyle<TextStyleProp>(props.style);
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe
-    style = [style, {fontWeight: style.fontWeight.toString()}];
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    _style = [
+      _style,
+      {
+        fontWeight:
+          // $FlowFixMe[incompatible-cast]
+          (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']),
+      },
+    ];
   }
 
   if (Platform.OS === 'ios') {
@@ -1655,10 +1664,10 @@ function InternalTextInput(props: Props): React.Node {
 
     const useMultilineDefaultStyle =
       props.multiline === true &&
-      (style == null ||
-        (style.padding == null &&
-          style.paddingVertical == null &&
-          style.paddingTop == null));
+      (flattenedStyle == null ||
+        (flattenedStyle.padding == null &&
+          flattenedStyle.paddingVertical == null &&
+          flattenedStyle.paddingTop == null));
 
     textInput = (
       <RCTTextInputView
@@ -1686,7 +1695,7 @@ function InternalTextInput(props: Props): React.Node {
         selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
-          style,
+          _style,
         )}
         text={text}
       />
@@ -1754,7 +1763,7 @@ function InternalTextInput(props: Props): React.Node {
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         placeholder={placeholder}
-        style={style}
+        style={_style}
         text={text}
         textBreakStrategy={props.textBreakStrategy}
       />

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -11,6 +11,7 @@
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
+import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
@@ -126,11 +127,21 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   experimental_mixBlendMode: true,
 
+  /**
+   * Isolation
+   */
+  isolation: true,
+
   /*
    * BoxShadow
    */
   experimental_boxShadow: {process: processBoxShadow},
 
+  /**
+   * Linear Gradient
+   */
+  experimental_backgroundImage: {process: processBackgroundImage},
+
   /**
    * View
    */

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -22,6 +22,8 @@ const UIView = {
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

package/Libraries/Components/View/ReactNativeViewAttributes.win32.js

@@ -22,6 +22,8 @@ const UIView = {
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -366,6 +366,21 @@ export interface AccessibilityPropsIOS {
    * @platform ios
    */
   accessibilityLanguage?: string | undefined;
+
+  /**
+   * A Boolean value that indicates whether or not to show the item in the large content viewer.
+   * Available on iOS 13.0+
+   * https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer
+   * @platform ios
+   */
+  accessibilityShowsLargeContentViewer?: boolean | undefined;
+
+  /**
+   * When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer.
+   * https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle
+   * @platform ios
+   */
+  accessibilityLargeContentTitle?: string | undefined;
 }
 
 // [Win32]

package/Libraries/Components/View/ViewNativeComponent.js

@@ -94,11 +94,17 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBlockStartColor: {
             process: require('../../StyleSheet/processColor').default,
           },
+          experimental_boxShadow: {
+            process: require('../../StyleSheet/processBoxShadow').default,
+          },
 
           focusable: true,
           overflow: true,
           backfaceVisibility: true,
           experimental_layoutConformance: true,
+          experimental_backgroundImage: {
+            process: require('../../StyleSheet/processBackgroundImage').default,
+          },
         },
       }
     : {

package/Libraries/Components/View/ViewPropTypes.js

@@ -415,6 +415,20 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
   /**
    * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
    * should be accessible to the user.

package/Libraries/Components/View/ViewPropTypes.win32.js

@@ -416,6 +416,20 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
   /**
    * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
    * should be accessible to the user.

package/Libraries/Core/InitializeCore.js

@@ -29,7 +29,7 @@
 const start = Date.now();
 
 require('./setUpGlobals');
-require('../../src/private/core/setUpDOM');
+require('../../src/private/setup/setUpDOM').default();
 require('./setUpPerformance');
 require('./setUpErrorHandling');
 require('./polyfillPromise');

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 76,
   patch: 0,
-  prerelease: 'nightly-20240719-6d56cea28',
+  prerelease: 'nightly-20240816-17017d2b8',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpErrorHandling.js

@@ -21,7 +21,13 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      ExceptionsManager.handleException(e, isFatal);
+      // TODO(T196834299): We should really use a c++ turbomodule for this
+      if (
+        !global.RN$handleException ||
+        !global.RN$handleException(e, isFatal)
+      ) {
+        ExceptionsManager.handleException(e, isFatal);
+      }
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

package/Libraries/Image/AssetSourceResolver.js

@@ -18,7 +18,10 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
+import type {
+  AssetDestPathResolver,
+  PackagerAsset,
+} from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
@@ -76,6 +79,10 @@ class AssetSourceResolver {
       return this.assetServerURL();
     }
 
+    if (this.asset.resolver != null) {
+      return this.getAssetUsingResolver(this.asset.resolver);
+    }
+
     if (Platform.OS === 'android') {
       return this.isLoadedFromFileSystem()
         ? this.drawableFolderInBundle()
@@ -85,6 +92,26 @@ class AssetSourceResolver {
     }
   }
 
+  getAssetUsingResolver(resolver: AssetDestPathResolver): ResolvedAssetSource {
+    switch (resolver) {
+      case 'android':
+        return this.isLoadedFromFileSystem()
+          ? this.drawableFolderInBundle()
+          : this.resourceIdentifierWithoutScale();
+      case 'generic':
+        return this.scaledAssetURLNearBundle();
+      default:
+        throw new Error(
+          "Don't know how to get asset via provided resolver: " +
+            resolver +
+            '\nAsset: ' +
+            JSON.stringify(this.asset, null, '\t') +
+            '\nPossible resolvers are:' +
+            JSON.stringify(['android', 'generic'], null, '\t'),
+        );
+    }
+  }
+
   /**
    * Returns an absolute URL which can be used to fetch the asset
    * from the devserver

package/Libraries/Image/Image.android.js

@@ -150,24 +150,20 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       );
     }
 
-    let style;
+    let style: ImageStyleProp;
     let sources;
     if (Array.isArray(source)) {
-      style = flattenStyle<ImageStyleProp>([styles.base, props.style]);
+      style = [styles.base, props.style];
       sources = source;
     } else {
       const {uri} = source;
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]);
-      sources = [source];
       if (uri === '') {
         console.warn('source.uri should not be an empty string');
       }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
     }
 
     const {height, width, ...restProps} = props;
@@ -203,11 +199,10 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       },
     };
 
-    const objectFit = style?.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
     const resizeMode =
-      objectFit || props.resizeMode || style?.resizeMode || 'cover';
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
     const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 

package/Libraries/Image/Image.ios.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
@@ -112,38 +112,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/Image.win32.js

@@ -131,38 +131,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/ImageBackground.js

@@ -55,14 +55,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
 
   _viewRef: ?React.ElementRef<typeof View> = null;
 
-  _captureRef = (
-    ref: null | React$ElementRef<
-      React$AbstractComponent<
-        ViewProps,
-        React.ElementRef<HostComponent<ViewProps>>,
-      >,
-    >,
-  ) => {
+  _captureRef = (ref: null | React.ElementRef<HostComponent<ViewProps>>) => {
     this._viewRef = ref;
   };
 

package/Libraries/Image/ImageUtils.js

@@ -10,13 +10,13 @@
 
 type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
 
-export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
-  const objectFitMap = {
-    contain: 'contain',
-    cover: 'cover',
-    fill: 'stretch',
-    'scale-down': 'contain',
-  };
-  // $FlowFixMe[invalid-computed-prop]
-  return objectFitMap[objectFit];
+const objectFitMap: {[string]: ResizeMode} = {
+  contain: 'contain',
+  cover: 'cover',
+  fill: 'stretch',
+  'scale-down': 'contain',
+};
+
+export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+  return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -113,6 +113,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBottomRightRadius: true,
           borderTopRightRadius: true,
           loadingIndicatorSrc: true,
+          experimental_boxShadow: {
+            process: require('../StyleSheet/processBoxShadow').default,
+          },
         },
       }
     : {

package/Libraries/Inspector/NetworkOverlay.js

@@ -335,7 +335,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   _renderItem = ({
     item,
     index,
-  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+  }: RenderItemProps<NetworkRequestInfo>): React.MixedElement => {
     const tableRowViewStyle = [
       styles.tableRow,
       index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,

package/Libraries/Lists/FlatList.js

@@ -617,7 +617,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
     renderItem: ?RenderItemType<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,

package/Libraries/Lists/SectionList.js

@@ -33,7 +33,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */

package/Libraries/Lists/SectionListModern.js

@@ -34,7 +34,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */

package/Libraries/LogBox/Data/LogBoxData.js

@@ -18,6 +18,7 @@ import type {
   Message,
 } from './parseLogBoxLog';
 
+import NativeDebuggerSessionObserver from '../../../src/private/specs/modules/NativeDebuggerSessionObserver';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
@@ -75,6 +76,7 @@ let updateTimeout: $FlowFixMe | null = null;
 let _isDisabled = false;
 let _selectedIndex = -1;
 let hasShownFuseboxWarningsMigrationMessage = false;
+let hostTargetSessionObserverSubscription = null;
 
 let warningFilter: WarningFilter = function (format) {
   return {
@@ -196,11 +198,36 @@ function appendNewLog(newLog: LogBoxLog) {
 }
 
 export function addLog(log: LogData): void {
-  if (log.level === 'warn' && global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
-    // Under Fusebox, don't report warnings to LogBox.
-    showFuseboxWarningsMigrationMessageOnce();
+  if (
+    hostTargetSessionObserverSubscription == null &&
+    NativeDebuggerSessionObserver != null
+  ) {
+    hostTargetSessionObserverSubscription =
+      NativeDebuggerSessionObserver.subscribe(hasActiveSession => {
+        if (hasActiveSession) {
+          clearWarnings();
+        } else {
+          // Reset the flag so that we can show the message again if new warning was emitted
+          hasShownFuseboxWarningsMigrationMessage = false;
+        }
+      });
+  }
+
+  // If Host has Fusebox support
+  if (
+    log.level === 'warn' &&
+    global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__ &&
+    NativeDebuggerSessionObserver != null
+  ) {
+    // And there is no active debugging session
+    if (!NativeDebuggerSessionObserver.hasActiveSession()) {
+      showFuseboxWarningsMigrationMessageOnce();
+    }
+
+    // Don't show LogBox warnings when Host has active debugging session
     return;
   }
+
   const errorForStackTrace = new Error();
 
   // Parsing logs are expensive so we schedule this
@@ -484,7 +511,6 @@ function showFuseboxWarningsMigrationMessageOnce() {
         if (NativeDevSettings.openDebugger) {
           NativeDevSettings.openDebugger();
         }
-        clearWarnings();
       },
     }),
   );

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -170,6 +170,7 @@ const validAttributesForNonEventProps = {
     process: require('../StyleSheet/processFilter').default,
   },
   experimental_mixBlendMode: true,
+  isolation: true,
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},