@office-iss/react-native-win32 0.0.0-canary.259 → 0.0.0-canary.260

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,
@@ -226,6 +228,8 @@ const validAttributesForNonEventProps = {
   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,
@@ -226,6 +228,8 @@ const validAttributesForNonEventProps = {
   experimental_boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
+  experimental_mixBlendMode: true,
+  isolation: true,
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},

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/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,7 +8,11 @@
  * @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';
 
@@ -16,7 +20,7 @@ import {
   onCaughtError,
   onRecoverableError,
   onUncaughtError,
-} from '../Core/ErrorHandlers';
+} from '../../src/private/renderer/errorhandling/ErrorHandlers';
 import {type RootTag} from './RootTag';
 export function renderElement({
   element,
@@ -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/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

@@ -273,6 +273,16 @@ export type BlendMode =
   | 'color'
   | 'luminosity';
 
+export type GradientValue = {
+  type: 'linearGradient';
+  // Angle or direction enums
+  direction: string | undefined;
+  colorStops: Array<{
+    color: ColorValue;
+    position: number | undefined;
+  }>;
+};
+
 /**
  * @see https://reactnative.dev/docs/view#style
  */
@@ -322,6 +332,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;
 }
 

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -709,6 +709,16 @@ export type DropShadowPrimitive = {
   color?: ____ColorValue_Internal,
 };
 
+export type GradientValue = {
+  type: 'linearGradient',
+  // Angle or direction enums
+  direction?: string,
+  colorStops: $ReadOnlyArray<{
+    color: ____ColorValue_Internal,
+    position?: string,
+  }>,
+};
+
 export type BoxShadowPrimitive = {
   offsetX: number | string,
   offsetY: number | string,
@@ -778,9 +788,11 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
-  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive>,
-  experimental_filter?: $ReadOnlyArray<FilterFunction>,
+  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
+  experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
+  isolation?: 'auto' | 'isolate',
 }>;
 
 export type ____ViewStyle_Internal = $ReadOnly<{

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -0,0 +1,286 @@
+/**
+ * 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-local
+ */
+
+'use strict';
+
+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 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 ParsedGradientValue = {
+  type: 'linearGradient',
+  start: {x: number, y: number},
+  end: {x: number, y: number},
+  colorStops: $ReadOnlyArray<{
+    color: ProcessedColorValue,
+    position: number,
+  }>,
+};
+
+export default function processBackgroundImage(
+  backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
+): $ReadOnlyArray<ParsedGradientValue> {
+  let result: $ReadOnlyArray<ParsedGradientValue> = [];
+  if (backgroundImage == null) {
+    return result;
+  }
+
+  if (typeof backgroundImage === 'string') {
+    result = parseCSSLinearGradient(backgroundImage);
+  } else if (Array.isArray(backgroundImage)) {
+    for (const bgImage of backgroundImage) {
+      const processedColorStops = [];
+      for (let index = 0; index < bgImage.colorStops.length; index++) {
+        const stop = bgImage.colorStops[index];
+        const processedColor = processColor(stop.color);
+        let processedPosition: number | null = null;
+
+        // Currently we only support percentage and undefined value for color stop position.
+        if (typeof stop.position === 'undefined') {
+          processedPosition =
+            bgImage.colorStops.length === 1
+              ? 1
+              : index / (bgImage.colorStops.length - 1);
+        } else if (stop.position.endsWith('%')) {
+          processedPosition = parseFloat(stop.position) / 100;
+        } else {
+          // If a color stop position is invalid, return an empty array and do not apply gradient. Same as web.
+          return [];
+        }
+
+        if (processedColor != null) {
+          processedColorStops.push({
+            color: processedColor,
+            position: processedPosition,
+          });
+        } else {
+          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
+          return [];
+        }
+      }
+
+      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;
+        }
+      }
+
+      if (points != null) {
+        result = result.concat({
+          type: 'linearGradient',
+          start: points.start,
+          end: points.end,
+          colorStops: processedColorStops,
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+function parseCSSLinearGradient(
+  cssString: string,
+): $ReadOnlyArray<ParsedGradientValue> {
+  const gradients = [];
+  let match;
+  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;
+    const trimmedDirection = parts[0].trim().toLowerCase();
+    const colorStopRegex =
+      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+([0-9.]+%?))?\s*/gi;
+
+    if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
+      const angle = parseAngle(trimmedDirection);
+      if (angle != null) {
+        points = calculateStartEndPointsFromAngle(angle);
+        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;
+        parts.shift();
+      } else {
+        // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
+      }
+    } else if (!colorStopRegex.test(trimmedDirection)) {
+      // If first part is not an angle/direction or a color stop, return an empty array and do not apply any gradient. Same as web.
+      return [];
+    }
+    colorStopRegex.lastIndex = 0;
+
+    const colorStops = [];
+    const fullColorStopsStr = parts.join(',');
+    let colorStopMatch;
+    while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
+      const [, color, position] = colorStopMatch;
+      const processedColor = processColor(color.trim().toLowerCase());
+      if (
+        processedColor != null &&
+        (typeof position === 'undefined' || position.endsWith('%'))
+      ) {
+        colorStops.push({
+          color: processedColor,
+          position: position ? parseFloat(position) / 100 : null,
+        });
+      } else {
+        // If a color or position is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
+      }
+    }
+
+    gradients.push({
+      type: 'linearGradient',
+      start: points.start,
+      end: points.end,
+      colorStops: colorStops.map((stop, index, array) => ({
+        color: stop.color,
+        position:
+          stop.position ??
+          (array.length === 1 ? 1 : index / (array.length - 1)),
+      })),
+    });
+  }
+
+  return gradients;
+}
+
+function calculateStartEndPointsFromDirection(direction: string): ?{
+  start: {x: number, y: number},
+  end: {x: number, y: number},
+} {
+  // Remove extra whitespace
+  const normalizedDirection = direction.replace(/\s+/g, ' ');
+
+  switch (normalizedDirection) {
+    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},
+      };
+    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},
+      };
+    case 'to bottom right':
+    case 'to right bottom':
+      return {
+        start: {x: 0, y: 0},
+        end: {x: 1, y: 1},
+      };
+    case 'to top left':
+    case 'to left top':
+      return {
+        start: {x: 1, y: 1},
+        end: {x: 0, y: 0},
+      };
+    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},
+      };
+    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;
+  }
+
+  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;
+  }
+
+  const [, value, unit] = match;
+
+  const numericValue = parseFloat(value);
+  switch (unit) {
+    case 'deg':
+      return (numericValue * Math.PI) / 180;
+    case 'grad':
+      return (numericValue * Math.PI) / 200;
+    case 'rad':
+      return numericValue;
+    case 'turn':
+      return numericValue * 2 * Math.PI;
+    default:
+      return null;
+  }
+}

package/Libraries/Text/Text.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {NativeTextProps} from './TextNativeComponent';
@@ -133,7 +134,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
       let _selectable = selectable;
 
-      let processedStyle: ?TextStyleInternal = flattenStyle(_style);
+      let processedStyle = flattenStyle<TextStyleProp>(_style);
       if (processedStyle != null) {
         let overrides: ?{...TextStyleInternal} = null;
         if (typeof processedStyle.fontWeight === 'number') {
@@ -158,7 +159,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
         if (overrides != null) {
           // $FlowFixMe[incompatible-type]
-          processedStyle = [processedStyle, overrides];
+          _style = [_style, overrides];
         }
       }
 
@@ -178,7 +179,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
                 numberOfLines: _numberOfLines,
                 selectable: _selectable,
                 selectionColor: _selectionColor,
-                style: processedStyle,
+                style: _style,
                 disabled: disabled,
                 children,
               }}
@@ -212,7 +213,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             ref={forwardedRef}
             selectable={_selectable}
             selectionColor={_selectionColor}
-            style={processedStyle}
+            style={_style}
             disabled={disabled}>
             {children}
           </NativeVirtualText>
@@ -256,7 +257,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
               numberOfLines: _numberOfLines,
               selectable: _selectable,
               selectionColor: _selectionColor,
-              style: processedStyle,
+              style: _style,
               children,
             }}
             textPressabilityProps={{
@@ -291,7 +292,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             ref={forwardedRef}
             selectable={_selectable}
             selectionColor={_selectionColor}
-            style={processedStyle}>
+            style={_style}>
             {children}
           </NativeText>
         );

package/Libraries/Text/Text.win32.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {NativeTextProps} from './TextNativeComponent';
@@ -157,7 +158,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
       let _selectable = selectable;
 
-      let processedStyle: ?TextStyleInternal = flattenStyle(_style);
+      let processedStyle = flattenStyle<TextStyleProp>(_style);
       if (processedStyle != null) {
         let overrides: ?{...TextStyleInternal} = null;
         if (typeof processedStyle.fontWeight === 'number') {
@@ -182,7 +183,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
         if (overrides != null) {
           // $FlowFixMe[incompatible-type]
-          processedStyle = [processedStyle, overrides];
+          _style = [_style, overrides];
         }
       }
 
@@ -208,7 +209,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
                 numberOfLines: _numberOfLines,
                 selectable: _selectable,
                 selectionColor: _selectionColor,
-                style: processedStyle,
+                style: _style,
                 disabled: disabled,
                 children,
               }}
@@ -248,7 +249,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             ref={forwardedRef}
             selectable={_selectable}
             selectionColor={_selectionColor}
-            style={processedStyle}
+            style={_style}
             disabled={disabled}>
             {children}
           </NativeVirtualText>
@@ -298,7 +299,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
               numberOfLines: _numberOfLines,
               selectable: _selectable,
               selectionColor: _selectionColor,
-              style: processedStyle,
+              style: _style,
               children,
             }}
             textPressabilityProps={{
@@ -339,7 +340,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             ref={forwardedRef}
             selectable={_selectable}
             selectionColor={_selectionColor}
-            style={processedStyle}>
+            style={_style}>
             {children}
           </NativeText>
         );

package/Libraries/Text/TextNativeComponent.js

@@ -16,6 +16,7 @@ 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,
@@ -48,6 +49,12 @@ const textViewConfig = {
     dataDetectorType: true,
     android_hyphenationFrequency: true,
     lineBreakStrategyIOS: true,
+    // boxShadow is currently per-component on Android instead of being on BaseViewConfig yet
+    ...(Platform.OS === 'android' && {
+      experimental_boxShadow: {
+        process: require('../StyleSheet/processBoxShadow').default,
+      },
+    }),
   },
   directEventTypes: {
     topTextLayout: {