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

package/.flowconfig

@@ -54,8 +54,6 @@
 .*/node_modules/sample-apps/.*
 .*/node_modules/playground/.*
 
-; Ignore templates for 'npx @react-native-community/cli init'
-<PROJECT_ROOT>/packages/react-native/template/.*
 <PROJECT_ROOT>/packages/react-native/sdks/.*
 
 ; Ignore the codegen e2e tests
@@ -67,6 +65,9 @@
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
 
+; Ignore cache files
+.*/node_modules/.cache*
+
 ; Ignore the src-win folder - flow files are combined with ones from react-native into the root Libraries folder
 .*/react-native-win32/src-win/.*
 
@@ -159,4 +160,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.243.0
+^0.244.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Wed, 28 Aug 2024 05:14:05 GMT",
+      "date": "Thu, 05 Sep 2024 05:13:08 GMT",
+      "version": "0.0.0-canary.261",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.261",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "34109996+chiaramooney@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "277d6f06a3e1bf1650cd9d1e7b4f22e0619968e9",
+            "comment": "Integrate 8/20"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Aug 2024 05:14:44 GMT",
       "version": "0.0.0-canary.260",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.260",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Wed, 28 Aug 2024 05:14:05 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Sep 2024 05:13:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.0.0-canary.260
+## 0.0.0-canary.261
 
-Wed, 28 Aug 2024 05:14:05 GMT
+Thu, 05 Sep 2024 05:13:08 GMT
 
 ### Changes
 
-- integrate 0.76.0-nightly-20240816-17017d2b8 (tatianakapos@microsoft.com)
+- Integrate 8/20 (34109996+chiaramooney@users.noreply.github.com)
 
+## 0.0.0-canary.260
+
+Wed, 28 Aug 2024 05:14:44 GMT
+
+### Changes
+
+- integrate 0.76.0-nightly-20240816-17017d2b8 (tatianakapos@microsoft.com)
+
 ## 0.0.0-canary.259
 
 Thu, 22 Aug 2024 05:24:27 GMT

package/Libraries/Core/ReactNativeVersion.js

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

package/Libraries/Lists/SectionListModern.js

