@office-iss/react-native-win32 0.80.0-preview.1 → 0.81.0-preview.1

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/LogBox/UI/LogBoxButton.js

@@ -17,6 +17,7 @@ import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   id?: string,
@@ -31,7 +32,7 @@ type Props = $ReadOnly<{
 }>;
 
 function LogBoxButton(props: Props): React.Node {
-  const [pressed, setPressed] = React.useState(false);
+  const [pressed, setPressed] = useState(false);
 
   let backgroundColor = props.backgroundColor;
   if (!backgroundColor) {

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -49,7 +50,7 @@ function getPrettyFileName(path: string) {
   return fileName;
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(true);
+  const [collapsed, setCollapsed] = useState(true);
   if (
     props.log.getAvailableComponentStack() == null ||
     props.log.getAvailableComponentStack().length < 1

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

@@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -49,7 +50,7 @@ function getPrettyFileName(path: string) {
   return fileName;
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(true);
+  const [collapsed, setCollapsed] = useState(true);
   if (
     props.log.getAvailableComponentStack() == null ||
     props.log.getAvailableComponentStack().length < 1

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -17,6 +17,7 @@ import Text from '../../Text/Text';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect, useState} from 'react';
 
 type Props = $ReadOnly<{
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -24,12 +25,12 @@ type Props = $ReadOnly<{
 }>;
 
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);

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

@@ -17,6 +17,7 @@ import Text from '../../Text/Text';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect, useState} from 'react';
 
 type Props = $ReadOnly<{
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -26,12 +27,12 @@ type Props = $ReadOnly<{
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   // [Win32] Dont use Animated
   /*
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -22,6 +22,7 @@ import LogBoxInspectorSourceMapStatus from './LogBoxInspectorSourceMapStatus';
 import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -65,7 +66,7 @@ export function getCollapseMessage(
 }
 
 function LogBoxInspectorStackFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(() => {
+  const [collapsed, setCollapsed] = useState(() => {
     // Only collapse frames initially if some frames are not collapsed.
     return props.log.getAvailableStack().some(({collapse}) => !collapse);
   });

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.

package/Libraries/NativeComponent/BaseViewConfig.ios.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 {
   ConditionallyIgnoredEventHandlers,
@@ -229,20 +228,12 @@ const validAttributesForNonEventProps = {
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default},
   collapsable: true,
   collapsableChildren: true,
-  filter:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processFilter').default,
-        },
-  boxShadow:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processBoxShadow').default,
-        },
+  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processFilter').default},
+  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBoxShadow').default},
   mixBlendMode: true,
   isolation: true,
 
@@ -369,7 +360,7 @@ const validAttributesForNonEventProps = {
   direction: true,
 
   style: ReactNativeStyleAttributes,
-};
+} as const;
 
 // Props for bubbling and direct events
 const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({

package/Libraries/NativeComponent/BaseViewConfig.js.flow

@@ -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 {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';

package/Libraries/NativeComponent/BaseViewConfig.win32.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 {
   ConditionallyIgnoredEventHandlers,
@@ -225,20 +224,12 @@ const validAttributesForNonEventProps = {
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processFilter').default,
-        },
-  boxShadow:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: require('../StyleSheet/processBoxShadow').default,
-        },
+  experimental_filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processFilter').default},
+  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBoxShadow').default},
   mixBlendMode: true,
   isolation: true,
 
@@ -359,7 +350,7 @@ const validAttributesForNonEventProps = {
   direction: true,
 
   style: ReactNativeStyleAttributes,
-};
+} as const;
 
 // Props for bubbling and direct events
 const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({