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

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/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')

package/Libraries/Settings/Settings.js

@@ -8,26 +8,20 @@
  * @flow
  */
 
-'use strict';
+import Platform from '../Utilities/Platform';
 
-const Settings = {
-  get(key: string): any {
-    console.warn('Settings is not yet supported on this platform.');
-    return null;
-  },
-
-  set(settings: Object) {
-    console.warn('Settings is not yet supported on this platform.');
-  },
-
-  watchKeys(keys: string | Array<string>, callback: () => void): number {
-    console.warn('Settings is not yet supported on this platform.');
-    return -1;
-  },
-
-  clearWatch(watchId: number) {
-    console.warn('Settings is not yet supported on this platform.');
-  },
+let Settings: {
+  get(key: string): any,
+  set(settings: Object): void,
+  watchKeys(keys: string | Array<string>, callback: () => void): number,
+  clearWatch(watchId: number): void,
+  ...
 };
 
+if (Platform.OS === 'ios') {
+  Settings = require('./Settings').default;
+} else {
+  Settings = require('./SettingsFallback').default;
+}
+
 export default Settings;

package/Libraries/Settings/Settings.win32.js

@@ -1,28 +1,27 @@
 /**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
+ * 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.
+ *
+ * @flow
  * @format
  */
-'use strict';
 
-var Settings = {
-  get(key: string): any {
-    console.warn('Settings is not yet supported on Win32');
-    return null;
-  },
+import Platform from '../Utilities/Platform';
 
-  set(settings: Object) {
-    console.warn('Settings is not yet supported on Win32');
-  },
-
-  watchKeys(keys: string | Array<string>, callback: () => void): number {
-    console.warn('Settings is not yet supported on Win32');
-    return -1;
-  },
-
-  clearWatch(watchId: number) {
-    console.warn('Settings is not yet supported on Win32');
-  },
+let Settings: {
+  get(key: string): any,
+  set(settings: Object): void,
+  watchKeys(keys: string | Array<string>, callback: () => void): number,
+  clearWatch(watchId: number): void,
+  ...
 };
 
+if (Platform.OS === 'ios') {
+  Settings = require('./Settings').default;
+} else {
+  Settings = require('./SettingsFallback').default;
+}
+
 export default Settings;

package/Libraries/Settings/SettingsFallback.js

@@ -0,0 +1,33 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+const Settings = {
+  get(key: string): any {
+    console.warn('Settings is not yet supported on this platform.');
+    return null;
+  },
+
+  set(settings: Object) {
+    console.warn('Settings is not yet supported on this platform.');
+  },
+
+  watchKeys(keys: string | Array<string>, callback: () => void): number {
+    console.warn('Settings is not yet supported on this platform.');
+    return -1;
+  },
+
+  clearWatch(watchId: number) {
+    console.warn('Settings is not yet supported on this platform.');
+  },
+};
+
+export default Settings;

package/Libraries/StyleSheet/PlatformColorValueTypes.js

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+export * from './PlatformColorValueTypes';

package/Libraries/StyleSheet/Rect.js

@@ -15,6 +15,7 @@ export type Rect = $ReadOnly<{
   top?: ?number,
 }>;
 
+export type Insets = Rect;
 export type RectOrSize = Rect | number;
 
 export function createSquare(size: number): Rect {

package/Libraries/StyleSheet/StyleSheet.js.flow

@@ -26,9 +26,10 @@ import type {
 } from './StyleSheetTypes';
 
 export type {
-  StyleProp,
   BoxShadowValue,
   FilterFunction,
+  NativeColorValue,
+  StyleProp,
 } from './StyleSheetTypes';
 
 export type StyleSheetProperties = {
@@ -36,8 +37,6 @@ export type StyleSheetProperties = {
   flatten<T: string>(style: T): T,
 };
 
-export type {NativeColorValue} from './StyleSheetTypes';
-
 /**
  * This type should be used as the type for anything that is a color. It is
  * most useful when using DynamicColorIOS which can be a string or a dynamic
@@ -49,6 +48,7 @@ export type ColorValue = ____ColorValue_Internal;
 
 /**
  * Expose the opaque type for NativeColorValue.
+ * @deprecated Use NativeColorValue instead.
  */
 export type OpaqueColorValue = NativeColorValue;
 

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {AnimatedBaseProps} from '../Animated/createAnimatedComponent';
+import type {WithAnimatedValue} from '../Animated/createAnimatedComponent';
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
 import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
@@ -38,8 +38,7 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
-export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
-export type AnimatableNumericValue = number | AnimatedNode;
+export type DimensionValue = number | string | 'auto' | null;
 
 export type CursorValue = 'auto' | 'pointer';
 
@@ -694,7 +693,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
    */
-  shadowOpacity?: AnimatableNumericValue,
+  shadowOpacity?: number,
   /**
    * Sets the drop shadow blur radius
    * @platform ios
@@ -777,32 +776,32 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
   borderBlockColor?: ____ColorValue_Internal,
   borderBlockEndColor?: ____ColorValue_Internal,
   borderBlockStartColor?: ____ColorValue_Internal,
-  borderRadius?: AnimatableNumericValue | string,
-  borderBottomEndRadius?: AnimatableNumericValue | string,
-  borderBottomLeftRadius?: AnimatableNumericValue | string,
-  borderBottomRightRadius?: AnimatableNumericValue | string,
-  borderBottomStartRadius?: AnimatableNumericValue | string,
-  borderEndEndRadius?: AnimatableNumericValue | string,
-  borderEndStartRadius?: AnimatableNumericValue | string,
-  borderStartEndRadius?: AnimatableNumericValue | string,
-  borderStartStartRadius?: AnimatableNumericValue | string,
-  borderTopEndRadius?: AnimatableNumericValue | string,
-  borderTopLeftRadius?: AnimatableNumericValue | string,
-  borderTopRightRadius?: AnimatableNumericValue | string,
-  borderTopStartRadius?: AnimatableNumericValue | string,
+  borderRadius?: number | string,
+  borderBottomEndRadius?: number | string,
+  borderBottomLeftRadius?: number | string,
+  borderBottomRightRadius?: number | string,
+  borderBottomStartRadius?: number | string,
+  borderEndEndRadius?: number | string,
+  borderEndStartRadius?: number | string,
+  borderStartEndRadius?: number | string,
+  borderStartStartRadius?: number | string,
+  borderTopEndRadius?: number | string,
+  borderTopLeftRadius?: number | string,
+  borderTopRightRadius?: number | string,
+  borderTopStartRadius?: number | string,
   borderStyle?: 'solid' | 'dotted' | 'dashed',
-  borderWidth?: AnimatableNumericValue,
-  borderBottomWidth?: AnimatableNumericValue,
-  borderEndWidth?: AnimatableNumericValue,
-  borderLeftWidth?: AnimatableNumericValue,
-  borderRightWidth?: AnimatableNumericValue,
-  borderStartWidth?: AnimatableNumericValue,
-  borderTopWidth?: AnimatableNumericValue,
-  opacity?: AnimatableNumericValue,
+  borderWidth?: number,
+  borderBottomWidth?: number,
+  borderEndWidth?: number,
+  borderLeftWidth?: number,
+  borderRightWidth?: number,
+  borderStartWidth?: number,
+  borderTopWidth?: number,
+  opacity?: number,
   outlineColor?: ____ColorValue_Internal,
-  outlineOffset?: AnimatableNumericValue,
+  outlineOffset?: number,
   outlineStyle?: 'solid' | 'dotted' | 'dashed',
-  outlineWidth?: AnimatableNumericValue,
+  outlineWidth?: number,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
@@ -992,9 +991,8 @@ export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
   Partial<____DangerouslyImpreciseStyle_Internal>,
 >;
 
-export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = StyleProp<
-  Partial<AnimatedBaseProps<____DangerouslyImpreciseStyle_Internal>>,
->;
+export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
+  WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
 
 export type ____ViewStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____ViewStyle_Internal>>,

package/Libraries/StyleSheet/flattenStyle.js

@@ -10,17 +10,22 @@
 
 'use strict';
 
+import type AnimatedNode from '../Animated/nodes/AnimatedNode';
 import type {
   ____DangerouslyImpreciseAnimatedStyleProp_Internal,
   ____FlattenStyleProp_Internal,
 } from './StyleSheetTypes';
 
+type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
+  ? empty
+  : TStyleProp;
+
 function flattenStyle<
   TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
 >(
   style: ?TStyleProp,
   // $FlowFixMe[underconstrained-implicit-instantiation]
-): ?____FlattenStyleProp_Internal<TStyleProp> {
+): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>> {
   if (style === null || typeof style !== 'object') {
     return undefined;
   }
@@ -39,6 +44,7 @@ function flattenStyle<
       for (const key in computedStyle) {
         // $FlowFixMe[incompatible-use]
         // $FlowFixMe[invalid-computed-prop]
+        // $FlowFixMe[prop-missing]
         result[key] = computedStyle[key];
       }
     }

package/Libraries/Text/Text.js

@@ -35,7 +35,7 @@ type TextForwardRef = React.ElementRef<
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: component(
+const TextImpl: component(
   ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
@@ -330,7 +330,7 @@ const Text: component(
   },
 );
 
-Text.displayName = 'Text';
+TextImpl.displayName = 'Text';
 
 type TextPressabilityProps = $ReadOnly<{
   onLongPress?: ?(event: GestureResponderEvent) => mixed,
@@ -536,4 +536,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-export default Text;
+export default TextImpl;

package/Libraries/Text/Text.win32.js

@@ -35,7 +35,7 @@ type TextForwardRef = React.ElementRef<
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: component(
+const TextImpl: component(
   ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
@@ -370,7 +370,7 @@ const Text: component(
   },
 );
 
-Text.displayName = 'Text';
+TextImpl.displayName = 'Text';
 
 type TextPressabilityProps = $ReadOnly<{
   onLongPress?: ?(event: GestureResponderEvent) => mixed,
@@ -576,4 +576,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-export default Text;
+export default TextImpl;

package/Libraries/Text/TextProps.js

@@ -25,7 +25,7 @@ import type {
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
 
-import React from 'react';
+import * as React from 'react';
 
 export type PressRetentionOffset = $ReadOnly<{
   top: number,

package/Libraries/Text/TextProps.win32.js

@@ -25,7 +25,7 @@ import type {
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
 
-import React from 'react';
+import * as React from 'react';
 
 export type PressRetentionOffset = $ReadOnly<{
   top: number,

package/Libraries/Utilities/Appearance.js

@@ -16,6 +16,8 @@ import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 import invariant from 'invariant';
 
+export type {AppearancePreferences};
+
 type Appearance = {
   colorScheme: ?ColorSchemeName,
 };

package/Libraries/Utilities/BackHandler.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import BackHandler from './BackHandler';
+
+export default BackHandler;

package/Libraries/Utilities/Platform.js

@@ -0,0 +1,17 @@
+/**
+ * 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 strict
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import Platform from './Platform';
+
+export default Platform;

package/Libraries/Utilities/PlatformTypes.js

@@ -196,6 +196,8 @@ type Win32Platform = {
 type WebPlatform = {
   OS: 'web',
   // $FlowFixMe[unsafe-getters-setters]
+  get Version(): void,
+  // $FlowFixMe[unsafe-getters-setters]
   get constants(): {
     reactNativeVersion: {
       major: number,

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -13,7 +13,7 @@
 import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-renderer';
 
 import TouchableWithoutFeedback from '../Components/Touchable/TouchableWithoutFeedback';
-import React from 'react';
+import * as React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 
 const Switch = require('../Components/Switch/Switch').default;