@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {AbstractComponent, Element, ElementRef} from 'react';
+import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -56,7 +56,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -17,7 +17,6 @@ import type {
 import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
 import UIManager from '../ReactNative/UIManager';
 import * as ReactNativeViewConfigRegistry from '../Renderer/shims/ReactNativeViewConfigRegistry';
-import verifyComponentAttributeEquivalence from '../Utilities/verifyComponentAttributeEquivalence';
 import * as StaticViewConfigValidator from './StaticViewConfigValidator';
 import {createViewConfig} from './ViewConfig';
 import invariant from 'invariant';
@@ -35,7 +34,6 @@ let getRuntimeConfig;
 export function setRuntimeConfigProvider(
   runtimeConfigProvider: (name: string) => ?{
     native: boolean,
-    strict: boolean,
     verify: boolean,
   },
 ): void {
@@ -55,9 +53,8 @@ export function get<Config>(
   viewConfigProvider: () => PartialViewConfig,
 ): HostComponent<Config> {
   ReactNativeViewConfigRegistry.register(name, () => {
-    const {native, strict, verify} = getRuntimeConfig?.(name) ?? {
+    const {native, verify} = getRuntimeConfig?.(name) ?? {
       native: !global.RN$Bridgeless,
-      strict: false,
       verify: false,
     };
 
@@ -92,23 +89,19 @@ export function get<Config>(
         ? createViewConfig(viewConfigProvider())
         : viewConfig;
 
-      if (strict) {
-        const validationOutput = StaticViewConfigValidator.validate(
-          name,
-          nativeViewConfig,
-          staticViewConfig,
+      const validationOutput = StaticViewConfigValidator.validate(
+        name,
+        nativeViewConfig,
+        staticViewConfig,
+      );
+
+      if (validationOutput.type === 'invalid') {
+        console.error(
+          StaticViewConfigValidator.stringifyValidationResult(
+            name,
+            validationOutput,
+          ),
         );
-
-        if (validationOutput.type === 'invalid') {
-          console.error(
-            StaticViewConfigValidator.stringifyValidationResult(
-              name,
-              validationOutput,
-            ),
-          );
-        }
-      } else {
-        verifyComponentAttributeEquivalence(nativeViewConfig, staticViewConfig);
       }
     }
 

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -22,11 +22,6 @@ export type Difference =
       path: Array<string>,
       nativeValue: mixed,
       staticValue: mixed,
-    }
-  | {
-      type: 'unexpected',
-      path: Array<string>,
-      staticValue: mixed,
     };
 
 export type ValidationResult = ValidResult | InvalidResult;
@@ -90,8 +85,6 @@ export function stringifyValidationResult(
           return `- '${path.join('.')}' is missing.`;
         case 'unequal':
           return `- '${path.join('.')}' is the wrong value.`;
-        case 'unexpected':
-          return `- '${path.join('.')}' is present but not expected to be.`;
       }
     }),
     '',
@@ -145,20 +138,6 @@ function accumulateDifferences(
       });
     }
   }
-
-  for (const staticKey in staticObject) {
-    if (
-      !nativeObject.hasOwnProperty(staticKey) &&
-      // $FlowFixMe[invalid-computed-prop]
-      !isIgnored(staticObject[staticKey])
-    ) {
-      differences.push({
-        path: [...path, staticKey],
-        type: 'unexpected',
-        staticValue: staticObject[staticKey],
-      });
-    }
-  }
 }
 
 function ifObject(value: mixed): ?{...} {

package/Libraries/ReactNative/RendererImplementation.js

@@ -14,7 +14,7 @@ import type {
   Node,
 } from '../Renderer/shims/ReactNativeTypes';
 import type ReactFabricHostComponent from './ReactFabricPublicInstance/ReactFabricHostComponent';
-import type {Element, ElementRef, ElementType} from 'react';
+import type {ElementRef, ElementType} from 'react';
 
 import {
   onCaughtError,
@@ -28,7 +28,7 @@ export function renderElement({
   useFabric,
   useConcurrentRoot,
 }: {
-  element: Element<ElementType>,
+  element: React.MixedElement,
   rootTag: number,
   useFabric: boolean,
   useConcurrentRoot: boolean,

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,10 +7,15 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<4405023a5d82ddc01db31d8eb46a7aa0>>
+ * @generated SignedSource<<89361333bb6b688486e35849a9c669a6>>
  */
 
-import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
+import type {
+  ElementRef,
+  ElementType,
+  MixedElement,
+  AbstractComponent,
+} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -222,7 +227,7 @@ export type ReactNativeType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     options: ?RenderRootOptions,
@@ -257,7 +262,7 @@ export type ReactFabricType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -276,10 +276,10 @@ export type BlendMode =
 export type GradientValue = {
   type: 'linearGradient';
   // Angle or direction enums
-  direction: string | undefined;
-  colorStops: Array<{
+  direction?: string | undefined;
+  colorStops: ReadonlyArray<{
     color: ColorValue;
-    position: number | undefined;
+    positions?: ReadonlyArray<string[]> | undefined;
   }>;
 };
 

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -715,7 +715,7 @@ export type GradientValue = {
   direction?: string,
   colorStops: $ReadOnlyArray<{
     color: ____ColorValue_Internal,
-    position?: string,
+    positions?: $ReadOnlyArray<string>,
   }>,
 };
 

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -45,33 +45,34 @@ export default function processBackgroundImage(
     result = parseCSSLinearGradient(backgroundImage);
   } else if (Array.isArray(backgroundImage)) {
     for (const bgImage of backgroundImage) {
-      const processedColorStops = [];
+      const processedColorStops: Array<{
+        color: ProcessedColorValue,
+        position: number | null,
+      }> = [];
       for (let index = 0; index < bgImage.colorStops.length; index++) {
-        const stop = bgImage.colorStops[index];
-        const processedColor = processColor(stop.color);
-        let processedPosition: number | null = null;
-
-        // Currently we only support percentage and undefined value for color stop position.
-        if (typeof stop.position === 'undefined') {
-          processedPosition =
-            bgImage.colorStops.length === 1
-              ? 1
-              : index / (bgImage.colorStops.length - 1);
-        } else if (stop.position.endsWith('%')) {
-          processedPosition = parseFloat(stop.position) / 100;
-        } else {
-          // If a color stop position is invalid, return an empty array and do not apply gradient. Same as web.
+        const colorStop = bgImage.colorStops[index];
+        const processedColor = processColor(colorStop.color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
           return [];
         }
-
-        if (processedColor != null) {
+        if (colorStop.positions != null && colorStop.positions.length > 0) {
+          for (const position of colorStop.positions) {
+            if (position.endsWith('%')) {
+              processedColorStops.push({
+                color: processedColor,
+                position: parseFloat(position) / 100,
+              });
+            } else {
+              // If a position is invalid, return an empty array and do not apply gradient. Same as web.
+              return [];
+            }
+          }
+        } else {
           processedColorStops.push({
             color: processedColor,
-            position: processedPosition,
+            position: null,
           });
-        } else {
-          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
-          return [];
         }
       }
 
@@ -96,12 +97,14 @@ export default function processBackgroundImage(
         }
       }
 
+      const fixedColorStops = getFixedColorStops(processedColorStops);
+
       if (points != null) {
         result = result.concat({
           type: 'linearGradient',
           start: points.start,
           end: points.end,
-          colorStops: processedColorStops,
+          colorStops: fixedColorStops,
         });
       }
     }
@@ -123,7 +126,7 @@ function parseCSSLinearGradient(
     let points = TO_BOTTOM_START_END_POINTS;
     const trimmedDirection = parts[0].trim().toLowerCase();
     const colorStopRegex =
-      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+([0-9.]+%?))?\s*/gi;
+      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
 
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
       const angle = parseAngle(trimmedDirection);
@@ -154,32 +157,50 @@ function parseCSSLinearGradient(
     const fullColorStopsStr = parts.join(',');
     let colorStopMatch;
     while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
-      const [, color, position] = colorStopMatch;
+      const [, color, position1, position2] = colorStopMatch;
       const processedColor = processColor(color.trim().toLowerCase());
-      if (
-        processedColor != null &&
-        (typeof position === 'undefined' || position.endsWith('%'))
-      ) {
+      if (processedColor == null) {
+        // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
+      }
+
+      if (typeof position1 !== 'undefined') {
+        if (position1.endsWith('%')) {
+          colorStops.push({
+            color: processedColor,
+            position: parseFloat(position1) / 100,
+          });
+        } else {
+          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+      } else {
         colorStops.push({
           color: processedColor,
-          position: position ? parseFloat(position) / 100 : null,
+          position: null,
         });
-      } else {
-        // If a color or position is invalid, return an empty array and do not apply any gradient. Same as web.
-        return [];
+      }
+
+      if (typeof position2 !== 'undefined') {
+        if (position2.endsWith('%')) {
+          colorStops.push({
+            color: processedColor,
+            position: parseFloat(position2) / 100,
+          });
+        } else {
+          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
       }
     }
 
+    const fixedColorStops = getFixedColorStops(colorStops);
+
     gradients.push({
       type: 'linearGradient',
       start: points.start,
       end: points.end,
-      colorStops: colorStops.map((stop, index, array) => ({
-        color: stop.color,
-        position:
-          stop.position ??
-          (array.length === 1 ? 1 : index / (array.length - 1)),
-      })),
+      colorStops: fixedColorStops,
     });
   }
 
@@ -284,3 +305,80 @@ function parseAngle(angle: string): ?number {
       return null;
   }
 }
+
+// https://drafts.csswg.org/css-images-4/#color-stop-fixup
+function getFixedColorStops(
+  colorStops: $ReadOnlyArray<{
+    color: ProcessedColorValue,
+    position: number | null,
+  }>,
+): Array<{
+  color: ProcessedColorValue,
+  position: number,
+}> {
+  let fixedColorStops: Array<{
+    color: ProcessedColorValue,
+    position: number,
+  }> = [];
+  let hasNullPositions = false;
+  let maxPositionSoFar = colorStops[0].position ?? 0;
+  for (let i = 0; i < colorStops.length; i++) {
+    const colorStop = colorStops[i];
+    let newPosition = colorStop.position;
+    if (newPosition === null) {
+      // Step 1:
+      // If the first color stop does not have a position,
+      // set its position to 0%. If the last color stop does not have a position,
+      // set its position to 100%.
+      if (i === 0) {
+        newPosition = 0;
+      } else if (i === colorStops.length - 1) {
+        newPosition = 1;
+      }
+    }
+    // Step 2:
+    // If a color stop or transition hint has a position
+    // that is less than the specified position of any color stop or transition hint
+    // before it in the list, set its position to be equal to the
+    // largest specified position of any color stop or transition hint before it.
+    if (newPosition !== null) {
+      newPosition = Math.max(newPosition, maxPositionSoFar);
+      fixedColorStops[i] = {
+        color: colorStop.color,
+        position: newPosition,
+      };
+      maxPositionSoFar = newPosition;
+    } else {
+      hasNullPositions = true;
+    }
+  }
+
+  // Step 3:
+  // If any color stop still does not have a position,
+  // then, for each run of adjacent color stops without positions,
+  // set their positions so that they are evenly spaced between the preceding and
+  // following color stops with positions.
+  if (hasNullPositions) {
+    let lastDefinedIndex = 0;
+    for (let i = 1; i < fixedColorStops.length; i++) {
+      if (fixedColorStops[i] !== undefined) {
+        const unpositionedStops = i - lastDefinedIndex - 1;
+        if (unpositionedStops > 0) {
+          const startPosition = fixedColorStops[lastDefinedIndex].position;
+          const endPosition = fixedColorStops[i].position;
+          const increment =
+            (endPosition - startPosition) / (unpositionedStops + 1);
+          for (let j = 1; j <= unpositionedStops; j++) {
+            fixedColorStops[lastDefinedIndex + j] = {
+              color: colorStops[lastDefinedIndex + j].color,
+              position: startPosition + increment * j,
+            };
+          }
+        }
+        lastDefinedIndex = i;
+      }
+    }
+  }
+
+  return fixedColorStops;
+}

package/Libraries/StyleSheet/processFilter.js

@@ -44,8 +44,8 @@ export default function processFilter(
   }
 
   if (typeof filter === 'string') {
-    // matches on functions with args like "drop-shadow(1.5)"
-    const regex = /([\w-]+)\(([^)]+)\)/g;
+    // matches on functions with args and nested functions like "drop-shadow(10 10 10 rgba(0, 0, 0, 1))"
+    const regex = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g;
     let matches;
 
     while ((matches = regex.exec(filter))) {
@@ -254,8 +254,8 @@ function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
   let lengthCount = 0;
   let keywordDetectedAfterLength = false;
 
-  // split on all whitespaces
-  for (const arg of rawDropShadow.split(/\s+/)) {
+  // split args by all whitespaces that are not in parenthesis
+  for (const arg of rawDropShadow.split(/\s+(?![^(]*\))/)) {
     const processedColor = processColor(arg);
     if (processedColor != null) {
       if (dropShadow.color != null) {

package/Libraries/Utilities/Appearance.js

@@ -9,7 +9,6 @@
  */
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import Platform from '../Utilities/Platform';
 import EventEmitter, {
   type EventSubscription,
 } from '../vendor/emitter/EventEmitter';
@@ -20,88 +19,81 @@ import NativeAppearance, {
 } from './NativeAppearance';
 import invariant from 'invariant';
 
-type AppearanceListener = (preferences: AppearancePreferences) => void;
 const eventEmitter = new EventEmitter<{
-  change: [AppearancePreferences],
+  change: [{colorScheme: ?ColorSchemeName}],
 }>();
 
 type NativeAppearanceEventDefinitions = {
   appearanceChanged: [AppearancePreferences],
 };
 
-if (NativeAppearance) {
-  const nativeEventEmitter =
-    new NativeEventEmitter<NativeAppearanceEventDefinitions>(
-      // 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
-      Platform.OS !== 'ios' ? null : NativeAppearance,
-    );
-  nativeEventEmitter.addListener(
-    'appearanceChanged',
-    (newAppearance: AppearancePreferences) => {
-      const {colorScheme} = newAppearance;
-      invariant(
-        colorScheme === 'dark' ||
-          colorScheme === 'light' ||
-          colorScheme == null,
-        "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-      );
-      eventEmitter.emit('change', {colorScheme});
-    },
-  );
+// Cache the color scheme to reduce the cost of reading it between changes.
+// NOTE: If `NativeAppearance` is null, this will always be null.
+let appearance: ?{colorScheme: ?ColorSchemeName} = null;
+
+if (NativeAppearance != null) {
+  new NativeEventEmitter<NativeAppearanceEventDefinitions>(
+    NativeAppearance,
+  ).addListener('appearanceChanged', (newAppearance: AppearancePreferences) => {
+    const colorScheme = toColorScheme(newAppearance.colorScheme);
+    appearance = {colorScheme};
+    eventEmitter.emit('change', appearance);
+  });
 }
 
-module.exports = {
-  /**
-   * Note: Although color scheme is available immediately, it may change at any
-   * time. Any rendering logic or styles that depend on this should try to call
-   * this function on every render, rather than caching the value (for example,
-   * using inline styles rather than setting a value in a `StyleSheet`).
-   *
-   * Example: `const colorScheme = Appearance.getColorScheme();`
-   *
-   * @returns {?ColorSchemeName} Value for the color scheme preference.
-   */
-  getColorScheme(): ?ColorSchemeName {
-    if (__DEV__) {
-      if (isAsyncDebugging) {
-        // Hard code light theme when using the async debugger as
-        // sync calls aren't supported
-        return 'light';
-      }
+/**
+ * Returns the current color scheme preference. This value may change, so the
+ * value should not be cached without either listening to changes or using
+ * the `useColorScheme` hook.
+ */
+export function getColorScheme(): ?ColorSchemeName {
+  if (__DEV__) {
+    if (isAsyncDebugging) {
+      // Hard code light theme when using the async debugger as
+      // sync calls aren't supported
+      return 'light';
     }
+  }
+  let colorScheme = null;
+  if (NativeAppearance != null) {
+    if (appearance == null) {
+      // Lazily initialize `appearance`. This should only happen once because
+      // we never reassign a null value to `appearance`.
+      appearance = {
+        colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+      };
+    }
+    colorScheme = appearance.colorScheme;
+  }
+  return colorScheme;
+}
 
-    // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-    const nativeColorScheme: ?string =
-      NativeAppearance == null
-        ? null
-        : NativeAppearance.getColorScheme() || null;
-    invariant(
-      nativeColorScheme === 'dark' ||
-        nativeColorScheme === 'light' ||
-        nativeColorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-    );
-    return nativeColorScheme;
-  },
-
-  setColorScheme(colorScheme: ?ColorSchemeName): void {
-    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
-
-    invariant(
-      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
-    );
+/**
+ * Updates the current color scheme to the supplied value.
+ */
+export function setColorScheme(colorScheme: ?ColorSchemeName): void {
+  if (NativeAppearance != null) {
+    NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
+    appearance = {colorScheme};
+  }
+}
 
-    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
-      NativeAppearance.setColorScheme(nativeColorScheme);
-    }
-  },
+/**
+ * Add an event handler that is fired when appearance preferences change.
+ */
+export function addChangeListener(
+  listener: ({colorScheme: ?ColorSchemeName}) => void,
+): EventSubscription {
+  return eventEmitter.addListener('change', listener);
+}
 
-  /**
-   * Add an event handler that is fired when appearance preferences change.
-   */
-  addChangeListener(listener: AppearanceListener): EventSubscription {
-    return eventEmitter.addListener('change', listener);
-  },
-};
+/**
+ * TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
+ */
+function toColorScheme(colorScheme: ?string): ?ColorSchemeName {
+  invariant(
+    colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+    "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+  );
+  return colorScheme;
+}

package/Libraries/Utilities/DevLoadingView.js

@@ -9,7 +9,7 @@
  */
 
 import processColor from '../StyleSheet/processColor';
-import Appearance from './Appearance';
+import {getColorScheme} from './Appearance';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
 const COLOR_SCHEME = {
@@ -39,9 +39,7 @@ module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
       const colorScheme =
-        Appearance.getColorScheme() === 'dark'
-          ? COLOR_SCHEME.dark
-          : COLOR_SCHEME.default;
+        getColorScheme() === 'dark' ? COLOR_SCHEME.dark : COLOR_SCHEME.default;
 
       const colorSet = colorScheme[type];
 

package/Libraries/Utilities/stringifyViewConfig.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+export default function stringifyViewConfig(viewConfig: any): string {
+  return JSON.stringify(
+    viewConfig,
+    (key, val) => {
+      if (typeof val === 'function') {
+        return `ƒ ${val.name}`;
+      }
+      return val;
+    },
+    2,
+  );
+}

package/Libraries/Utilities/useColorScheme.js

@@ -12,14 +12,14 @@
 
 import type {ColorSchemeName} from './NativeAppearance';
 
-import Appearance from './Appearance';
+import {addChangeListener, getColorScheme} from './Appearance';
 import {useSyncExternalStore} from 'react';
 
 const subscribe = (onStoreChange: () => void) => {
-  const appearanceSubscription = Appearance.addChangeListener(onStoreChange);
+  const appearanceSubscription = addChangeListener(onStoreChange);
   return () => appearanceSubscription.remove();
 };
 
 export default function useColorScheme(): ?ColorSchemeName {
-  return useSyncExternalStore(subscribe, Appearance.getColorScheme);
+  return useSyncExternalStore(subscribe, getColorScheme);
 }

package/index.js

@@ -82,7 +82,7 @@ import typeof StyleSheet from './Libraries/StyleSheet/StyleSheet';
 import typeof Text from './Libraries/Text/Text';
 import typeof * as TurboModuleRegistry from './Libraries/TurboModule/TurboModuleRegistry';
 import typeof UTFSequence from './Libraries/UTFSequence';
-import typeof Appearance from './Libraries/Utilities/Appearance';
+import typeof * as Appearance from './Libraries/Utilities/Appearance';
 import typeof BackHandler from './Libraries/Utilities/BackHandler';
 import typeof DeviceInfo from './Libraries/Utilities/DeviceInfo';
 import typeof DevSettings from './Libraries/Utilities/DevSettings';

package/index.win32.js

@@ -82,7 +82,7 @@ import typeof StyleSheet from './Libraries/StyleSheet/StyleSheet';
 import typeof Text from './Libraries/Text/Text';
 import typeof * as TurboModuleRegistry from './Libraries/TurboModule/TurboModuleRegistry';
 import typeof UTFSequence from './Libraries/UTFSequence';
-import typeof Appearance from './Libraries/Utilities/Appearance';
+import typeof * as Appearance from './Libraries/Utilities/Appearance';
 import typeof BackHandler from './Libraries/Utilities/BackHandler';
 import typeof DeviceInfo from './Libraries/Utilities/DeviceInfo';
 import typeof DevSettings from './Libraries/Utilities/DevSettings';

package/jest/setup.js

@@ -392,10 +392,6 @@ jest
   .mock('../Libraries/ReactNative/requireNativeComponent', () => {
     return jest.requireActual('./mockNativeComponent');
   })
-  .mock(
-    '../Libraries/Utilities/verifyComponentAttributeEquivalence',
-    () => function () {},
-  )
   .mock('../Libraries/Vibration/Vibration', () => ({
     vibrate: jest.fn(),
     cancel: jest.fn(),

package/overrides.json

@@ -7,19 +7,19 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.76.0-nightly-20240816-17017d2b8",
+  "baseVersion": "0.76.0-nightly-20240824-09e88448c",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "3d94d14740956b3455abfbdff5e043212d04974b"
+      "baseHash": "27c9677306d4f1bd627a346969c592aee606811a"
     },
     {
       "type": "derived",
       "file": "src-win/index.win32.js",
       "baseFile": "packages/react-native/index.js",
-      "baseHash": "dc1e45b643d33d868da60fa27da2cbda0231b7f3"
+      "baseHash": "da5d9e79c8c14c56ba00f73c8514c06e6fffe8ed"
     },
     {
       "type": "platform",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.260",
+  "version": "0.0.0-canary.261",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,13 +30,13 @@
     "@react-native-community/cli-platform-android": "14.0.0",
     "@react-native-community/cli-platform-ios": "14.0.0",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/codegen": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/community-cli-plugin": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/gradle-plugin": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/js-polyfills": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/normalize-colors": "0.76.0-nightly-20240816-17017d2b8",
-    "@react-native/virtualized-lists": "0.76.0-nightly-20240816-17017d2b8",
+    "@react-native/assets-registry": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/codegen": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/community-cli-plugin": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/gradle-plugin": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/js-polyfills": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/normalize-colors": "0.76.0-nightly-20240824-09e88448c",
+    "@react-native/virtualized-lists": "0.76.0-nightly-20240824-09e88448c",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -82,19 +82,19 @@
     "@types/prop-types": "15.7.1",
     "@types/react": "^18.2.6",
     "eslint": "^8.19.0",
-    "flow-bin": "^0.241.0",
+    "flow-bin": "^0.244.0",
     "jscodeshift": "^0.14.0",
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.76.0-nightly-20240816-17017d2b8",
+    "react-native": "0.76.0-nightly-20240824-09e88448c",
     "react-native-platform-override": "^1.9.45",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.76.0-nightly-20240816-17017d2b8"
+    "react-native": "0.76.0-nightly-20240824-09e88448c"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<fb7a3dcf7b3e5001e45f808fb4410376>>
+ * @generated SignedSource<<3c32ce3847859db45d2e8bafb3cc31a1>>
  * @flow strict-local
  */
 
@@ -30,6 +30,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   animatedShouldDebounceQueueFlush: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
+  enableOptimisedVirtualizedCells: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
@@ -48,7 +49,6 @@ export type ReactNativeFeatureFlags = {
   commonTestFlag: Getter<boolean>,
   allowRecursiveCommitsWithSynchronousMountOnAndroid: Getter<boolean>,
   batchRenderingUpdatesInEventLoop: Getter<boolean>,
-  changeOrderOfMountingInstructionsOnAndroid: Getter<boolean>,
   completeReactInstanceCreationOnBgThreadOnAndroid: Getter<boolean>,
   destroyFabricSurfacesInReactInstanceManager: Getter<boolean>,
   enableAlignItemsBaselineOnFabricIOS: Getter<boolean>,
@@ -60,6 +60,7 @@ export type ReactNativeFeatureFlags = {
   enableFabricLogs: Getter<boolean>,
   enableFabricRendererExclusively: Getter<boolean>,
   enableGranularShadowTreeStateReconciliation: Getter<boolean>,
+  enableLayoutAnimationsOnIOS: Getter<boolean>,
   enableLongTaskAPI: Getter<boolean>,
   enableMicrotasks: Getter<boolean>,
   enablePropsUpdateReconciliationAndroid: Getter<boolean>,
@@ -112,6 +113,11 @@ export const animatedShouldUseSingleOp: Getter<boolean> = createJavaScriptFlagGe
  */
 export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', false);
 
+/**
+ * Removing unnecessary rerenders Virtualized cells after any rerenders of Virualized list. Works with strict=true option
+ */
+export const enableOptimisedVirtualizedCells: Getter<boolean> = createJavaScriptFlagGetter('enableOptimisedVirtualizedCells', false);
+
 /**
  * Function used to enable / disabled Layout Animations in React Native.
  */
@@ -169,10 +175,6 @@ export const allowRecursiveCommitsWithSynchronousMountOnAndroid: Getter<boolean>
  * When enabled, the RuntimeScheduler processing the event loop will batch all rendering updates and dispatch them together at the end of each iteration of the loop.
  */
 export const batchRenderingUpdatesInEventLoop: Getter<boolean> = createNativeFlagGetter('batchRenderingUpdatesInEventLoop', false);
-/**
- * When enabled, insert of views on Android will be moved from the beginning of the IntBufferBatchMountItem to be after layout updates.
- */
-export const changeOrderOfMountingInstructionsOnAndroid: Getter<boolean> = createNativeFlagGetter('changeOrderOfMountingInstructionsOnAndroid', false);
 /**
  * Do not wait for a main-thread dispatch to complete init to start executing work on the JS thread on Android
  */
@@ -217,6 +219,10 @@ export const enableFabricRendererExclusively: Getter<boolean> = createNativeFlag
  * When enabled, the renderer would only fail commits when they propagate state and the last commit that updated state changed before committing.
  */
 export const enableGranularShadowTreeStateReconciliation: Getter<boolean> = createNativeFlagGetter('enableGranularShadowTreeStateReconciliation', false);
+/**
+ * When enabled, LayoutAnimations API will animate state changes on iOS.
+ */
+export const enableLayoutAnimationsOnIOS: Getter<boolean> = createNativeFlagGetter('enableLayoutAnimationsOnIOS', true);
 /**
  * Enables the reporting of long tasks through `PerformanceObserver`. Only works if the event loop is enabled.
  */

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<9728234e0662758c72ba79b3cffbd4e5>>
+ * @generated SignedSource<<1f1710a12f6980b23bb6c0ece0060b59>>
  * @flow strict-local
  */
 
@@ -26,7 +26,6 @@ export interface Spec extends TurboModule {
   +commonTestFlag?: () => boolean;
   +allowRecursiveCommitsWithSynchronousMountOnAndroid?: () => boolean;
   +batchRenderingUpdatesInEventLoop?: () => boolean;
-  +changeOrderOfMountingInstructionsOnAndroid?: () => boolean;
   +completeReactInstanceCreationOnBgThreadOnAndroid?: () => boolean;
   +destroyFabricSurfacesInReactInstanceManager?: () => boolean;
   +enableAlignItemsBaselineOnFabricIOS?: () => boolean;
@@ -38,6 +37,7 @@ export interface Spec extends TurboModule {
   +enableFabricLogs?: () => boolean;
   +enableFabricRendererExclusively?: () => boolean;
   +enableGranularShadowTreeStateReconciliation?: () => boolean;
+  +enableLayoutAnimationsOnIOS?: () => boolean;
   +enableLongTaskAPI?: () => boolean;
   +enableMicrotasks?: () => boolean;
   +enablePropsUpdateReconciliationAndroid?: () => boolean;

package/src/private/specs/modules/NativeAppearance.js

@@ -14,19 +14,19 @@ import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboMod
 
 export type ColorSchemeName = 'light' | 'dark';
 
-export type AppearancePreferences = {|
+export type AppearancePreferences = {
   // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
   // types.
   /* 'light' | 'dark' */
   colorScheme?: ?string,
-|};
+};
 
 export interface Spec extends TurboModule {
   // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
-  +setColorScheme?: (colorScheme: string) => void;
+  +setColorScheme: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

package/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -141,12 +141,14 @@ export default class IntersectionObserver {
       return;
     }
 
-    IntersectionObserverManager.observe({
+    const didStartObserving = IntersectionObserverManager.observe({
       intersectionObserverId: this._getOrCreateIntersectionObserverId(),
       target,
     });
 
-    this._observationTargets.add(target);
+    if (didStartObserving) {
+      this._observationTargets.add(target);
+    }
   }
 
   /**

package/src/private/webapis/intersectionobserver/IntersectionObserverManager.js

@@ -116,10 +116,10 @@ export function observe({
 }: {
   intersectionObserverId: IntersectionObserverId,
   target: ReactNativeElement,
-}): void {
+}): boolean {
   if (NativeIntersectionObserver == null) {
     warnNoNativeIntersectionObserver();
-    return;
+    return false;
   }
 
   const registeredObserver = registeredIntersectionObservers.get(
@@ -129,15 +129,13 @@ export function observe({
     console.error(
       `IntersectionObserverManager: could not start observing target because IntersectionObserver with ID ${intersectionObserverId} was not registered.`,
     );
-    return;
+    return false;
   }
 
   const targetShadowNode = getShadowNode(target);
   if (targetShadowNode == null) {
-    console.error(
-      'IntersectionObserverManager: could not find reference to host node from target',
-    );
-    return;
+    // The target is disconnected. We can't observe it anymore.
+    return false;
   }
 
   const instanceHandle = getInstanceHandle(target);
@@ -145,7 +143,7 @@ export function observe({
     console.error(
       'IntersectionObserverManager: could not find reference to instance handle from target',
     );
-    return;
+    return false;
   }
 
   // Store the mapping between the instance handle and the target so we can
@@ -160,11 +158,13 @@ export function observe({
     isConnected = true;
   }
 
-  return NativeIntersectionObserver.observe({
+  NativeIntersectionObserver.observe({
     intersectionObserverId,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
   });
+
+  return true;
 }
 
 export function unobserve(

package/src/private/webapis/mutationobserver/MutationObserver.js

@@ -121,13 +121,15 @@ export default class MutationObserver {
       MutationObserverManager.unobserve(mutationObserverId, target);
     }
 
-    MutationObserverManager.observe({
+    const didStartObserving = MutationObserverManager.observe({
       mutationObserverId,
       target,
       subtree: Boolean(options?.subtree),
     });
 
-    this._observationTargets.add(target);
+    if (didStartObserving) {
+      this._observationTargets.add(target);
+    }
   }
 
   _unobserve(target: ReactNativeElement): void {

package/src/private/webapis/mutationobserver/MutationObserverManager.js

@@ -43,6 +43,13 @@ const registeredMutationObservers: Map<
   $ReadOnly<{observer: MutationObserver, callback: MutationObserverCallback}>,
 > = new Map();
 
+// The mapping between ReactNativeElement and their corresponding shadow node
+// needs to be kept here because React removes the link when unmounting.
+const targetToShadowNodeMap: WeakMap<
+  ReactNativeElement,
+  ReturnType<typeof getShadowNode>,
+> = new WeakMap();
+
 /**
  * Registers the given mutation observer and returns a unique ID for it,
  * which is required to start observing targets.
@@ -85,10 +92,10 @@ export function observe({
   mutationObserverId: MutationObserverId,
   target: ReactNativeElement,
   subtree: boolean,
-}): void {
+}): boolean {
   if (NativeMutationObserver == null) {
     warnNoNativeMutationObserver();
-    return;
+    return false;
   }
 
   const registeredObserver =
@@ -97,17 +104,17 @@ export function observe({
     console.error(
       `MutationObserverManager: could not start observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
     );
-    return;
+    return false;
   }
 
   const targetShadowNode = getShadowNode(target);
   if (targetShadowNode == null) {
-    console.error(
-      'MutationObserverManager: could not find reference to host node from target',
-    );
-    return;
+    // The target is disconnected. We can't observe it anymore.
+    return false;
   }
 
+  targetToShadowNodeMap.set(target, targetShadowNode);
+
   if (!isConnected) {
     NativeMutationObserver.connect(
       notifyMutationObservers,
@@ -121,11 +128,13 @@ export function observe({
     isConnected = true;
   }
 
-  return NativeMutationObserver.observe({
+  NativeMutationObserver.observe({
     mutationObserverId,
     targetShadowNode,
     subtree,
   });
+
+  return true;
 }
 
 export function unobserve(
@@ -146,10 +155,10 @@ export function unobserve(
     return;
   }
 
-  const targetShadowNode = getShadowNode(target);
+  const targetShadowNode = targetToShadowNodeMap.get(target);
   if (targetShadowNode == null) {
     console.error(
-      'MutationObserverManager: could not find reference to host node from target',
+      'MutationObserverManager: could not find registration data for target',
     );
     return;
   }

package/Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -1,135 +0,0 @@
-/**
- * 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.
- *
- * @format
- * @flow
- */
-
-import PlatformBaseViewConfig from '../NativeComponent/PlatformBaseViewConfig';
-import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
-
-const IGNORED_KEYS = ['transform', 'hitSlop'];
-
-/**
- * The purpose of this function is to validate that the view config that
- * native exposes for a given view manager is the same as the view config
- * that is specified for that view manager in JS.
- *
- * In order to improve perf, we want to avoid calling into native to get
- * the view config when each view manager is used. To do this, we are moving
- * the configs to JS. In the future we will use these JS based view configs
- * to codegen the view manager on native to ensure they stay in sync without
- * this runtime check.
- *
- * If this function fails, that likely means a change was made to the native
- * view manager without updating the JS config as well. Ideally you can make
- * that direct change to the JS config. If you don't know what the differences
- * are, the best approach I've found is to create a view that prints
- * the return value of getNativeComponentAttributes, and then copying that
- * text and pasting it back into JS:
- * <Text selectable={true}>{JSON.stringify(getNativeComponentAttributes('RCTView'))}</Text>
- *
- * This is meant to be a stopgap until the time comes when we only have a
- * single source of truth. I wonder if this message will still be here two
- * years from now...
- */
-export default function verifyComponentAttributeEquivalence(
-  nativeViewConfig: ViewConfig,
-  staticViewConfig: ViewConfig,
-) {
-  for (const prop of [
-    'validAttributes',
-    'bubblingEventTypes',
-    'directEventTypes',
-  ]) {
-    const diff = Object.keys(
-      lefthandObjectDiff(nativeViewConfig[prop], staticViewConfig[prop]),
-    );
-
-    if (diff.length > 0) {
-      const name =
-        staticViewConfig.uiViewClassName ?? nativeViewConfig.uiViewClassName;
-      console.error(
-        `'${name}' has a view config that does not match native. ` +
-          `'${prop}' is missing: ${diff.join(', ')}`,
-      );
-    }
-  }
-}
-
-// Return the different key-value pairs of the right object, by iterating through the keys in the left object
-// Note it won't return a difference where a key is missing in the left but exists the right.
-function lefthandObjectDiff(leftObj: Object, rightObj: Object): Object {
-  const differentKeys: {[string]: any | {...}} = {};
-
-  function compare(leftItem: any, rightItem: any, key: string) {
-    if (typeof leftItem !== typeof rightItem && leftItem != null) {
-      differentKeys[key] = rightItem;
-      return;
-    }
-
-    if (typeof leftItem === 'object') {
-      const objDiff = lefthandObjectDiff(leftItem, rightItem);
-      if (Object.keys(objDiff).length > 1) {
-        differentKeys[key] = objDiff;
-      }
-      return;
-    }
-
-    if (leftItem !== rightItem) {
-      differentKeys[key] = rightItem;
-      return;
-    }
-  }
-
-  for (const key in leftObj) {
-    if (IGNORED_KEYS.includes(key)) {
-      continue;
-    }
-
-    if (!rightObj) {
-      differentKeys[key] = {};
-    } else if (leftObj.hasOwnProperty(key)) {
-      compare(leftObj[key], rightObj[key], key);
-    }
-  }
-
-  return differentKeys;
-}
-
-export function getConfigWithoutViewProps(
-  viewConfig: ViewConfig,
-  propName: string,
-): {...} {
-  // $FlowFixMe[invalid-computed-prop]
-  if (!viewConfig[propName]) {
-    return {};
-  }
-
-  return (
-    Object.keys(viewConfig[propName])
-      // $FlowFixMe[invalid-computed-prop]
-      .filter(prop => !PlatformBaseViewConfig[propName][prop])
-      .reduce<{[string]: any}>((obj, prop) => {
-        // $FlowFixMe[invalid-computed-prop]
-        obj[prop] = viewConfig[propName][prop];
-        return obj;
-      }, {})
-  );
-}
-
-export function stringifyViewConfig(viewConfig: any): string {
-  return JSON.stringify(
-    viewConfig,
-    (key, val) => {
-      if (typeof val === 'function') {
-        return `ƒ ${val.name}`;
-      }
-      return val;
-    },
-    2,
-  );
-}