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

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Sat, 14 Dec 2024 06:28:25 GMT",
+      "date": "Wed, 18 Dec 2024 06:21:37 GMT",
+      "version": "0.0.0-canary.276",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.276",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@office-iss/react-native-win32",
+            "commit": "d669d78450c97decf9f9f5acc09e526ddf8dd911",
+            "comment": "integrate RN-Nightly 0.77.0-nightly-20241125-4cffff35e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 14 Dec 2024 06:29:12 GMT",
       "version": "0.0.0-canary.275",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.275",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # Change Log - @office-iss/react-native-win32
 
-<!-- This log was last generated on Sat, 14 Dec 2024 06:28:25 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 18 Dec 2024 06:21:37 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## 0.0.0-canary.275
+## 0.0.0-canary.276
 
-Sat, 14 Dec 2024 06:28:25 GMT
+Wed, 18 Dec 2024 06:21:37 GMT
 
 ### Changes
 
-- integrate RN Nightly 0.77.0-nightly-20241118-3986eefed (tatianakapos@microsoft.com)
+- integrate RN-Nightly 0.77.0-nightly-20241125-4cffff35e (email not defined)
 
+## 0.0.0-canary.275
+
+Sat, 14 Dec 2024 06:29:12 GMT
+
+### Changes
+
+- integrate RN Nightly 0.77.0-nightly-20241118-3986eefed (tatianakapos@microsoft.com)
+
 ## 0.0.0-canary.274
 
 Fri, 06 Dec 2024 06:22:27 GMT

package/Libraries/Animated/useAnimatedProps.js

@@ -73,8 +73,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
 
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-  const useSetNativePropsInNativeAnimationsInFabric =
-    ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
 
   const useAnimatedPropsLifecycle =
     ReactNativeFeatureFlags.useInsertionEffectsForAnimations()
@@ -119,12 +117,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           if (isFabricNode) {
             // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
             // Must not be called in Paper.
-            if (useSetNativePropsInNativeAnimationsInFabric) {
-              // $FlowFixMe[incompatible-use]
-              instance.setNativeProps(node.__getAnimatedValue());
-            } else {
-              scheduleUpdate();
-            }
+            scheduleUpdate();
           }
           return;
         }
@@ -201,12 +194,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [
-      node,
-      useNativePropsInFabric,
-      useSetNativePropsInNativeAnimationsInFabric,
-      props,
-    ],
+    [node, useNativePropsInFabric, props],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -116,6 +116,8 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
+    event.persist();
+
     const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {

package/Libraries/Components/View/ViewPropTypes.js

@@ -567,9 +567,6 @@ export type ViewProps = $ReadOnly<{|
    * optimization. Set this property to `false` to disable this optimization and
    * ensure that this `View` exists in the native view hierarchy.
    *
-   * @platform android
-   * In Fabric, this prop is used in ios as well.
-   *
    * See https://reactnative.dev/docs/view#collapsable
    */
   collapsable?: ?boolean,

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

@@ -628,9 +628,6 @@ export type ViewProps = $ReadOnly<{|
    * optimization. Set this property to `false` to disable this optimization and
    * ensure that this `View` exists in the native view hierarchy.
    *
-   * @platform android
-   * In Fabric, this prop is used in ios as well.
-   *
    * See https://reactnative.dev/docs/view#collapsable
    */
   collapsable?: ?boolean,

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);
     }
   }

package/Libraries/Core/ReactNativeVersion.js

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

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/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/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,

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -14,25 +14,28 @@ import type {ProcessedColorValue} from './processColor';
 import type {GradientValue} from './StyleSheetTypes';
 
 const processColor = require('./processColor').default;
-const DIRECTION_REGEX =
-  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/;
+const DIRECTION_KEYWORD_REGEX =
+  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/i;
 const ANGLE_UNIT_REGEX = /^([+-]?\d*\.?\d+)(deg|grad|rad|turn)$/i;
 
-const TO_BOTTOM_START_END_POINTS = {
-  start: {x: 0.5, y: 0},
-  end: {x: 0.5, y: 1},
-};
+type LinearGradientDirection =
+  | {type: 'angle', value: number}
+  | {type: 'keyword', value: string};
 
 type ParsedGradientValue = {
   type: 'linearGradient',
-  start: {x: number, y: number},
-  end: {x: number, y: number},
+  direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
     color: ProcessedColorValue,
     position: number,
   }>,
 };
 
