@office-iss/react-native-win32 0.0.0-canary.285 → 0.0.0-canary.286

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -28,7 +28,7 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
     return (
       <View style={styles.root}>
         <View style={styles.button}>
-          <Text style={styles.syntaxErrorText}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
@@ -38,8 +38,16 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
-      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -17,6 +17,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{
+  id: string,
   onPress: () => void,
   text: string,
 }>;
@@ -27,6 +28,7 @@ export default function LogBoxInspectorFooterButton(
   return (
     <SafeAreaView style={styles.button}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundDarkColor(),

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -36,7 +36,9 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
       <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
-            <Text style={styles.titleText}>Failed to compile</Text>
+            <Text style={styles.titleText} id="logbox_header_title_text">
+              Failed to compile
+            </Text>
           </View>
         </View>
       </LogBoxInspectorHeaderSafeArea>
@@ -54,15 +56,19 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
     <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_prev"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-left.png')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
-          <Text style={styles.titleText}>{titleText}</Text>
+          <Text style={styles.titleText} id="logbox_header_title_text">
+            {titleText}
+          </Text>
         </View>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_next"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-right.png')}

package/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js

@@ -38,7 +38,9 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
       <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
-            <Text style={styles.titleText}>Failed to compile</Text>
+            <Text style={styles.titleText} id="logbox_header_title_text">
+              Failed to compile
+            </Text>
           </View>
         </View>
       </LogBoxInspectorHeaderSafeArea>
@@ -56,15 +58,19 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
     <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_prev"
           disabled={props.total <= 1}
           level={props.level}
           image={new String('←')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
-          <Text style={styles.titleText}>{titleText}</Text>
+          <Text style={styles.titleText} id="logbox_header_title_text">
+            {titleText}
+          </Text>
         </View>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_next"
           disabled={props.total <= 1}
           level={props.level}
           image={new String('→')}

package/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -39,6 +39,7 @@ const backgroundForLevel = (level: LogLevel) =>
 
 export default function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{
+    id: string,
     disabled: boolean,
     image: ImageSource,
     level: LogLevel,
@@ -47,6 +48,7 @@ export default function LogBoxInspectorHeaderButton(
 ): React.Node {
   return (
     <LogBoxButton
+      id={props.id}
       backgroundColor={backgroundForLevel(props.level)}
       onPress={props.disabled ? null : props.onPress}
       style={styles.button}>

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -46,11 +46,13 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
   return (
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
-        <Text style={[messageStyles.headingText, messageStyles[props.level]]}>
+        <Text
+          style={[messageStyles.headingText, messageStyles[props.level]]}
+          id="logbox_message_title_text">
           {props.title}
         </Text>
       </View>
-      <Text style={messageStyles.bodyText}>
+      <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
           maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
           message={props.message}

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -101,7 +101,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
             }
             style={componentStyles.frame}>
             <View style={componentStyles.component}>
-              <Text style={componentStyles.frameName}>
+              <Text
+                id="logbox_component_stack_frame_text"
+                style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
                 {frame.content}
                 <Text style={componentStyles.bracket}>{' />'}</Text>

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js

@@ -101,7 +101,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
             }
             style={componentStyles.frame}>
             <View style={componentStyles.component}>
-              <Text style={componentStyles.frameName}>
+              <Text
+                id="logbox_component_stack_frame_text"
+                style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
                 {frame.content}
                 <Text style={componentStyles.bracket}>{' />'}</Text>

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
@@ -19,7 +19,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type Props = $ReadOnly<{
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
 }>;
 

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -9,7 +9,7 @@
  */
 
 import type {StackFrame} from '../../Core/NativeExceptionsManager';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -21,7 +21,7 @@ import * as React from 'react';
 
 type Props = $ReadOnly<{
   frame: StackFrame,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
 }>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
@@ -43,7 +43,9 @@ function LogBoxInspectorStackFrame(props: Props): React.Node {
         }}
         onPress={onPress}
         style={styles.frame}>
-        <Text style={[styles.name, frame.collapse === true && styles.dim]}>
+        <Text
+          id="logbox_stack_frame_text"
+          style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.win32.js

@@ -9,7 +9,7 @@
  */
 
 import type {StackFrame} from '../../Core/NativeExceptionsManager';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -21,7 +21,7 @@ import * as React from 'react';
 
 type Props = $ReadOnly<{
   frame: StackFrame,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
 }>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
@@ -43,7 +43,9 @@ function LogBoxInspectorStackFrame(props: Props): React.Node {
         }}
         onPress={onPress}
         style={styles.frame}>
-        <Text style={[styles.name, frame.collapse === true && styles.dim]}>
+        <Text
+          id="logbox_stack_frame_text"
+          style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -37,8 +37,9 @@ export default function LogBoxNotification(props: Props): React.Node {
   }, [log]);
 
   return (
-    <View style={styles.container}>
+    <View id="logbox_notification" style={styles.container}>
       <LogBoxButton
+        id={`logbox_open_button_${level}`}
         onPress={props.onPressOpen}
         style={styles.press}
         backgroundColor={{
@@ -48,7 +49,10 @@ export default function LogBoxNotification(props: Props): React.Node {
         <View style={styles.content}>
           <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
           <LogBoxNotificationMessage message={log.message} />
-          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
+          <LogBoxNotificationDismissButton
+            id={`logbox_dismiss_button_${level}`}
+            onPress={props.onPressDismiss}
+          />
         </View>
       </LogBoxButton>
     </View>

package/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -24,7 +24,9 @@ export default function LogBoxNotificationCountBadge(props: {
        * when fixing the type of `StyleSheet.create`. Remove this comment to
        * see the error. */}
       <View style={[styles.inside, styles[props.level]]}>
-        <Text style={styles.text}>{props.count <= 1 ? '!' : props.count}</Text>
+        <Text id="logbox_notification_count_text" style={styles.text}>
+          {props.count <= 1 ? '!' : props.count}
+        </Text>
       </View>
     </View>
   );

package/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -16,11 +16,13 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 export default function LogBoxNotificationDismissButton(props: {
+  id: string,
   onPress: () => void,
 }): React.Node {
   return (
     <View style={styles.container}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: LogBoxStyle.getTextColor(0.3),
           pressed: LogBoxStyle.getTextColor(0.5),

package/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -22,7 +22,10 @@ export default function LogBoxNotificationMessage(props: {
 }): React.Node {
   return (
     <View style={styles.container}>
-      <Text numberOfLines={1} style={styles.text}>
+      <Text
+        id="logbox_notification_message_text"
+        numberOfLines={1}
+        style={styles.text}>
         {props.message && (
           <LogBoxMessage
             plaintext

package/Libraries/Modal/Modal.js

@@ -13,11 +13,12 @@ import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import {type ColorValue} from '../StyleSheet/StyleSheet';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
-import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import React from 'react';
 
 const ScrollView = require('../Components/ScrollView/ScrollView').default;
@@ -25,8 +26,11 @@ const View = require('../Components/View/View').default;
 const AppContainer = require('../ReactNative/AppContainer').default;
 const I18nManager = require('../ReactNative/I18nManager').default;
 const {RootTagContext} = require('../ReactNative/RootTag');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Platform = require('../Utilities/Platform');
+const StyleSheet = require('../StyleSheet/StyleSheet').default;
+const Platform = require('../Utilities/Platform').default;
+
+const VirtualizedListContextResetter =
+  VirtualizedLists.VirtualizedListContextResetter;
 
 type ModalEventDefinitions = {
   modalDismissed: [{modalID: number}],
@@ -57,99 +61,62 @@ type OrientationChangeEvent = $ReadOnly<{
   orientation: 'portrait' | 'landscape',
 }>;
 
-export type Props = $ReadOnly<{
-  ...ViewProps,
-
+export type ModalBaseProps = {
   /**
-   * The `animationType` prop controls how the modal animates.
-   *
-   * See https://reactnative.dev/docs/modal#animationtype
+   * @deprecated Use animationType instead
    */
-  animationType?: ?('none' | 'slide' | 'fade'),
-
+  animated?: boolean,
   /**
-   * The `presentationStyle` prop controls how the modal appears.
+   * The `animationType` prop controls how the modal animates.
    *
-   * See https://reactnative.dev/docs/modal#presentationstyle
+   * - `slide` slides in from the bottom
+   * - `fade` fades into view
+   * - `none` appears without an animation
    */
-  presentationStyle?: ?(
-    | 'fullScreen'
-    | 'pageSheet'
-    | 'formSheet'
-    | 'overFullScreen'
-  ),
-
+  animationType?: ?('none' | 'slide' | 'fade'),
   /**
-   * The `transparent` prop determines whether your modal will fill the
-   * entire view.
-   *
-   * See https://reactnative.dev/docs/modal#transparent
+   * The `transparent` prop determines whether your modal will fill the entire view.
+   * Setting this to `true` will render the modal over a transparent background.
    */
   transparent?: ?boolean,
-
-  /**
-   * The `statusBarTranslucent` prop determines whether your modal should go under
-   * the system statusbar.
-   *
-   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
-   */
-  statusBarTranslucent?: ?boolean,
-
-  /**
-   * The `navigationBarTranslucent` prop determines whether your modal should go under
-   * the system navigationbar.
-   *
-   * See https://reactnative.dev/docs/modal.html#navigationbartranslucent-android
-   */
-  navigationBarTranslucent?: ?boolean,
-
-  /**
-   * The `hardwareAccelerated` prop controls whether to force hardware
-   * acceleration for the underlying window.
-   *
-   * This prop works only on Android.
-   *
-   * See https://reactnative.dev/docs/modal#hardwareaccelerated
-   */
-  hardwareAccelerated?: ?boolean,
-
   /**
    * The `visible` prop determines whether your modal is visible.
-   *
-   * See https://reactnative.dev/docs/modal#visible
    */
   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 or the menu button on Apple TV.
    *
    * This is required on Apple TV and Android.
-   *
-   * See https://reactnative.dev/docs/modal#onrequestclose
    */
+  // onRequestClose?: (event: NativeSyntheticEvent<any>) => void;
   onRequestClose?: ?DirectEventHandler<null>,
-
   /**
-   * The `onShow` prop allows passing a function that will be called once the
-   * modal has been shown.
-   *
-   * See https://reactnative.dev/docs/modal#onshow
+   * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
+  // onShow?: (event: NativeSyntheticEvent<any>) => void;
   onShow?: ?DirectEventHandler<null>,
 
   /**
-   * The `onDismiss` prop allows passing a function that will be called once
-   * the modal has been dismissed.
-   *
-   * See https://reactnative.dev/docs/modal#ondismiss
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
    */
-  onDismiss?: ?() => mixed,
+  backdropColor?: ColorValue,
+};
+
+export type ModalPropsIOS = {
+  /**
+   * The `presentationStyle` determines the style of modal to show
+   */
+  presentationStyle?: ?(
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
+  ),
 
   /**
    * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
-   *
-   * See https://reactnative.dev/docs/modal#supportedorientations
+   * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
    */
   supportedOrientations?: ?$ReadOnlyArray<
     | 'portrait'
@@ -159,21 +126,47 @@ export type Props = $ReadOnly<{
     | 'landscape-right',
   >,
 
+  /**
+   * The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+   */
+  // onDismiss?: (() => void) | undefined;
+  onDismiss?: ?() => void,
+
   /**
    * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
-   *
-   * See https://reactnative.dev/docs/modal#onorientationchange
+   * The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
    */
+  // onOrientationChange?:
+  //   | ((event: NativeSyntheticEvent<any>) => void)
+  //   | undefined;
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+};
 
+export type ModalPropsAndroid = {
   /**
-   * The `backdropColor` props sets the background color of the modal's container.
-   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   *  Controls whether to force hardware acceleration for the underlying window.
    */
-  backdropColor?: ?string,
-}>;
+  hardwareAccelerated?: ?boolean,
+
+  /**
+   *  Determines whether your modal should go under the system statusbar.
+   */
+  statusBarTranslucent?: ?boolean,
+
+  /**
+   *  Determines whether your modal should go under the system navigationbar.
+   */
+  navigationBarTranslucent?: ?boolean,
+};
+
+export type ModalProps = {
+  ...ModalBaseProps,
+  ...ModalPropsIOS,
+  ...ModalPropsAndroid,
+  ...ViewProps,
+};
 
-function confirmProps(props: Props) {
+function confirmProps(props: ModalProps) {
   if (__DEV__) {
     if (
       props.presentationStyle &&
@@ -201,7 +194,7 @@ type State = {
   isRendered: boolean,
 };
 
-class Modal extends React.Component<Props, State> {
+class Modal extends React.Component<ModalProps, State> {
   static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,
@@ -212,7 +205,7 @@ class Modal extends React.Component<Props, State> {
   _identifier: number;
   _eventSubscription: ?EventSubscription;
 
-  constructor(props: Props) {
+  constructor(props: ModalProps) {
     super(props);
     if (__DEV__) {
       confirmProps(props);
@@ -248,7 +241,7 @@ class Modal extends React.Component<Props, State> {
     }
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: ModalProps) {
     if (prevProps.visible === false && this.props.visible === true) {
       this.setState({isRendered: true});
     }
@@ -364,4 +357,4 @@ const styles = StyleSheet.create({
 const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
   ModalInjection.unstable_Modal ?? Modal;
 
-module.exports = ExportedModal;
+export default ExportedModal;

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -10,6 +10,8 @@
 
 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';
 
@@ -169,12 +171,20 @@ const validAttributesForNonEventProps = {
   experimental_backgroundImage: {
     process: require('../StyleSheet/processBackgroundImage').default,
   },
-  boxShadow: {
-    process: require('../StyleSheet/processBoxShadow').default,
-  },
-  filter: {
-    process: require('../StyleSheet/processFilter').default,
-  },
+  boxShadow:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: require('../StyleSheet/processBoxShadow').default,
+        },
+  filter:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: require('../StyleSheet/processFilter').default,
+        },
   mixBlendMode: true,
   isolation: true,
   opacity: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -10,6 +10,8 @@
 
 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 {
   ConditionallyIgnoredEventHandlers,
@@ -201,13 +203,13 @@ const validAttributesForNonEventProps = {
   cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
-  shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
+  shadowOffset: {diff: require('../Utilities/differ/sizesDiffer').default},
   shadowOpacity: true,
   shadowRadius: true,
   needsOffscreenAlphaCompositing: true,
   overflow: true,
   shouldRasterizeIOS: true,
-  transform: {diff: require('../Utilities/differ/matricesDiffer')},
+  transform: {diff: require('../Utilities/differ/matricesDiffer').default},
   transformOrigin: true,
   accessibilityRole: true,
   accessibilityState: true,
@@ -222,15 +224,23 @@ const validAttributesForNonEventProps = {
   borderWidth: true,
   borderBlockWidth: true,
   borderStyle: true,
-  hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
+  hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default},
   collapsable: true,
   collapsableChildren: true,
-  filter: {
-    process: require('../StyleSheet/processFilter').default,
-  },
-  boxShadow: {
-    process: require('../StyleSheet/processBoxShadow').default,
-  },
+  filter:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: require('../StyleSheet/processFilter').default,
+        },
+  boxShadow:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: require('../StyleSheet/processBoxShadow').default,
+        },
   mixBlendMode: true,
   isolation: true,