@office-iss/react-native-win32 0.75.1 → 0.76.0-preview.1

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -166,9 +166,17 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
+  experimental_backgroundImage: {
+    process: require('../StyleSheet/processBackgroundImage').default,
+  },
+  experimental_boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
   experimental_filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  experimental_mixBlendMode: true,
+  isolation: true,
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -193,6 +193,8 @@ const validAttributesForNonEventProps = {
   accessibilityViewIsModal: true,
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
@@ -223,6 +225,11 @@ const validAttributesForNonEventProps = {
   experimental_filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  experimental_boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
+  experimental_mixBlendMode: true,
+  isolation: true,
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -193,6 +193,8 @@ const validAttributesForNonEventProps = {
   accessibilityViewIsModal: true,
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
@@ -223,6 +225,11 @@ const validAttributesForNonEventProps = {
   experimental_filter: {
     process: require('../StyleSheet/processFilter').default,
   },
+  experimental_boxShadow: {
+    process: require('../StyleSheet/processBoxShadow').default,
+  },
+  experimental_mixBlendMode: true,
+  isolation: true,
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -11,12 +11,12 @@
 import type {
   HostComponent,
   PartialViewConfig,
+  ViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
 
 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';
@@ -34,7 +34,6 @@ let getRuntimeConfig;
 export function setRuntimeConfigProvider(
   runtimeConfigProvider: (name: string) => ?{
     native: boolean,
-    strict: boolean,
     verify: boolean,
   },
 ): void {
@@ -54,13 +53,12 @@ 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,
     };
 
-    let viewConfig;
+    let viewConfig: ViewConfig;
     if (native) {
       viewConfig =
         getNativeComponentAttributes(name) ??
@@ -81,27 +79,29 @@ export function get<Config>(
       const nativeViewConfig = native
         ? viewConfig
         : getNativeComponentAttributes(name);
-      const staticViewConfig = native
+
+      if (nativeViewConfig == null) {
+        // Defer to static view config if native view config is missing.
+        return viewConfig;
+      }
+
+      const staticViewConfig: ViewConfig = native
         ? 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/Network/XMLHttpRequest.js

@@ -78,7 +78,9 @@ const REQUEST_EVENTS = [
 
 const XHR_EVENTS = REQUEST_EVENTS.concat('readystatechange');
 
-class XMLHttpRequestEventTarget extends (EventTarget(...REQUEST_EVENTS): any) {
+class XMLHttpRequestEventTarget extends (EventTarget(
+  ...REQUEST_EVENTS,
+): typeof EventTarget) {
   onload: ?Function;
   onloadstart: ?Function;
   onprogress: ?Function;
@@ -91,7 +93,7 @@ class XMLHttpRequestEventTarget extends (EventTarget(...REQUEST_EVENTS): any) {
 /**
  * Shared base for platform-specific XMLHttpRequest implementations.
  */
-class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
+class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
   static UNSENT: number = UNSENT;
   static OPENED: number = OPENED;
   static HEADERS_RECEIVED: number = HEADERS_RECEIVED;

package/Libraries/ReactNative/AppContainer-dev.js

@@ -90,7 +90,6 @@ const AppContainer = ({
   internal_excludeInspector = false,
   internal_excludeLogBox = false,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -150,10 +149,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer-prod.js

@@ -21,7 +21,6 @@ const AppContainer = ({
   fabric,
   initialProps,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -29,10 +28,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer.js

@@ -18,7 +18,6 @@ export type Props = $ReadOnly<{|
   fabric?: boolean,
   rootTag: number | RootTag,
   initialProps?: {...},
-  showArchitectureIndicator?: boolean,
   WrapperComponent?: ?React.ComponentType<any>,
   rootViewStyle?: ?ViewStyleProp,
   internal_excludeLogBox?: boolean,

package/Libraries/ReactNative/AppRegistry.js

@@ -73,7 +73,6 @@ let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
 
 let wrapperComponentProvider: ?WrapperComponentProvider;
 let rootViewStyleProvider: ?RootViewStyleProvider;
-let showArchitectureIndicator = false;
 
 /**
  * `AppRegistry` is the JavaScript entry point to running all React Native apps.
@@ -89,10 +88,6 @@ const AppRegistry = {
     rootViewStyleProvider = provider;
   },
 
-  enableArchitectureIndicator(enabled: boolean): void {
-    showArchitectureIndicator = enabled;
-  },
-
   registerConfig(config: Array<AppConfig>): void {
     config.forEach(appConfig => {
       if (appConfig.run) {
@@ -139,7 +134,6 @@ const AppRegistry = {
         wrapperComponentProvider && wrapperComponentProvider(appParameters),
         rootViewStyleProvider && rootViewStyleProvider(appParameters),
         appParameters.fabric,
-        showArchitectureIndicator,
         scopedPerformanceLogger,
         appKey === 'LogBox', // is logbox
         appKey,

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -382,6 +382,7 @@ const UIManagerJS: UIManagerJSInterface & {[string]: any} = {
       shadowNode,
     );
 
+    // eslint-disable-next-line no-bitwise
     let isAncestor = (result & DOCUMENT_POSITION_CONTAINED_BY) !== 0;
 
     callback([isAncestor]);

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -20,7 +20,7 @@ import type {
 import type {ElementRef} from 'react';
 
 import TextInputState from '../../Components/TextInput/TextInputState';
-import {getNodeFromInternalInstanceHandle} from '../../Renderer/shims/ReactFabric';
+import {getNodeFromInternalInstanceHandle} from '../../ReactNative/RendererProxy';
 import {getFabricUIManager} from '../FabricUIManager';
 import {create} from './ReactNativeAttributePayload';
 import warnForStyleProps from './warnForStyleProps';

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -15,7 +15,7 @@
 
 import type ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type ReadOnlyText from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
-import typeof ReactFabricType from '../../Renderer/shims/ReactFabric';
+import typeof * as RendererProxyT from '../../ReactNative/RendererProxy';
 import type {
   InternalInstanceHandle,
   Node,
@@ -32,7 +32,7 @@ let PublicInstanceClass:
 let ReadOnlyTextClass: Class<ReadOnlyText>;
 
 // Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactFabric: ReactFabricType;
+let RendererProxy: RendererProxyT;
 
 export function createPublicInstance(
   tag: number,
@@ -78,10 +78,10 @@ export function getNodeFromPublicInstance(
     return null;
   }
 
-  if (ReactFabric == null) {
-    ReactFabric = require('../../Renderer/shims/ReactFabric');
+  if (RendererProxy == null) {
+    RendererProxy = require('../../ReactNative/RendererProxy');
   }
-  return ReactFabric.getNodeFromInternalInstanceHandle(
+  return RendererProxy.getNodeFromInternalInstanceHandle(
     publicInstance.__internalInstanceHandle,
   );
 }

package/Libraries/ReactNative/RendererImplementation.js

@@ -8,15 +8,19 @@
  * @flow strict-local
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  InternalInstanceHandle,
+  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,
   onRecoverableError,
   onUncaughtError,
-} from '../Core/ErrorHandlers';
+} from '../../src/private/renderer/errorhandling/ErrorHandlers';
 import {type RootTag} from './RootTag';
 export function renderElement({
   element,
@@ -24,7 +28,7 @@ export function renderElement({
   useFabric,
   useConcurrentRoot,
 }: {
-  element: Element<ElementType>,
+  element: React.MixedElement,
   rootTag: number,
   useFabric: boolean,
   useConcurrentRoot: boolean,
@@ -139,3 +143,21 @@ export function isChildPublicInstance(
     childInstance,
   );
 }
+
+export function getNodeFromInternalInstanceHandle(
+  internalInstanceHandle: InternalInstanceHandle,
+): ?Node {
+  // This is only available in Fabric
+  return require('../Renderer/shims/ReactFabric').getNodeFromInternalInstanceHandle(
+    internalInstanceHandle,
+  );
+}
+
+export function getPublicInstanceFromInternalInstanceHandle(
+  internalInstanceHandle: InternalInstanceHandle,
+): mixed /*PublicInstance | PublicTextInstance | null*/ {
+  // This is only available in Fabric
+  return require('../Renderer/shims/ReactFabric').getPublicInstanceFromInternalInstanceHandle(
+    internalInstanceHandle,
+  );
+}

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -10,8 +10,12 @@
 
 'use strict';
 
+import processBoxShadow from '../StyleSheet/processBoxShadow';
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const resolveAssetSource = require('../Image/resolveAssetSource');
+const processBackgroundImage =
+  require('../StyleSheet/processBackgroundImage').default;
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray');
 const processFilter = require('../StyleSheet/processFilter').default;
@@ -191,8 +195,12 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processColorArray;
     case 'Filter':
       return processFilter;
+    case 'BackgroundImage':
+      return processBackgroundImage;
     case 'ImageSource':
       return resolveAssetSource;
+    case 'BoxShadow':
+      return processBoxShadow;
   }
   return null;
 }

package/Libraries/ReactNative/renderApplication.js

@@ -35,7 +35,6 @@ export default function renderApplication<Props: Object>(
   WrapperComponent?: ?React.ComponentType<any>,
   rootViewStyle?: ?ViewStyleProp,
   fabric?: boolean,
-  showArchitectureIndicator?: boolean,
   scopedPerformanceLogger?: IPerformanceLogger,
   isLogBox?: boolean,
   debugName?: string,
@@ -52,7 +51,6 @@ export default function renderApplication<Props: Object>(
       <AppContainer
         rootTag={rootTag}
         fabric={fabric}
-        showArchitectureIndicator={showArchitectureIndicator}
         WrapperComponent={WrapperComponent}
         rootViewStyle={rootViewStyle}
         initialProps={initialProps ?? Object.freeze({})}

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,10 +7,15 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<e7a1421518e1d99f18c5b14e85f44843>>
+ * @generated SignedSource<<89361333bb6b688486e35849a9c669a6>>
  */
 
-import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
+import type {
+  ElementRef,
+  ElementType,
+  MixedElement,
+  AbstractComponent,
+} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -86,6 +91,7 @@ export type ViewConfig = $ReadOnly<{
     }>,
     ...
   }>,
+  supportsRawText?: boolean,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration,
 }>;
@@ -93,6 +99,7 @@ export type ViewConfig = $ReadOnly<{
 export type PartialViewConfig = $ReadOnly<{
   bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
   directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
+  supportsRawText?: boolean,
   uiViewClassName: string,
   validAttributes?: PartialAttributeConfiguration,
 }>;
@@ -220,7 +227,7 @@ export type ReactNativeType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     options: ?RenderRootOptions,
@@ -255,7 +262,7 @@ export type ReactFabricType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,

package/Libraries/StyleSheet/StyleSheet.js

@@ -23,7 +23,7 @@ import type {
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
-import composeStyles from '../../src/private/core/composeStyles';
+import composeStyles from '../../src/private/styles/composeStyles';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;

package/Libraries/StyleSheet/StyleSheet.win32.js

@@ -23,7 +23,7 @@ import type {
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
-import composeStyles from '../../src/private/core/composeStyles';
+import composeStyles from '../../src/private/styles/composeStyles';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;

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;
@@ -227,6 +229,62 @@ export interface TransformsStyle {
   translateY?: AnimatableNumericValue | undefined;
 }
 
+export type FilterFunction =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {dropShadow: DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  standardDeviation?: number | string | undefined;
+  color?: ColorValue | number | undefined;
+};
+
+export type BoxShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  color?: string | undefined;
+  blurRadius?: ColorValue | number | undefined;
+  spreadDistance?: number | string | undefined;
+  inset?: boolean | undefined;
+};
+
+export type BlendMode =
+  | 'normal'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity';
+
+export type GradientValue = {
+  type: 'linearGradient';
+  // Angle or direction enums
+  direction?: string | undefined;
+  colorStops: ReadonlyArray<{
+    color: ColorValue;
+    positions?: ReadonlyArray<string[]> | undefined;
+  }>;
+};
+
 /**
  * @see https://reactnative.dev/docs/view#style
  */
@@ -276,6 +334,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
    * Controls whether the View can be the target of touch events.
    */
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
+  isolation?: 'auto' | 'isolate' | undefined;
   cursor?: CursorValue | undefined;
 }