+const DEFAULT_DIRECTION: LinearGradientDirection = {
+  type: 'angle',
+  value: 180,
+};
+
 export default function processBackgroundImage(
   backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
 ): $ReadOnlyArray<ParsedGradientValue> {
@@ -76,37 +79,43 @@ export default function processBackgroundImage(
         }
       }
 
-      let points: {
-        start: ParsedGradientValue['start'],
-        end: ParsedGradientValue['end'],
-      } | null = null;
-
-      if (typeof bgImage.direction === 'undefined') {
-        points = TO_BOTTOM_START_END_POINTS;
-      } else if (ANGLE_UNIT_REGEX.test(bgImage.direction)) {
-        const angle = parseAngle(bgImage.direction);
-        if (angle != null) {
-          points = calculateStartEndPointsFromAngle(angle);
-        }
-      } else if (DIRECTION_REGEX.test(bgImage.direction)) {
-        const processedPoints = calculateStartEndPointsFromDirection(
-          bgImage.direction,
-        );
-        if (processedPoints != null) {
-          points = processedPoints;
+      let direction: LinearGradientDirection = DEFAULT_DIRECTION;
+      const bgDirection =
+        bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
+
+      if (bgDirection != null) {
+        if (ANGLE_UNIT_REGEX.test(bgDirection)) {
+          const parsedAngle = getAngleInDegrees(bgDirection);
+          if (parsedAngle != null) {
+            direction = {
+              type: 'angle',
+              value: parsedAngle,
+            };
+          } else {
+            // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else if (DIRECTION_KEYWORD_REGEX.test(bgDirection)) {
+          const parsedDirection = getDirectionForKeyword(bgDirection);
+          if (parsedDirection != null) {
+            direction = parsedDirection;
+          } else {
+            // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else {
+          // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
         }
       }
 
       const fixedColorStops = getFixedColorStops(processedColorStops);
 
-      if (points != null) {
-        result = result.concat({
-          type: 'linearGradient',
-          start: points.start,
-          end: points.end,
-          colorStops: fixedColorStops,
-        });
-      }
+      result = result.concat({
+        type: 'linearGradient',
+        direction,
+        colorStops: fixedColorStops,
+      });
     }
   }
 
@@ -118,30 +127,39 @@ function parseCSSLinearGradient(
 ): $ReadOnlyArray<ParsedGradientValue> {
   const gradients = [];
   let match;
+
+  // matches one or more linear-gradient functions in CSS
   const linearGradientRegex = /linear-gradient\s*\(((?:\([^)]*\)|[^())])*)\)/gi;
 
   while ((match = linearGradientRegex.exec(cssString))) {
     const gradientContent = match[1];
     const parts = gradientContent.split(',');
-    let points = TO_BOTTOM_START_END_POINTS;
+    let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
+
+    // matches individual color stops in a gradient function
+    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
+    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
+    // TODO: does not support color hint syntax yet. It is WIP.
     const colorStopRegex =
       /\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);
-      if (angle != null) {
-        points = calculateStartEndPointsFromAngle(angle);
+      const parsedAngle = getAngleInDegrees(trimmedDirection);
+      if (parsedAngle != null) {
+        direction = {
+          type: 'angle',
+          value: parsedAngle,
+        };
         parts.shift();
       } else {
         // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (DIRECTION_REGEX.test(trimmedDirection)) {
-      const parsedPoints =
-        calculateStartEndPointsFromDirection(trimmedDirection);
-      if (parsedPoints != null) {
-        points = parsedPoints;
+    } else if (DIRECTION_KEYWORD_REGEX.test(trimmedDirection)) {
+      const parsedDirection = getDirectionForKeyword(trimmedDirection);
+      if (parsedDirection != null) {
+        direction = parsedDirection;
         parts.shift();
       } else {
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
@@ -198,8 +216,7 @@ function parseCSSLinearGradient(
 
     gradients.push({
       type: 'linearGradient',
-      start: points.start,
-      end: points.end,
+      direction,
       colorStops: fixedColorStops,
     });
   }
@@ -207,83 +224,43 @@ function parseCSSLinearGradient(
   return gradients;
 }
 
-function calculateStartEndPointsFromDirection(direction: string): ?{
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
+function getDirectionForKeyword(direction?: string): ?LinearGradientDirection {
+  if (direction == null) {
+    return null;
+  }
   // Remove extra whitespace
-  const normalizedDirection = direction.replace(/\s+/g, ' ');
+  const normalized = direction.replace(/\s+/g, ' ').toLowerCase();
 
-  switch (normalizedDirection) {
+  switch (normalized) {
+    case 'to top':
+      return {type: 'angle', value: 0};
     case 'to right':
-      return {
-        start: {x: 0, y: 0.5},
-        end: {x: 1, y: 0.5},
-      };
-    case 'to left':
-      return {
-        start: {x: 1, y: 0.5},
-        end: {x: 0, y: 0.5},
-      };
+      return {type: 'angle', value: 90};
     case 'to bottom':
-      return TO_BOTTOM_START_END_POINTS;
-    case 'to top':
-      return {
-        start: {x: 0.5, y: 1},
-        end: {x: 0.5, y: 0},
-      };
+      return {type: 'angle', value: 180};
+    case 'to left':
+      return {type: 'angle', value: 270};
+    case 'to top right':
+    case 'to right top':
+      return {type: 'keyword', value: 'to top right'};
     case 'to bottom right':
     case 'to right bottom':
-      return {
-        start: {x: 0, y: 0},
-        end: {x: 1, y: 1},
-      };
+      return {type: 'keyword', value: 'to bottom right'};
     case 'to top left':
     case 'to left top':
-      return {
-        start: {x: 1, y: 1},
-        end: {x: 0, y: 0},
-      };
+      return {type: 'keyword', value: 'to top left'};
     case 'to bottom left':
     case 'to left bottom':
-      return {
-        start: {x: 1, y: 0},
-        end: {x: 0, y: 1},
-      };
-    case 'to top right':
-    case 'to right top':
-      return {
-        start: {x: 0, y: 1},
-        end: {x: 1, y: 0},
-      };
+      return {type: 'keyword', value: 'to bottom left'};
     default:
       return null;
   }
 }
 
-function calculateStartEndPointsFromAngle(angleRadians: number): {
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
-  // Normalize angle to be between 0 and 2π
-  let angleRadiansNormalized = angleRadians % (2 * Math.PI);
-  if (angleRadiansNormalized < 0) {
-    angleRadiansNormalized += 2 * Math.PI;
+function getAngleInDegrees(angle?: string): ?number {
+  if (angle == null) {
+    return null;
   }
-
-  const endX = 0.5 + 0.5 * Math.sin(angleRadiansNormalized);
-  const endY = 0.5 - 0.5 * Math.cos(angleRadiansNormalized);
-
-  const startX = 1 - endX;
-  const startY = 1 - endY;
-
-  return {
-    start: {x: startX, y: startY},
-    end: {x: endX, y: endY},
-  };
-}
-
-function parseAngle(angle: string): ?number {
   const match = angle.match(ANGLE_UNIT_REGEX);
   if (!match) {
     return null;
@@ -294,13 +271,13 @@ function parseAngle(angle: string): ?number {
   const numericValue = parseFloat(value);
   switch (unit) {
     case 'deg':
-      return (numericValue * Math.PI) / 180;
+      return numericValue;
     case 'grad':
-      return (numericValue * Math.PI) / 200;
+      return numericValue * 0.9; // 1 grad = 0.9 degrees
     case 'rad':
-      return numericValue;
+      return (numericValue * 180) / Math.PI;
     case 'turn':
-      return numericValue * 2 * Math.PI;
+      return numericValue * 360; // 1 turn = 360 degrees
     default:
       return null;
   }

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -16,9 +16,6 @@ const NativeModules = require('../BatchedBridge/NativeModules');
 
 const turboModuleProxy = global.__turboModuleProxy;
 
-const useLegacyNativeModuleInterop =
-  global.RN$Bridgeless !== true || global.RN$TurboInterop === true;
-
 function requireModule<T: TurboModule>(name: string): ?T {
   if (turboModuleProxy != null) {
     const module: ?T = turboModuleProxy(name);
@@ -27,8 +24,11 @@ function requireModule<T: TurboModule>(name: string): ?T {
     }
   }
 
-  if (useLegacyNativeModuleInterop) {
-    // Backward compatibility layer during migration.
+  if (
+    global.RN$Bridgeless !== true ||
+    global.RN$TurboInterop === true ||
+    global.RN$UnifiedNativeModuleProxy === true
+  ) {
     const legacyModule: ?T = NativeModules[name];
     if (legacyModule != null) {
       return legacyModule;

package/Libraries/Utilities/Appearance.js

@@ -105,7 +105,9 @@ export function setColorScheme(colorScheme: ?ColorSchemeName): void {
   const {NativeAppearance} = state;
   if (NativeAppearance != null) {
     NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
-    state.appearance = {colorScheme};
+    state.appearance = {
+      colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+    };
   }
 }
 

package/jest/setup.js

@@ -448,4 +448,8 @@ jest
     return jest.requireActual(
       '../Libraries/ReactNative/RendererImplementation',
     );
-  });
+  })
+  .mock('../Libraries/Utilities/useColorScheme', () => ({
+    __esModule: true,
+    default: jest.fn().mockReturnValue('light'),
+  }));

package/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.77.0-nightly-20241118-3986eefed",
+  "baseVersion": "0.77.0-nightly-20241125-4cffff35e",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "afa414432bb8dae6ce606a148b74f85fcef8a59d"
+      "baseHash": "168a2b4bcf33aba4727eb608902b17b4eb74c95d"
     },
     {
       "type": "derived",
@@ -197,7 +197,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Components/View/ViewPropTypes.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/View/ViewPropTypes.js",
-      "baseHash": "a742b26e4c96fdefb07779e40bc58cd1cc872675",
+      "baseHash": "994aead3d5ab49e6bd34a497094a4bc131a8bdb1",
       "issue": 6240
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.275",
+  "version": "0.0.0-canary.276",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,19 +30,19 @@
     "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/codegen": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/community-cli-plugin": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/gradle-plugin": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/js-polyfills": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/normalize-colors": "0.77.0-nightly-20241118-3986eefed",
-    "@react-native/virtualized-lists": "0.77.0-nightly-20241118-3986eefed",
+    "@react-native/assets-registry": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/codegen": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/community-cli-plugin": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/gradle-plugin": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/js-polyfills": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/normalize-colors": "0.77.0-nightly-20241125-4cffff35e",
+    "@react-native/virtualized-lists": "0.77.0-nightly-20241125-4cffff35e",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
     "art": "^0.10.0",
     "babel-jest": "^29.7.0",
-    "babel-plugin-syntax-hermes-parser": "0.24.0",
+    "babel-plugin-syntax-hermes-parser": "0.25.1",
     "base64-js": "^1.5.1",
     "chalk": "^4.0.0",
     "commander": "^12.0.0",
@@ -90,14 +90,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.3.1",
-    "react-native": "0.77.0-nightly-20241118-3986eefed",
+    "react-native": "0.77.0-nightly-20241125-4cffff35e",
     "react-native-platform-override": "^1.9.49",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^18.2.0",
-    "react-native": "0.77.0-nightly-20241118-3986eefed"
+    "react-native": "0.77.0-nightly-20241125-4cffff35e"
   },
   "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<<8334fdc6d34d4a090eb8be73f92ccd0f>>
+ * @generated SignedSource<<83b5798ee1c7a28fffbf110e19641d69>>
  * @flow strict
  */
 
@@ -31,17 +31,16 @@ export type ReactNativeFeatureFlagsJsOnly = {
   animatedShouldDebounceQueueFlush: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
   disableInteractionManager: Getter<boolean>,
+  disableInteractionManagerInBatchinator: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
   enableAnimatedAllowlist: Getter<boolean>,
   enableAnimatedClearImmediateFix: Getter<boolean>,
   enableAnimatedPropsMemo: Getter<boolean>,
-  enableOptimisedVirtualizedCells: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
-  shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>,
   useInsertionEffectsForAnimations: Getter<boolean>,
   useRefsForTextInputState: Getter<boolean>,
 };
@@ -86,7 +85,6 @@ export type ReactNativeFeatureFlags = {
   initEagerTurboModulesOnNativeModulesQueueAndroid: Getter<boolean>,
   lazyAnimationCallbacks: Getter<boolean>,
   loadVectorDrawablesOnImages: Getter<boolean>,
-  setAndroidLayoutDirection: Getter<boolean>,
   traceTurboModulePromiseRejectionsOnAndroid: Getter<boolean>,
   useAlwaysAvailableJSErrorHandling: Getter<boolean>,
   useFabricInterop: Getter<boolean>,
@@ -119,6 +117,11 @@ export const animatedShouldUseSingleOp: Getter<boolean> = createJavaScriptFlagGe
  */
 export const disableInteractionManager: Getter<boolean> = createJavaScriptFlagGetter('disableInteractionManager', false);
 
+/**
+ * Skips InteractionManager in `Batchinator` and invokes callbacks synchronously.
+ */
+export const disableInteractionManagerInBatchinator: Getter<boolean> = createJavaScriptFlagGetter('disableInteractionManagerInBatchinator', false);
+
 /**
  * Enables access to the host tree in Fabric using DOM-compatible APIs.
  */
@@ -139,11 +142,6 @@ export const enableAnimatedClearImmediateFix: Getter<boolean> = createJavaScript
  */
 export const enableAnimatedPropsMemo: Getter<boolean> = createJavaScriptFlagGetter('enableAnimatedPropsMemo', true);
 
-/**
- * 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,11 +167,6 @@ export const shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean> = cre
  */
 export const shouldUseSetNativePropsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInFabric', true);
 
-/**
- * Enables use of setNativeProps in Native driven animations in Fabric.
- */
-export const shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInNativeAnimationsInFabric', false);
-
 /**
  * Changes construction of the animation graph to `useInsertionEffect` instead of `useLayoutEffect`.
  */
@@ -328,10 +321,6 @@ export const lazyAnimationCallbacks: Getter<boolean> = createNativeFlagGetter('l
  * Adds support for loading vector drawable assets in the Image component (only on Android)
  */
 export const loadVectorDrawablesOnImages: Getter<boolean> = createNativeFlagGetter('loadVectorDrawablesOnImages', false);
-/**
- * Propagate layout direction to Android views.
- */
-export const setAndroidLayoutDirection: Getter<boolean> = createNativeFlagGetter('setAndroidLayoutDirection', true);
 /**
  * Enables storing js caller stack when creating promise in native module. This is useful in case of Promise rejection and tracing the cause.
  */

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<<ced421dd8531e9a074999a1cdb5e4a16>>
+ * @generated SignedSource<<4caaf5dbaa68614ce53c8aecbd512df8>>
  * @flow strict
  */
 
@@ -59,7 +59,6 @@ export interface Spec extends TurboModule {
   +initEagerTurboModulesOnNativeModulesQueueAndroid?: () => boolean;
   +lazyAnimationCallbacks?: () => boolean;
   +loadVectorDrawablesOnImages?: () => boolean;
-  +setAndroidLayoutDirection?: () => boolean;
   +traceTurboModulePromiseRejectionsOnAndroid?: () => boolean;
   +useAlwaysAvailableJSErrorHandling?: () => boolean;
   +useFabricInterop?: () => boolean;

package/src/private/setup/setUpDOM.js

@@ -8,8 +8,7 @@
  * @format
  */
 
-import DOMRect from '../webapis/dom/geometry/DOMRect';
-import DOMRectReadOnly from '../webapis/dom/geometry/DOMRectReadOnly';
+import {polyfillGlobal} from '../../../Libraries/Utilities/PolyfillFunctions';
 
 let initialized = false;
 
@@ -20,9 +19,18 @@ export default function setUpDOM() {
 
   initialized = true;
 
-  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
-  global.DOMRect = DOMRect;
+  polyfillGlobal(
+    'DOMRect',
+    () => require('../webapis/dom/geometry/DOMRect').default,
+  );
 
-  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
-  global.DOMRectReadOnly = DOMRectReadOnly;
+  polyfillGlobal(
+    'DOMRectReadOnly',
+    () => require('../webapis/dom/geometry/DOMRectReadOnly').default,
+  );
+
+  polyfillGlobal(
+    'NodeList',
+    () => require('../webapis/dom/oldstylecollections/NodeList').default,
+  );
 }

package/src/private/setup/setUpMutationObserver.js

@@ -23,4 +23,9 @@ export default function setUpMutationObserver() {
     'MutationObserver',
     () => require('../webapis/mutationobserver/MutationObserver').default,
   );
+
+  polyfillGlobal(
+    'MutationRecord',
+    () => require('../webapis/mutationobserver/MutationRecord').default,
+  );
 }

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

@@ -25,6 +25,18 @@ type IntersectionObserverInit = {
   // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
   // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
   threshold?: number | $ReadOnlyArray<number>,
+
+  /**
+   * This is a React Native specific option (not spec compliant) that specifies
+   * ratio threshold(s) of the intersection area to the total `root` area.
+   *
+   * If set, it will either be a singular ratio value between 0-1 (inclusive)
+   * or an array of such ratios.
+   *
+   * Note: If `rn_rootThreshold` is set, and `threshold` is not set,
+   * `threshold` will not default to [0] (as per spec)
+   */
+  rn_rootThreshold?: number | $ReadOnlyArray<number>,
 };
 
 /**
@@ -44,13 +56,16 @@ type IntersectionObserverInit = {
  * elements with the same observer.
  *
  * This implementation only supports the `threshold` option at the moment
- * (`root` and `rootMargin` are not supported).
+ * (`root` and `rootMargin` are not supported) and provides a React Native specific
+ * option `rn_rootThreshold`.
+ *
  */
 export default class IntersectionObserver {
   _callback: IntersectionObserverCallback;
   _thresholds: $ReadOnlyArray<number>;
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
+  _rootThresholds: $ReadOnlyArray<number> | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -83,7 +98,12 @@ export default class IntersectionObserver {
     }
 
     this._callback = callback;
-    this._thresholds = normalizeThresholds(options?.threshold);
+
+    this._rootThresholds = normalizeRootThreshold(options?.rn_rootThreshold);
+    this._thresholds = normalizeThreshold(
+      options?.threshold,
+      this._rootThresholds != null, // only provide default if no rootThreshold
+    );
   }
 
   /**
@@ -115,14 +135,27 @@ export default class IntersectionObserver {
    * A list of thresholds, sorted in increasing numeric order, where each
    * threshold is a ratio of intersection area to bounding box area of an
    * observed target.
-   * Notifications for a target are generated when any of the thresholds are
-   * crossed for that target.
-   * If no value was passed to the constructor, `0` is used.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   *
+   * If no value was passed to the constructor, and no `rn_rootThreshold`
+   * is set, `0` is used.
    */
   get thresholds(): $ReadOnlyArray<number> {
     return this._thresholds;
   }
 
+  /**
+   * A list of root thresholds, sorted in increasing numeric order, where each
+   * threshold is a ratio of intersection area to bounding box area of the specified
+   * root view, which defaults to the viewport.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   */
+  get rootThresholds(): $ReadOnlyArray<number> | null {
+    return this._rootThresholds;
+  }
+
   /**
    * Adds an element to the set of target elements being watched by the
    * `IntersectionObserver`.
@@ -221,32 +254,84 @@ export default class IntersectionObserver {
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
  *
+ * If `defaultEmpty` is true, then defaults to empty array, otherwise [0].
+ *
  * @example
  * normalizeThresholds(0.5);                // → [0.5]
  * normalizeThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
  * normalizeThresholds(['1', '0.5', '0']);  // → [0, 0.5, 1]
+ * normalizeThresholds(null);               // → [0]
+ * normalizeThresholds([null, null]);       // → [0, 0]
+ *
+ * normalizeThresholds([null], true);       // → [0]
+ * normalizeThresholds(null, true);         // → []
+ * normalizeThresholds([], true);           // → []
  */
-function normalizeThresholds(threshold: mixed): $ReadOnlyArray<number> {
+function normalizeThreshold(
+  threshold: mixed,
+  defaultEmpty: boolean = false,
+): $ReadOnlyArray<number> {
   if (Array.isArray(threshold)) {
     if (threshold.length > 0) {
-      return threshold.map(normalizeThresholdValue).sort();
+      return threshold
+        .map(t => normalizeThresholdValue(t, 'threshold'))
+        .map(t => t ?? 0)
+        .sort();
+    } else if (defaultEmpty) {
+      return [];
     } else {
       return [0];
     }
   }
 
-  return [normalizeThresholdValue(threshold)];
+  const normalized = normalizeThresholdValue(threshold, 'threshold');
+  if (normalized == null) {
+    return defaultEmpty ? [] : [0];
+  }
+
+  return [normalized];
+}
+
+/**
+ * Converts the user defined `rn_rootThreshold` value into an array of sorted valid
+ * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
+ *
+ * If invalid array or null, returns null.
+ *
+ * @example
+ * normalizeRootThreshold(0.5);                 // → [0.5]
+ * normalizeRootThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
+ * normalizeRootThresholds([null, '0.5', '0']); // → [0, 0.5]
+ * normalizeRootThresholds(null);               // → null
+ * normalizeRootThresholds([null, null]);       // → null
+ */
+function normalizeRootThreshold(
+  rootThreshold: mixed,
+): null | $ReadOnlyArray<number> {
+  if (Array.isArray(rootThreshold)) {
+    const normalizedArr = rootThreshold
+      .map(rt => normalizeThresholdValue(rt, 'rn_rootThreshold'))
+      .filter((rt): rt is number => rt != null)
+      .sort();
+    return normalizedArr.length === 0 ? null : normalizedArr;
+  }
+
+  const normalized = normalizeThresholdValue(rootThreshold, 'rn_rootThreshold');
+  return normalized == null ? null : [normalized];
 }
 
-function normalizeThresholdValue(threshold: mixed): number {
+function normalizeThresholdValue(
+  threshold: mixed,
+  property: string,
+): null | number {
   if (threshold == null) {
-    return 0;
+    return null;
   }
 
   const thresholdAsNumber = Number(threshold);
   if (!Number.isFinite(thresholdAsNumber)) {
     throw new TypeError(
-      "Failed to read the 'threshold' property from 'IntersectionObserverInit': The provided double value is non-finite.",
+      `Failed to read the '${property}' property from 'IntersectionObserverInit': The provided double value is non-finite.`,
     );
   }
 

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

@@ -74,6 +74,32 @@ export default class IntersectionObserverEntry {
     return Math.min(ratio, 1);
   }
 
+  /**
+   * Returns the ratio of the `intersectionRect` to the `boundingRootRect`.
+   */
+  get rn_intersectionRootRatio(): number {
+    const intersectionRect = this.intersectionRect;
+
+    const rootRect = this._nativeEntry.rootRect;
+    const boundingRootRect = new DOMRectReadOnly(
+      rootRect[0],
+      rootRect[1],
+      rootRect[2],
+      rootRect[3],
+    );
+
+    if (boundingRootRect.width === 0 || boundingRootRect.height === 0) {
+      return 0;
+    }
+
+    const ratio =
+      (intersectionRect.width * intersectionRect.height) /
+      (boundingRootRect.width * boundingRootRect.height);
+
+    // Prevent rounding errors from making this value greater than 1.
+    return Math.min(ratio, 1);
+  }
+
   /**
    * Returns a `DOMRectReadOnly` representing the target's visible area.
    */

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

@@ -162,6 +162,7 @@ export function observe({
     intersectionObserverId,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
+    rootThresholds: registeredObserver.observer.rootThresholds,
   });
 
   return true;

package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -26,6 +26,7 @@ export type NativeIntersectionObserverObserveOptions = {
   intersectionObserverId: number,
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
+  rootThresholds?: ?$ReadOnlyArray<number>,
 };
 
 export interface Spec extends TurboModule {

package/src/private/webapis/intersectionobserver/specs/__mocks__/NativeIntersectionObserver.js

@@ -23,8 +23,10 @@ import nullthrows from 'nullthrows';
 
 type ObserverState = {
   thresholds: $ReadOnlyArray<number>,
+  rootThresholds?: ?$ReadOnlyArray<number>,
   intersecting: boolean,
   currentThreshold: ?number,
+  currentRootThreshold: ?number,
 };
 
 type Observation = {
@@ -74,8 +76,10 @@ const NativeIntersectionObserverMock = {
       ...options,
       state: {
         thresholds: options.thresholds,
+        rootThresholds: options.rootThresholds,
         intersecting: false,
         currentThreshold: null,
+        currentRootThreshold: null,
       },
     };
     observations.push(observation);
@@ -141,9 +145,14 @@ const NativeIntersectionObserverMock = {
     if (observation.state.intersecting) {
       observation.state.intersecting = false;
       observation.state.currentThreshold = null;
+      observation.state.currentRootThreshold = null;
     } else {
       observation.state.intersecting = true;
       observation.state.currentThreshold = observation.thresholds[0];
+      observation.state.currentRootThreshold =
+        observation.rootThresholds != null
+          ? observation.rootThresholds[0]
+          : null;
     }
     pendingRecords.push(createRecordFromObservation(observation));
     setImmediate(notifyIntersectionObservers);