@office-iss/react-native-win32 0.0.0-canary.262 → 0.0.0-canary.263

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -12,26 +12,29 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 
-export default class AnimatedWithChildren extends AnimatedNode {
-  _children: Array<AnimatedNode>;
+const {connectAnimatedNodes, disconnectAnimatedNodes} =
+  NativeAnimatedHelper.API;
 
-  constructor() {
-    super();
-    this._children = [];
-  }
+export default class AnimatedWithChildren extends AnimatedNode {
+  _children: Array<AnimatedNode> = [];
 
   __makeNative(platformConfig: ?PlatformConfig) {
     if (!this.__isNative) {
       this.__isNative = true;
-      for (const child of this._children) {
-        child.__makeNative(platformConfig);
-        NativeAnimatedHelper.API.connectAnimatedNodes(
-          this.__getNativeTag(),
-          child.__getNativeTag(),
-        );
+
+      const children = this._children;
+      let length = children.length;
+      if (length > 0) {
+        const nativeTag = this.__getNativeTag();
+
+        for (let ii = 0; ii < length; ii++) {
+          const child = children[ii];
+          child.__makeNative(platformConfig);
+          connectAnimatedNodes(nativeTag, child.__getNativeTag());
+        }
       }
     }
     super.__makeNative(platformConfig);
@@ -45,10 +48,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     if (this.__isNative) {
       // Only accept "native" animated nodes as children
       child.__makeNative(this.__getPlatformConfig());
-      NativeAnimatedHelper.API.connectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag(),
-      );
+      connectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
     }
   }
 
@@ -59,10 +59,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
       return;
     }
     if (this.__isNative && child.__isNative) {
-      NativeAnimatedHelper.API.disconnectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag(),
-      );
+      disconnectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
     }
     this._children.splice(index, 1);
     if (this._children.length === 0) {
@@ -77,7 +74,9 @@ export default class AnimatedWithChildren extends AnimatedNode {
   __callListeners(value: number): void {
     super.__callListeners(value);
     if (!this.__isNative) {
-      for (const child of this._children) {
+      const children = this._children;
+      for (let ii = 0, length = children.length; ii < length; ii++) {
+        const child = children[ii];
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());

package/Libraries/Animated/useAnimatedProps.js

@@ -13,11 +13,10 @@
 import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-import useDebouncedEffect from '../../src/private/hooks/useDebouncedEffect';
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
-import NativeAnimatedHelper from './NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
 import AnimatedValue from './nodes/AnimatedValue';
@@ -247,16 +246,15 @@ function addAnimatedValuesListenersToProps(
 function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
-  const userDrivenAnimationEndedListener = useRef<?EventSubscription>(null);
 
   useEffect(() => {
     // It is ok for multiple components to call `flushQueue` because it noops
     // if the queue is empty. When multiple animated components are mounted at
     // the same time. Only first component flushes the queue and the others will noop.
     NativeAnimatedHelper.API.flushQueue();
-
+    let drivenAnimationEndedListener: ?EventSubscription = null;
     if (node.__isNative) {
-      userDrivenAnimationEndedListener.current =
+      drivenAnimationEndedListener =
         NativeAnimatedHelper.nativeEventEmitter.addListener(
           'onUserDrivenAnimationEnded',
           data => {
@@ -266,10 +264,7 @@ function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
     }
 
     return () => {
-      if (userDrivenAnimationEndedListener.current) {
-        userDrivenAnimationEndedListener.current?.remove();
-        userDrivenAnimationEndedListener.current = null;
-      }
+      drivenAnimationEndedListener?.remove();
     };
   });
 
@@ -327,13 +322,19 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
     };
   }, []);
 
-  const useEffectImpl =
-    ReactNativeFeatureFlags.shouldUseDebouncedEffectsForAnimated()
-      ? useDebouncedEffect
-      : useEffect;
-
-  useEffectImpl(() => {
+  useEffect(() => {
     node.__attach();
+    let drivenAnimationEndedListener: ?EventSubscription = null;
+
+    if (node.__isNative) {
+      drivenAnimationEndedListener =
+        NativeAnimatedHelper.nativeEventEmitter.addListener(
+          'onUserDrivenAnimationEnded',
+          data => {
+            node.update();
+          },
+        );
+    }
     if (prevNodeRef.current != null) {
       const prevNode = prevNodeRef.current;
       // TODO: Stop restoring default values (unless `reset` is called).
@@ -348,6 +349,8 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
       } else {
         prevNodeRef.current = node;
       }
+
+      drivenAnimationEndedListener?.remove();
     };
   }, [node]);
 }

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 76,
   patch: 0,
-  prerelease: 'nightly-20240901-305b4357e',
+  prerelease: 'nightly-20240909-143f1ad29',
 };
 
 module.exports = {version};

package/Libraries/Image/Image.win32.js

@@ -13,9 +13,7 @@ import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
 import invariant from 'invariant'; // [Windows]
 
-import type {ImageProps as ImagePropsType} from './ImageProps';
-
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderWin32 from './NativeImageLoaderWin32'; // [Win32] Replace iOS
 
 import {createRootTag} from '../ReactNative/RootTag';

package/Libraries/Inspector/Inspector.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
@@ -164,7 +165,7 @@ function Inspector({
         />
       )}
 
-      <View style={[styles.panelContainer, panelContainerStyle]}>
+      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
           inspecting={selectedTab === 'elements-inspector'}
@@ -180,7 +181,7 @@ function Inspector({
           networking={selectedTab === 'network-profiling'}
           setNetworking={setNetworking}
         />
-      </View>
+      </SafeAreaView>
     </View>
   );
 }

package/Libraries/Inspector/Inspector.win32.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const ReactNative = require('../Renderer/shims/ReactNative');
@@ -170,7 +171,7 @@ function Inspector({
         />
       )}
 
-      <View style={[styles.panelContainer, panelContainerStyle]}>
+      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
           inspecting={selectedTab === 'elements-inspector'}
@@ -186,7 +187,7 @@ function Inspector({
           networking={selectedTab === 'network-profiling'}
           setNetworking={setNetworking}
         />
-      </View>
+      </SafeAreaView>
     </View>
   );
 }

package/Libraries/Inspector/InspectorPanel.js

@@ -80,16 +80,22 @@ class InspectorPanel extends React.Component<Props> {
             pressed={this.props.inspecting}
             onClick={this.props.setInspecting}
           />
-          <InspectorPanelButton
-            title={'Perf'}
-            pressed={this.props.perfing}
-            onClick={this.props.setPerfing}
-          />
-          <InspectorPanelButton
-            title={'Network'}
-            pressed={this.props.networking}
-            onClick={this.props.setNetworking}
-          />
+          {global.RN$Bridgeless === true ? null : (
+            // These Inspector Panel sub-features are removed under the New Arch.
+            // See https://github.com/react-native-community/discussions-and-proposals/pull/777
+            <>
+              <InspectorPanelButton
+                title={'Perf'}
+                pressed={this.props.perfing}
+                onClick={this.props.setPerfing}
+              />
+              <InspectorPanelButton
+                title={'Network'}
+                pressed={this.props.networking}
+                onClick={this.props.setNetworking}
+              />
+            </>
+          )}
           <InspectorPanelButton
             title={'Touchables'}
             pressed={this.props.touchTargeting}

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -14,6 +14,7 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 type Props = $ReadOnly<{|
   logs: $ReadOnlyArray<LogBoxLog>,
@@ -58,7 +59,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
     log => log.level === 'error' || log.level === 'fatal',
   );
   return (
-    <View style={styles.list}>
+    <SafeAreaView style={styles.list}>
       {warnings.length > 0 && (
         <View style={styles.toast}>
           <LogBoxLogNotification
@@ -81,7 +82,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
           />
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }
 

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -28,18 +28,7 @@ type Props = $ReadOnly<{
 }>;
 
 const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
-  Platform.OS === 'android'
-    ? function LogBoxInspectorHeaderSafeArea(props) {
-        // NOTE: Inline the import of `StatusBar` so that initializing this module
-        // does not require initializing a TurboModule (and main thread one, too).
-        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
-        const style = StyleSheet.compose(
-          {paddingTop: currentHeight},
-          props.style,
-        );
-        return <View {...props} style={style} />;
-      }
-    : SafeAreaView;
+  Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {

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

@@ -30,18 +30,7 @@ type Props = $ReadOnly<{
 }>;
 
 const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
-  Platform.OS === 'android'
-    ? function LogBoxInspectorHeaderSafeArea(props) {
-        // NOTE: Inline the import of `StatusBar` so that initializing this module
-        // does not require initializing a TurboModule (and main thread one, too).
-        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
-        const style = StyleSheet.compose(
-          {paddingTop: currentHeight},
-          props.style,
-        );
-        return <View {...props} style={style} />;
-      }
-    : SafeAreaView;
+  Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -182,21 +182,23 @@ type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
 
 export interface TransformsStyle {
   transform?:
-    | MaximumOneOf<
-        PerspectiveTransform &
-          RotateTransform &
-          RotateXTransform &
-          RotateYTransform &
-          RotateZTransform &
-          ScaleTransform &
-          ScaleXTransform &
-          ScaleYTransform &
-          TranslateXTransform &
-          TranslateYTransform &
-          SkewXTransform &
-          SkewYTransform &
-          MatrixTransform
-      >[]
+    | Readonly<
+        MaximumOneOf<
+          PerspectiveTransform &
+            RotateTransform &
+            RotateXTransform &
+            RotateYTransform &
+            RotateZTransform &
+            ScaleTransform &
+            ScaleXTransform &
+            ScaleYTransform &
+            TranslateXTransform &
+            TranslateYTransform &
+            SkewXTransform &
+            SkewYTransform &
+            MatrixTransform
+        >[]
+      >
     | string
     | undefined;
   transformOrigin?: Array<string | number> | string | undefined;

package/Libraries/Text/TextNativeComponent.win32.js

@@ -16,7 +16,6 @@ import type {TextProps} from './TextProps';
 import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
-import Platform from '../Utilities/Platform';
 
 export type NativeTextProps = $ReadOnly<{
   ...TextProps,

package/Libraries/vendor/emitter/EventEmitter.js

@@ -35,11 +35,9 @@ interface Registration<TArgs> {
   +remove: () => void;
 }
 
-// $FlowFixMe[deprecated-type]
-type Registry<TEventToArgsMap: {...}> = $ObjMap<
-  TEventToArgsMap,
-  <TArgs>(TArgs) => Set<Registration<TArgs>>,
->;
+type Registry<TEventToArgsMap: {...}> = {
+  [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
+};
 
 /**
  * EventEmitter manages listeners and publishes events to them.
@@ -64,6 +62,7 @@ type Registry<TEventToArgsMap: {...}> = $ObjMap<
 export default class EventEmitter<TEventToArgsMap: {...}>
   implements IEventEmitter<TEventToArgsMap>
 {
+  // $FlowFixMe[incompatible-type]
   #registry: Registry<TEventToArgsMap> = {};
 
   /**
@@ -126,6 +125,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
     eventType?: ?TEvent,
   ): void {
     if (eventType == null) {
+      // $FlowFixMe[incompatible-type]
       this.#registry = {};
     } else {
       delete this.#registry[eventType];

package/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.76.0-nightly-20240901-305b4357e",
+  "baseVersion": "0.76.0-nightly-20240909-143f1ad29",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "67b097833fd6733db6c64c57fbcb2efb3e9b51c5"
+      "baseHash": "cc375839a102263f435205df68b79d3d74c4f20a"
     },
     {
       "type": "derived",
@@ -31,13 +31,6 @@
       "baseFile": "packages/react-native/Libraries/Alert/Alert.js",
       "baseHash": "173b99e6ae120f14176cf3425877728787d3feed"
     },
-    {
-      "type": "derived",
-      "file": "src-win/Libraries/Animated/NativeAnimatedHelper.win32.js",
-      "baseFile": "packages/react-native/Libraries/Animated/NativeAnimatedHelper.js",
-      "baseHash": "2cefe6e59aa26f98158be3f35452f9a49d8395c4",
-      "issue": 11041
-    },
     {
       "type": "derived",
       "file": "src-win/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts",
@@ -299,7 +292,7 @@
       "type": "patch",
       "file": "src-win/Libraries/Inspector/Inspector.win32.js",
       "baseFile": "packages/react-native/Libraries/Inspector/Inspector.js",
-      "baseHash": "847b7e0e4f2088fac00f36eb30f3fa3b8e94ec14"
+      "baseHash": "ac4d1824877906651f2d82ab7910dda3ecb2bd80"
     },
     {
       "type": "patch",
@@ -317,7 +310,7 @@
       "type": "patch",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js",
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js",
-      "baseHash": "46b6ee5d65a0c820dd0a2415bd8f43e5e8807bae",
+      "baseHash": "9e394821ea51994288aa4626d0fdff7aae1aa0a1",
       "issue": 7952
     },
     {
@@ -512,6 +505,13 @@
       "baseFile": "packages/react-native/Libraries/Utilities/useMergeRefs.js",
       "baseHash": "1f1ca637132e6e0fe1549ba520d98508269ca2bd"
     },
+    {
+      "type": "patch",
+      "file": "src-win/src/private/animated/NativeAnimatedHelper.win32.js",
+      "baseFile": "packages/react-native/src/private/animated/NativeAnimatedHelper.js",
+      "baseHash": "c91921c31ad267817d7a38859005149473ca6da5",
+      "issue": 11041
+    },
     {
       "type": "derived",
       "file": "src-win/src/private/specs/modules/NativeAccessibilityInfoWin32.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.262",
+  "version": "0.0.0-canary.263",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,19 +30,20 @@
     "@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-20240901-305b4357e",
-    "@react-native/codegen": "0.76.0-nightly-20240901-305b4357e",
-    "@react-native/community-cli-plugin": "0.76.0-nightly-20240901-305b4357e",
-    "@react-native/gradle-plugin": "0.76.0-nightly-20240901-305b4357e",
-    "@react-native/js-polyfills": "0.76.0-nightly-20240901-305b4357e",
-    "@react-native/normalize-colors": "0.76.0-nightly-20240901-305b4357e",
-    "@react-native/virtualized-lists": "0.76.0-nightly-20240901-305b4357e",
+    "@react-native/assets-registry": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/codegen": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/community-cli-plugin": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/gradle-plugin": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/js-polyfills": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/normalize-colors": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/virtualized-lists": "0.76.0-nightly-20240909-143f1ad29",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
     "art": "^0.10.0",
     "base64-js": "^1.5.1",
     "chalk": "^4.0.0",
+    "commander": "^12.0.0",
     "event-target-shim": "^5.0.1",
     "flow-enums-runtime": "^0.0.6",
     "glob": "^7.1.1",
@@ -54,7 +55,7 @@
     "metro-source-map": "^0.80.10",
     "mkdirp": "^0.5.1",
     "nullthrows": "^1.1.1",
-    "pretty-format": "^26.5.2",
+    "pretty-format": "^29.7.0",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
     "react-devtools-core": "^5.3.1",
@@ -69,32 +70,32 @@
     "yargs": "^17.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/eslint-parser": "^7.20.0",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
     "@react-native/metro-config": "0.76.0-nightly-20240701-9f6cb21ed",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.26",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.30",
-    "@rnw-scripts/just-task": "2.3.43",
+    "@rnw-scripts/eslint-config": "1.2.27",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.31",
+    "@rnw-scripts/just-task": "2.3.44",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.17",
     "@types/node": "^18.0.0",
     "@types/prop-types": "15.7.1",
     "@types/react": "^18.2.6",
     "eslint": "^8.19.0",
-    "flow-bin": "^0.245.0",
+    "flow-bin": "^0.245.2",
     "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-20240901-305b4357e",
-    "react-native-platform-override": "^1.9.45",
+    "react-native": "0.76.0-nightly-20240909-143f1ad29",
+    "react-native-platform-override": "^1.9.46",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.76.0-nightly-20240901-305b4357e"
+    "react-native": "0.76.0-nightly-20240909-143f1ad29"
   },
   "beachball": {
     "defaultNpmTag": "canary",