@office-iss/react-native-win32 0.0.0-canary.291 → 0.0.0-canary.293

package/Libraries/NewAppScreen/components/DebugInstructions.js

@@ -11,7 +11,7 @@
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import React from 'react';
+import * as React from 'react';
 
 const styles = StyleSheet.create({
   highlight: {

package/Libraries/NewAppScreen/components/Header.js

@@ -14,7 +14,7 @@ import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
 import HermesBadge from './HermesBadge';
-import React from 'react';
+import * as React from 'react';
 
 const Header = (): React.Node => {
   const isDarkMode = useColorScheme() === 'dark';

package/Libraries/NewAppScreen/components/HermesBadge.js

@@ -13,7 +13,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
-import React from 'react';
+import * as React from 'react';
 
 const HermesBadge = (): React.Node => {
   const isDarkMode = useColorScheme() === 'dark';

package/Libraries/NewAppScreen/components/LearnMoreLinks.js

@@ -15,7 +15,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
-import React, {Fragment} from 'react';
+import * as React from 'react';
 
 const links = [
   {
@@ -84,7 +84,7 @@ const LinkList = (): React.Node => {
   return (
     <View style={styles.container}>
       {links.map(({id, title, link, description}) => (
-        <Fragment key={id}>
+        <React.Fragment key={id}>
           <View
             style={[
               styles.separator,
@@ -108,7 +108,7 @@ const LinkList = (): React.Node => {
               {description}
             </Text>
           </TouchableOpacity>
-        </Fragment>
+        </React.Fragment>
       ))}
     </View>
   );

package/Libraries/NewAppScreen/components/ReloadInstructions.js

@@ -11,7 +11,7 @@
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import React from 'react';
+import * as React from 'react';
 
 const styles = StyleSheet.create({
   highlight: {

package/Libraries/Performance/Systrace.js

@@ -10,7 +10,7 @@
 
 import typeof * as SystraceModule from './Systrace';
 
-const TRACE_TAG_REACT_APPS = 1 << 17; // eslint-disable-line no-bitwise
+const TRACE_TAG_REACT = 1 << 13; // eslint-disable-line no-bitwise
 
 let _asyncCookie = 0;
 
@@ -32,7 +32,7 @@ type EventArgs = ?{[string]: string};
  */
 export function isEnabled(): boolean {
   return global.nativeTraceIsTracing
-    ? global.nativeTraceIsTracing(TRACE_TAG_REACT_APPS)
+    ? global.nativeTraceIsTracing(TRACE_TAG_REACT)
     : Boolean(global.__RCTProfileIsProfiling);
 }
 
@@ -52,7 +52,7 @@ export function beginEvent(eventName: EventName, args?: EventArgs): void {
   if (isEnabled()) {
     const eventNameString =
       typeof eventName === 'function' ? eventName() : eventName;
-    global.nativeTraceBeginSection(TRACE_TAG_REACT_APPS, eventNameString, args);
+    global.nativeTraceBeginSection(TRACE_TAG_REACT, eventNameString, args);
   }
 }
 
@@ -61,7 +61,7 @@ export function beginEvent(eventName: EventName, args?: EventArgs): void {
  */
 export function endEvent(args?: EventArgs): void {
   if (isEnabled()) {
-    global.nativeTraceEndSection(TRACE_TAG_REACT_APPS, args);
+    global.nativeTraceEndSection(TRACE_TAG_REACT, args);
   }
 }
 
@@ -80,7 +80,7 @@ export function beginAsyncEvent(
     const eventNameString =
       typeof eventName === 'function' ? eventName() : eventName;
     global.nativeTraceBeginAsyncSection(
-      TRACE_TAG_REACT_APPS,
+      TRACE_TAG_REACT,
       eventNameString,
       cookie,
       args,
@@ -102,7 +102,7 @@ export function endAsyncEvent(
     const eventNameString =
       typeof eventName === 'function' ? eventName() : eventName;
     global.nativeTraceEndAsyncSection(
-      TRACE_TAG_REACT_APPS,
+      TRACE_TAG_REACT,
       eventNameString,
       cookie,
       args,
@@ -118,7 +118,7 @@ export function counterEvent(eventName: EventName, value: number): void {
     const eventNameString =
       typeof eventName === 'function' ? eventName() : eventName;
     global.nativeTraceCounter &&
-      global.nativeTraceCounter(TRACE_TAG_REACT_APPS, eventNameString, value);
+      global.nativeTraceCounter(TRACE_TAG_REACT, eventNameString, value);
   }
 }
 

package/Libraries/ReactNative/AppContainer-dev.js

@@ -53,7 +53,8 @@ const InspectorDeferred = ({
 }: InspectorDeferredProps) => {
   // D39382967 adds a require cycle: InitializeCore -> AppContainer -> Inspector -> InspectorPanel -> ScrollView -> InitializeCore
   // We can't remove it yet, fallback to dynamic require for now. This is the only reason why this logic is in a separate function.
-  const Inspector = require('../../src/private/inspector/Inspector').default;
+  const Inspector =
+    require('../../src/private/devsupport/devmenu/elementinspector/Inspector').default;
 
   return (
     <Inspector
@@ -74,7 +75,7 @@ const ReactDevToolsOverlayDeferred = ({
   reactDevToolsAgent,
 }: ReactDevToolsOverlayDeferredProps) => {
   const ReactDevToolsOverlay =
-    require('../../src/private/inspector/ReactDevToolsOverlay').default;
+    require('../../src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay').default;
 
   return (
     <ReactDevToolsOverlay

package/Libraries/ReactNative/RendererImplementation.js

@@ -13,7 +13,6 @@ import type {
   InternalInstanceHandle,
   Node,
 } from '../Renderer/shims/ReactNativeTypes';
-import type {ElementRef, ElementType} from 'react';
 
 import {
   onCaughtError,
@@ -21,6 +20,8 @@ import {
   onUncaughtError,
 } from '../../src/private/renderer/errorhandling/ErrorHandlers';
 import {type RootTag} from './RootTag';
+import * as React from 'react';
+
 export function renderElement({
   element,
   rootTag,
@@ -58,9 +59,9 @@ export function renderElement({
   }
 }
 
-export function findHostInstance_DEPRECATED<TElementType: ElementType>(
+export function findHostInstance_DEPRECATED<TElementType: React.ElementType>(
   // $FlowFixMe[incompatible-call]
-  componentOrHandle: ?(ElementRef<TElementType> | number),
+  componentOrHandle: ?(React.ElementRef<TElementType> | number),
 ): ?HostInstance {
   return require('../Renderer/shims/ReactNative').default.findHostInstance_DEPRECATED(
     // $FlowFixMe[incompatible-call]
@@ -68,9 +69,9 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(
   );
 }
 
-export function findNodeHandle<TElementType: ElementType>(
+export function findNodeHandle<TElementType: React.ElementType>(
   // $FlowFixMe[incompatible-call]
-  componentOrHandle: ?(ElementRef<TElementType> | number),
+  componentOrHandle: ?(React.ElementRef<TElementType> | number),
 ): ?number {
   return require('../Renderer/shims/ReactNative').default.findNodeHandle(
     // $FlowFixMe[incompatible-call]

package/Libraries/ReactNative/renderApplication.js

@@ -13,6 +13,7 @@ import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger';
 import PerformanceLoggerContext from '../Utilities/PerformanceLoggerContext';
+import warnOnce from '../Utilities/warnOnce';
 import AppContainer from './AppContainer';
 import DisplayMode, {type DisplayModeType} from './DisplayMode';
 import getCachedComponentWithDebugName from './getCachedComponentWithDebugName';
@@ -104,5 +105,13 @@ export default function renderApplication<Props: Object>(
     useFabric: Boolean(fabric),
     useConcurrentRoot,
   });
+
+  const newArchitecture = !!fabric;
+  if (!newArchitecture) {
+    warnOnce(
+      '[OSS][OldArchDeprecatedWarning]',
+      'The app is running using the Legacy Architecture. The Legacy Architecture is deprecated and will be removed in a future version of React Native. Please consider migrating to the New Architecture. For more information, please see https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here',
+    );
+  }
   performanceLogger.stopTimespan('renderApplication_React_render');
 }

package/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -8,6 +8,7 @@
  * @flow strict-local
  */
 
+import typeof CustomEvent from '../../src/private/webapis/dom/events/CustomEvent';
 import typeof BatchedBridge from '../BatchedBridge/BatchedBridge';
 import typeof legacySendAccessibilityEvent from '../Components/AccessibilityInfo/legacySendAccessibilityEvent';
 import typeof TextInputState from '../Components/TextInput/TextInputState';
@@ -15,7 +16,6 @@ import typeof ExceptionsManager from '../Core/ExceptionsManager';
 import typeof RawEventEmitter from '../Core/RawEventEmitter';
 import typeof ReactFiberErrorDialog from '../Core/ReactFiberErrorDialog';
 import typeof RCTEventEmitter from '../EventEmitter/RCTEventEmitter';
-import typeof CustomEvent from '../Events/CustomEvent';
 import typeof {
   createPublicInstance,
   createPublicRootInstance,
@@ -99,7 +99,7 @@ module.exports = {
     return require('../Core/RawEventEmitter').default;
   },
   get CustomEvent(): CustomEvent {
-    return require('../Events/CustomEvent').default;
+    return require('../../src/private/webapis/dom/events/CustomEvent').default;
   },
   get createAttributePayload(): createAttributePayload {
     return require('../ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload')