@office-iss/react-native-win32 0.0.0-canary.297 → 0.0.0-canary.299

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {
-  LayoutAnimationConfig as LayoutAnimationConfig_,
+  LayoutAnimationConfig,
   LayoutAnimationProperty,
   LayoutAnimationType,
 } from '../Renderer/shims/ReactNativeTypes';
@@ -29,7 +29,7 @@ export type {
 } from '../Renderer/shims/ReactNativeTypes';
 
 // Reexport type
-export type LayoutAnimationConfig = LayoutAnimationConfig_;
+export type {LayoutAnimationConfig} from '../Renderer/shims/ReactNativeTypes';
 
 export type LayoutAnimationTypes = $ReadOnly<{
   [type in LayoutAnimationType]: type,
@@ -45,7 +45,7 @@ type OnAnimationDidFailCallback = () => void;
 let isLayoutAnimationEnabled: boolean =
   ReactNativeFeatureFlags.isLayoutAnimationEnabled();
 
-function setEnabled(value: boolean) {
+function setLayoutAnimationEnabled(value: boolean) {
   isLayoutAnimationEnabled = isLayoutAnimationEnabled;
 }
 
@@ -115,7 +115,7 @@ function configureNext(
   }
 }
 
-function create(
+function createLayoutAnimation(
   duration: number,
   type?: LayoutAnimationType,
   property?: LayoutAnimationProperty,
@@ -129,12 +129,16 @@ function create(
 }
 
 const Presets = {
-  easeInEaseOut: (create(
+  easeInEaseOut: (createLayoutAnimation(
     300,
     'easeInEaseOut',
     'opacity',
   ): LayoutAnimationConfig),
-  linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
+  linear: (createLayoutAnimation(
+    500,
+    'linear',
+    'opacity',
+  ): LayoutAnimationConfig),
   spring: ({
     duration: 700,
     create: {
@@ -180,7 +184,7 @@ const LayoutAnimation = {
   /**
    * Helper for creating a config for `configureNext`.
    */
-  create,
+  create: createLayoutAnimation,
   Types: Object.freeze({
     spring: 'spring',
     linear: 'linear',
@@ -208,7 +212,7 @@ const LayoutAnimation = {
   spring: (configureNext.bind(null, Presets.spring): (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
   ) => void),
-  setEnabled,
+  setEnabled: setLayoutAnimationEnabled,
 };
 
 export default LayoutAnimation;

package/Libraries/Linking/Linking.js

@@ -4,8 +4,8 @@
  * 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
+ * @format
  */
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';

package/Libraries/Linking/NativeIntentAndroid.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeIntentAndroid';
 import NativeIntentAndroid from '../../src/private/specs_DEPRECATED/modules/NativeIntentAndroid';
+
 export default NativeIntentAndroid;

package/Libraries/Linking/NativeLinkingManager.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeLinkingManager';
 import NativeLinkingManager from '../../src/private/specs_DEPRECATED/modules/NativeLinkingManager';
+
 export default NativeLinkingManager;

package/Libraries/Lists/FlatList.js

@@ -15,6 +15,7 @@ import type {
   ListRenderItemInfo,
   ViewabilityConfigCallbackPair,
   ViewToken,
+  VirtualizedListProps,
 } from '@react-native/virtualized-lists';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -32,14 +33,14 @@ const invariant = require('invariant');
 const VirtualizedList = VirtualizedLists.VirtualizedList;
 const defaultKeyExtractor = VirtualizedLists.keyExtractor;
 
-type RequiredProps<ItemT> = {
+type RequiredFlatListProps<ItemT> = {
   /**
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
   data: ?$ReadOnly<$ArrayLike<ItemT>>,
 };
-type OptionalProps<ItemT> = {
+type OptionalFlatListProps<ItemT> = {
   /**
    * Takes an item from `data` and renders it into the list. Example usage:
    *
@@ -177,12 +178,10 @@ function isArrayLike(data: mixed): boolean {
 }
 
 type FlatListBaseProps<ItemT> = {
-  ...RequiredProps<ItemT>,
-  ...OptionalProps<ItemT>,
+  ...RequiredFlatListProps<ItemT>,
+  ...OptionalFlatListProps<ItemT>,
 };
 
-type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
-
 export type FlatListProps<ItemT> = {
   ...Omit<
     VirtualizedListProps,

package/Libraries/Lists/SectionList.js

@@ -39,7 +39,7 @@ export type {
   ScrollToLocationParamsType as SectionListScrollParams,
 };
 
-type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
+type RequiredSectionListProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -64,7 +64,7 @@ export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
   info: SectionListRenderItemInfo<ItemT, SectionT>,
 ) => React.Node | null;
 
-type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
+type OptionalSectionListProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -110,8 +110,8 @@ export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
     VirtualizedSectionListProps<ItemT, SectionT>,
     'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
-  ...RequiredProps<ItemT, SectionT>,
-  ...OptionalProps<ItemT, SectionT>,
+  ...RequiredSectionListProps<ItemT, SectionT>,
+  ...OptionalSectionListProps<ItemT, SectionT>,
 };
 
 /**

package/Libraries/Lists/VirtualizedList.js

@@ -13,7 +13,8 @@
 import VirtualizedLists from '@react-native/virtualized-lists';
 
 type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
-const VirtualizedList: VirtualizedListType = VirtualizedLists.VirtualizedList;
+const VirtualizedListComponent: VirtualizedListType =
+  VirtualizedLists.VirtualizedList;
 
 export type {
   ListRenderItemInfo,
@@ -21,4 +22,4 @@ export type {
   Separators,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';
-export default VirtualizedList;
+export default VirtualizedListComponent;

package/Libraries/LogBox/Data/LogBoxData.js

@@ -413,8 +413,8 @@ export function observe(observer: Observer): Subscription {
   };
 }
 
-type Props = $ReadOnly<{}>;
-type State = $ReadOnly<{
+type LogBoxStateSubscriptionProps = $ReadOnly<{}>;
+type LogBoxStateSubscriptionState = $ReadOnly<{
   logs: LogBoxLogs,
   isDisabled: boolean,
   hasError: boolean,
@@ -432,7 +432,10 @@ type SubscribedComponent = React.ComponentType<
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
 ): React.ComponentType<{}> {
-  class LogBoxStateSubscription extends React.Component<Props, State> {
+  class LogBoxStateSubscription extends React.Component<
+    LogBoxStateSubscriptionProps,
+    LogBoxStateSubscriptionState,
+  > {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};
     }
@@ -446,7 +449,7 @@ export function withSubscription(
 
     _subscription: ?Subscription;
 
-    state: State = {
+    state: LogBoxStateSubscriptionState = {
       logs: new Set(),
       isDisabled: false,
       hasError: false,

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -509,6 +509,8 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   return {
     ...parseInterpolation(argsWithoutComponentStack),
     componentStack,
+    /* $FlowFixMe[incompatible-return] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     componentStackType,
   };
 }

package/Libraries/LogBox/LogBox.js

@@ -13,7 +13,6 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
-import {hasComponentStack} from './Data/parseLogBoxLog';
 import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
@@ -28,6 +27,7 @@ interface ILogBox {
   ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
+  addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void;
   addException(error: ExtendedExceptionData): void;
 }
 
@@ -36,11 +36,12 @@ interface ILogBox {
  */
 if (__DEV__) {
   const LogBoxData = require('./Data/LogBoxData');
-  const {parseLogBoxLog, parseInterpolation} = require('./Data/parseLogBoxLog');
+  const {
+    parseLogBoxLog,
+    parseComponentStack,
+  } = require('./Data/parseLogBoxLog');
 
-  let originalConsoleError;
   let originalConsoleWarn;
-  let consoleErrorImpl;
   let consoleWarnImpl: (...args: Array<mixed>) => void;
 
   let isLogBoxInstalled: boolean = false;
@@ -70,22 +71,20 @@ if (__DEV__) {
       // IMPORTANT: we only overwrite `console.error` and `console.warn` once.
       // When we uninstall we keep the same reference and only change its
       // internal implementation
-      const isFirstInstall = originalConsoleError == null;
+      const isFirstInstall = originalConsoleWarn == null;
       if (isFirstInstall) {
-        originalConsoleError = console.error.bind(console);
+        // We only patch warning for legacy reasons.
+        // This will be removed in the future, once warnings
+        // are fully moved to fusebox. Error handling is done
+        // via the ExceptionManager.
         originalConsoleWarn = console.warn.bind(console);
 
-        // $FlowExpectedError[cannot-write]
-        console.error = (...args) => {
-          consoleErrorImpl(...args);
-        };
         // $FlowExpectedError[cannot-write]
         console.warn = (...args) => {
           consoleWarnImpl(...args);
         };
       }
 
-      consoleErrorImpl = registerError;
       consoleWarnImpl = registerWarning;
 
       if (Platform.isTesting) {
@@ -108,7 +107,6 @@ if (__DEV__) {
       // decorated again after installing LogBox. E.g.:
       // Before uninstalling: original > LogBox > OtherErrorHandler
       // After uninstalling:  original > LogBox (noop) > OtherErrorHandler
-      consoleErrorImpl = originalConsoleError;
       consoleWarnImpl = originalConsoleWarn;
     },
 
@@ -142,6 +140,64 @@ if (__DEV__) {
       }
     },
 
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>) {
+      if (isLogBoxInstalled) {
+        let filteredLevel: 'warn' | 'error' | 'fatal' = level;
+        try {
+          let format = args[0];
+          if (typeof format === 'string') {
+            const filterResult =
+              require('../LogBox/Data/LogBoxData').checkWarningFilter(
+                // For legacy reasons, we strip the warning prefix from the message.
+                // Can remove this once we remove the warning module altogether.
+                format.replace(/^Warning: /, ''),
+              );
+            if (filterResult.monitorEvent !== 'warning_unhandled') {
+              if (filterResult.suppressCompletely) {
+                return;
+              }
+
+              if (filterResult.suppressDialog_LEGACY === true) {
+                filteredLevel = 'warn';
+              } else if (filterResult.forceDialogImmediately === true) {
+                filteredLevel = 'fatal'; // Do not downgrade. These are real bugs with same severity as throws.
+              }
+              args[0] = filterResult.finalFormat;
+            }
+          }
+
+          const result = parseLogBoxLog(args);
+          const category = result.category;
+          const message = result.message;
+          let componentStackType = result.componentStackType;
+          let componentStack = result.componentStack;
+          if (
+            (!componentStack || componentStack.length === 0) &&
+            // $FlowExpectedError[prop-missing]
+            React.captureOwnerStack
+          ) {
+            const ownerStack = React.captureOwnerStack();
+            if (ownerStack != null && ownerStack.length > 0) {
+              const parsedComponentStack = parseComponentStack(ownerStack);
+              componentStack = parsedComponentStack.stack;
+              componentStackType = parsedComponentStack.type;
+            }
+          }
+          if (!LogBoxData.isMessageIgnored(message.content)) {
+            LogBoxData.addLog({
+              level: filteredLevel,
+              category,
+              message,
+              componentStack,
+              componentStackType,
+            });
+          }
+        } catch (err) {
+          LogBoxData.reportLogBoxError(err);
+        }
+      }
+    },
+
     addException,
   };
 
@@ -157,14 +213,9 @@ if (__DEV__) {
     return typeof args[0] === 'string' && args[0].startsWith('(ADVICE)');
   };
 
-  const isWarningModuleWarning = (...args: Array<mixed>) => {
-    return typeof args[0] === 'string' && args[0].startsWith('Warning: ');
-  };
-
   const registerWarning = (...args: Array<mixed>): void => {
     // Let warnings within LogBox itself fall through.
     if (LogBoxData.isLogBoxErrorMessage(String(args[0]))) {
-      originalConsoleError(...args);
       return;
     } else {
       // Be sure to pass LogBox warnings through.
@@ -190,88 +241,6 @@ if (__DEV__) {
       LogBoxData.reportLogBoxError(err);
     }
   };
-
-  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
-   * LTI update could not be added via codemod */
-  const registerError = (...args): void => {
-    // Let errors within LogBox itself fall through.
-    if (LogBoxData.isLogBoxErrorMessage(args[0])) {
-      originalConsoleError(...args);
-      return;
-    }
-
-    try {
-      let stack;
-      // $FlowFixMe[prop-missing] Not added to flow types yet.
-      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
-        stack = React.captureOwnerStack();
-        if (!hasComponentStack(args)) {
-          if (stack != null && stack !== '') {
-            args[0] = args[0] += '%s';
-            args.push(stack);
-          }
-        }
-      }
-      if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
-        // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.
-        //
-        // By passing through, this will get picked up by the React console override,
-        // potentially adding the component stack. React then passes it back to the
-        // React Native ExceptionsManager, which reports it to LogBox as an error.
-        //
-        // Ideally, we refactor all RN error handling so that LogBox patching
-        // errors is not necessary, and they are reported the same as a framework.
-        // The blocker to this is that the ExceptionManager console.error override
-        // strigifys all of the args before passing it through to LogBox, which
-        // would lose all of the interpolation information.
-        //
-        // The 'warning' module needs to be handled here because React internally calls
-        // `console.error('Warning: ')` with the component stack already included.
-        originalConsoleError(...args);
-        return;
-      }
-
-      const format = args[0].replace('Warning: ', '');
-      const filterResult = LogBoxData.checkWarningFilter(format);
-      let level = 'error';
-      if (filterResult.monitorEvent !== 'warning_unhandled') {
-        if (filterResult.suppressCompletely) {
-          return;
-        }
-
-        if (filterResult.suppressDialog_LEGACY === true) {
-          level = 'warn';
-        } else if (filterResult.forceDialogImmediately === true) {
-          level = 'fatal'; // Do not downgrade. These are real bugs with same severity as throws.
-        }
-      }
-
-      // Unfortunately, we need to add the Warning: prefix back for downstream dependencies.
-      // Downstream, we check for this prefix to know that LogBox already handled it, so
-      // it doesn't get reported back to LogBox. It's an absolute mess.
-      args[0] = `Warning: ${filterResult.finalFormat}`;
-      const {category, message, componentStack, componentStackType} =
-        parseLogBoxLog(args);
-
-      // Interpolate the message so they are formatted for adb and other CLIs.
-      // This is different than the message.content above because it includes component stacks.
-      const interpolated = parseInterpolation(args);
-      originalConsoleError(interpolated.message.content);
-
-      if (!LogBoxData.isMessageIgnored(message.content)) {
-        LogBoxData.addLog({
-          level,
-          category,
-          message,
-          componentStack,
-          componentStackType,
-        });
-      }
-    } catch (err) {
-      LogBoxData.reportLogBoxError(err);
-    }
-  };
 } else {
   LogBox = {
     install(): void {
@@ -302,6 +271,10 @@ if (__DEV__) {
       // Do nothing.
     },
 
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void {
+      // Do nothing.
+    },
+
     addException(error: ExtendedExceptionData): void {
       // Do nothing.
     },

package/Libraries/Modal/Modal.d.ts

@@ -35,9 +35,9 @@ export interface ModalBaseProps {
    */
   visible?: boolean | undefined;
   /**
-   * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
+   * The `onRequestClose` callback is called when the user taps the hardware back button on Android, dismisses the sheet using a gesture on iOS (when `allowSwipeDismissal` is set to true) or the menu button on Apple TV.
    *
-   * This is required on Apple TV and Android.
+   * This is required on iOS and Android.
    */
   onRequestClose?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
   /**
@@ -89,6 +89,12 @@ export interface ModalPropsIOS {
   onOrientationChange?:
     | ((event: NativeSyntheticEvent<any>) => void)
     | undefined;
+
+  /**
+   * Controls whether the modal can be dismissed by swiping down on iOS.
+   * This requires you to implement the `onRequestClose` prop to handle the dismissal.
+   */
+  allowSwipeDismissal?: boolean | undefined;
 }
 
 export interface ModalPropsAndroid {

package/Libraries/Modal/Modal.js

@@ -4,8 +4,8 @@
  * 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
+ * @format
  */
 
 import type {HostInstance} from '../../src/private/types/HostInstance';
@@ -86,9 +86,9 @@ export type ModalBaseProps = {
    */
   visible?: ?boolean,
   /**
-   * The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
+   * The `onRequestClose` callback is called when the user taps the hardware back button on Android, dismisses the sheet using a gesture on iOS (when `allowSwipeDismissal` is set to true) or the menu button on Apple TV.
    *
-   * This is required on Apple TV and Android.
+   * This is required on iOS and Android.
    */
   // onRequestClose?: (event: NativeSyntheticEvent<any>) => void;
   onRequestClose?: ?DirectEventHandler<null>,
@@ -147,6 +147,12 @@ export type ModalPropsIOS = {
   //   | ((event: NativeSyntheticEvent<any>) => void)
   //   | undefined;
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * Controls whether the modal can be dismissed by swiping down on iOS.
+   * This requires you to implement the `onRequestClose` prop to handle the dismissal.
+   */
+  allowSwipeDismissal?: ?boolean,
 };
 
 export type ModalPropsAndroid = {
@@ -192,6 +198,16 @@ function confirmProps(props: ModalProps) {
         'Modal with translucent navigation bar and without translucent status bar is not supported.',
       );
     }
+
+    if (
+      Platform.OS === 'ios' &&
+      props.allowSwipeDismissal === true &&
+      !props.onRequestClose
+    ) {
+      console.warn(
+        'Modal requires the onRequestClose prop when used with `allowSwipeDismissal`. This is necessary to prevent state corruption.',
+      );
+    }
   }
 }
 
@@ -308,6 +324,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
     return (
       <RCTModalHostView
+        /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         animationType={animationType}
         presentationStyle={presentationStyle}
         transparent={this.props.transparent}
@@ -325,6 +343,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         onStartShouldSetResponder={this._shouldSetResponder}
         supportedOrientations={this.props.supportedOrientations}
         onOrientationChange={this.props.onOrientationChange}
+        allowSwipeDismissal={this.props.allowSwipeDismissal}
         testID={this.props.testID}>
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>
@@ -351,6 +370,8 @@ const styles = StyleSheet.create({
   modal: {
     position: 'absolute',
   },
+  /* $FlowFixMe[incompatible-call] Natural Inference rollout. See
+   * https://fburl.com/workplace/6291gfvu */
   container: {
     /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
      * comment suppresses an error found when Flow v0.111 was deployed. To see

package/Libraries/Modal/NativeModalManager.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeModalManager';
 import NativeModalManager from '../../src/private/specs_DEPRECATED/modules/NativeModalManager';
+
 export default NativeModalManager;

package/Libraries/Modal/RCTModalHostViewNativeComponent.js

@@ -4,10 +4,11 @@
  * 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
+ * @format
  */
 
 export * from '../../src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent';
 import RCTModalHostViewNativeComponent from '../../src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent';
+
 export default RCTModalHostViewNativeComponent;

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -4,14 +4,13 @@
  * 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
+ * @format
  */
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-import NativeReactNativeFeatureFlags from '../../src/private/featureflags/specs/NativeReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
 import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
 
@@ -111,6 +110,18 @@ const bubblingEventTypes = {
       bubbled: 'onClick',
     },
   },
+  topBlur: {
+    phasedRegistrationNames: {
+      captured: 'onBlurCapture',
+      bubbled: 'onBlur',
+    },
+  },
+  topFocus: {
+    phasedRegistrationNames: {
+      captured: 'onFocusCapture',
+      bubbled: 'onFocus',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -171,20 +182,12 @@ const validAttributesForNonEventProps = {
   experimental_backgroundImage: {
     process: require('../StyleSheet/processBackgroundImage').default,
   },
-  boxShadow:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processBoxShadow').default,
-        },
-  filter:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processFilter').default,
-        },
+  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBoxShadow').default},
+  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processFilter').default},
   mixBlendMode: true,
   isolation: true,
   opacity: true,
@@ -369,7 +372,7 @@ const validAttributesForNonEventProps = {
   },
   focusable: true,
   backfaceVisibility: true,
-};
+} as const;
 
 // Props for bubbling and direct events
 const validAttributesForEventProps = {
@@ -409,7 +412,7 @@ const validAttributesForEventProps = {
   onPointerOutCapture: true,
   onPointerOver: true,
   onPointerOverCapture: true,
-};
+} as const;
 
 /**
  * On Android, Props are derived from a ViewManager and its ShadowNode.