react-native-windows 0.78.7 → 0.79.0-preview.1

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -9,7 +9,7 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
@@ -21,29 +21,71 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type TVProps = $ReadOnly<{|
+export type TVProps = $ReadOnly<{
+  /**
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
+   */
   hasTVPreferredFocus?: ?boolean,
+
+  /**
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusDown?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusForward?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusLeft?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusRight?: ?number,
-  nextFocusUp?: ?number,
-|}>;
 
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-  ...TVProps,
+  /**
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusUp?: ?number,
+}>;
 
+type TouchableOpacityBaseProps = $ReadOnly<{
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   * Defaults to 0.2
+   */
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
 
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
-|}>;
+}>;
+
+export type TouchableOpacityProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  ...TouchableOpacityBaseProps,
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   anim: Animated.Value,
   pressability: Pressability,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -129,7 +171,7 @@ type State = $ReadOnly<{|
  * ```
  *
  */
-class TouchableOpacity extends React.Component<Props, State> {
+class TouchableOpacity extends React.Component<TouchableOpacityProps, State> {
   state: State = {
     anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
     pressability: new Pressability(this._createPressabilityConfig()),
@@ -324,7 +366,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     );
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableOpacityProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||
@@ -350,12 +392,12 @@ class TouchableOpacity extends React.Component<Props, State> {
 }
 
 const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof Animated.View>>,
-  ...props: Props
+  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ...props: TouchableOpacityProps
 ) = React.forwardRef((props, ref) => (
   <TouchableOpacity {...props} hostRef={ref} />
 ));
 
 Touchable.displayName = 'TouchableOpacity';
 
-module.exports = Touchable;
+export default Touchable;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -8,81 +8,125 @@
  * @format
  */
 
-import type {
-  AccessibilityActionEvent,
-  AccessibilityActionInfo,
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
-} from '../../Components/View/ViewAccessibility';
+import type {AccessibilityActionEvent} from '../../Components/View/ViewAccessibility';
 import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
-  LayoutEvent,
-  PressEvent,
+  GestureResponderEvent,
+  LayoutChangeEvent,
 } from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
+import {type AccessibilityProps} from '../../Components/View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
+import {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-type Props = $ReadOnly<{|
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
-  accessibilityElementsHidden?: ?boolean,
-  accessibilityHint?: ?Stringish,
-  accessibilityLanguage?: ?Stringish,
-  accessibilityIgnoresInvertColors?: ?boolean,
-  accessibilityLabel?: ?Stringish,
-  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
-  accessibilityRole?: ?AccessibilityRole,
-  accessibilityState?: ?AccessibilityState,
-  accessibilityValue?: ?AccessibilityValue,
-  'aria-valuemax'?: AccessibilityValue['max'],
-  'aria-valuemin'?: AccessibilityValue['min'],
-  'aria-valuenow'?: AccessibilityValue['now'],
-  'aria-valuetext'?: AccessibilityValue['text'],
-  accessibilityViewIsModal?: ?boolean,
-  'aria-modal'?: ?boolean,
-  accessible?: ?boolean,
+export type TouchableWithoutFeedbackPropsIOS = {};
+
+export type TouchableWithoutFeedbackPropsAndroid = {
   /**
-   * alias for accessibilityState
+   * If true, doesn't play a system sound on touch.
    *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   * @platform android
    */
-  'aria-busy'?: ?boolean,
-  'aria-checked'?: ?boolean | 'mixed',
-  'aria-disabled'?: ?boolean,
-  'aria-expanded'?: ?boolean,
-  'aria-selected'?: ?boolean,
-  'aria-hidden'?: ?boolean,
-  'aria-live'?: ?('polite' | 'assertive' | 'off'),
-  'aria-label'?: ?Stringish,
-  children?: ?React.Node,
-  delayLongPress?: ?number,
-  delayPressIn?: ?number,
-  delayPressOut?: ?number,
-  disabled?: ?boolean,
-  focusable?: ?boolean,
-  hitSlop?: ?EdgeInsetsOrSizeProp,
-  id?: string,
-  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
-  nativeID?: ?string,
-  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
-  onBlur?: ?(event: BlurEvent) => mixed,
-  onFocus?: ?(event: FocusEvent) => mixed,
-  onLayout?: ?(event: LayoutEvent) => mixed,
-  onLongPress?: ?(event: PressEvent) => mixed,
-  onPress?: ?(event: PressEvent) => mixed,
-  onPressIn?: ?(event: PressEvent) => mixed,
-  onPressOut?: ?(event: PressEvent) => mixed,
-  pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
-  rejectResponderTermination?: ?boolean,
-  testID?: ?string,
   touchSoundDisabled?: ?boolean,
-|}>;
+};
+
+export type TouchableWithoutFeedbackProps = $ReadOnly<
+  {
+    children?: ?React.Node,
+    /**
+     * Delay in ms, from onPressIn, before onLongPress is called.
+     */
+    delayLongPress?: ?number,
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called.
+     */
+    delayPressIn?: ?number,
+    /**
+     * Delay in ms, from the release of the touch, before onPressOut is called.
+     */
+    delayPressOut?: ?number,
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled?: ?boolean,
+    /**
+     * Whether this View should be focusable with a non-touch input device,
+     * eg. receive focus with a hardware keyboard / TV remote.
+     */
+    focusable?: ?boolean,
+    /**
+     * This defines how far your touch can start away from the button.
+     * This is added to pressRetentionOffset when moving off of the button.
+     * NOTE The touch area never extends past the parent view bounds and
+     * the Z-index of sibling views always takes precedence if a touch hits
+     * two overlapping views.
+     */
+    hitSlop?: ?EdgeInsetsOrSizeProp,
+    /**
+     * Used to reference react managed views from native code.
+     */
+    id?: string,
+    importantForAccessibility?: ?(
+      | 'auto'
+      | 'yes'
+      | 'no'
+      | 'no-hide-descendants'
+    ),
+    nativeID?: ?string,
+    onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "blur" occurs, meaning the element lost focus.
+     * Some platforms may not have the concept of blur.
+     */
+    onBlur?: ?(event: BlurEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "focus" occurs. Some platforms may not have
+     * the concept of focus.
+     */
+    onFocus?: ?(event: FocusEvent) => mixed,
+    /**
+     * Invoked on mount and layout changes with
+     * {nativeEvent: {layout: {x, y, width, height}}}
+     */
+    onLayout?: ?(event: LayoutChangeEvent) => mixed,
+    onLongPress?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * Called when the touch is released,
+     * but not if cancelled (e.g. by a scroll that steals the responder lock).
+     */
+    onPress?: ?(event: GestureResponderEvent) => mixed,
+    onPressIn?: ?(event: GestureResponderEvent) => mixed,
+    onPressOut?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * When the scroll view is disabled, this defines how far your
+     * touch may move off of the button, before deactivating the button.
+     * Once deactivated, try moving it back and you'll see that the button
+     * is once again reactivated! Move it back and forth several times
+     * while the scroll view is disabled. Ensure you pass in a constant
+     * to reduce memory allocations.
+     */
+    pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
+    rejectResponderTermination?: ?boolean,
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: ?string,
+    /**
+     * //FIXME: not in doc but available in examples
+     */
+    style?: ?ViewStyleProp,
+  } & TouchableWithoutFeedbackPropsAndroid &
+    TouchableWithoutFeedbackPropsIOS &
+    AccessibilityProps,
+>;
 
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',
@@ -110,7 +154,16 @@ const PASSTHROUGH_PROPS = [
   'testID',
 ];
 
-module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
+/**
+ * Do not use unless you have a very good reason.
+ * All the elements that respond to press should have a visual feedback when touched.
+ * This is one of the primary reason a "web" app doesn't feel "native".
+ *
+ * @see https://reactnative.dev/docs/touchablewithoutfeedback
+ */
+export default function TouchableWithoutFeedback(
+  props: TouchableWithoutFeedbackProps,
+): React.Node {
   const {
     disabled,
     rejectResponderTermination,
@@ -231,4 +284,4 @@ module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
 
   // $FlowFixMe[incompatible-call]
   return React.cloneElement(element, elementProps, ...children);
-};
+}

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -8,94 +8,141 @@
  * @format
  */
 
-import type {
-  AccessibilityActionEvent,
-  AccessibilityActionInfo,
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
-} from '../../Components/View/ViewAccessibility';
+import type {AccessibilityActionEvent} from '../../Components/View/ViewAccessibility';
 import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
-  LayoutEvent,
+  LayoutChangeEvent,
   MouseEvent, // [Windows]
-  PressEvent,
+  GestureResponderEvent,
 } from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
+import {type AccessibilityProps} from '../../Components/View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
+import {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 import {useMemo} from 'react';
 import Animated from '../../Animated/Animated'; // Windows
 
-type Props = $ReadOnly<{|
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
-  accessibilityElementsHidden?: ?boolean,
-  accessibilityHint?: ?Stringish,
-  accessibilityLanguage?: ?Stringish,
-  accessibilityIgnoresInvertColors?: ?boolean,
-  accessibilityLabel?: ?Stringish,
-  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
-  accessibilityRole?: ?AccessibilityRole,
-  accessibilityState?: ?AccessibilityState,
-  accessibilityValue?: ?AccessibilityValue,
-  'aria-valuemax'?: AccessibilityValue['max'],
-  'aria-valuemin'?: AccessibilityValue['min'],
-  'aria-valuenow'?: AccessibilityValue['now'],
-  'aria-valuetext'?: AccessibilityValue['text'],
-  accessibilityViewIsModal?: ?boolean,
-  'aria-modal'?: ?boolean,
-  accessible?: ?boolean,
+export type TouchableWithoutFeedbackPropsIOS = {};
+
+export type TouchableWithoutFeedbackPropsAndroid = {
   /**
-   * alias for accessibilityState
+   * If true, doesn't play a system sound on touch.
    *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   * @platform android
    */
-  'aria-busy'?: ?boolean,
-  'aria-checked'?: ?boolean | 'mixed',
-  'aria-disabled'?: ?boolean,
-  'aria-expanded'?: ?boolean,
-  'aria-selected'?: ?boolean,
-  'aria-readonly'?: ?boolean, // Windows
-  'aria-multiselectable'?: ?boolean, // Windows
-  'aria-required'?: ?boolean, // Windows
-  'aria-hidden'?: ?boolean,
-  'aria-live'?: ?('polite' | 'assertive' | 'off'),
-  'aria-label'?: ?Stringish,
-  children?: ?React.Node,
-  delayLongPress?: ?number,
-  delayPressIn?: ?number,
-  delayPressOut?: ?number,
-  disabled?: ?boolean,
-  focusable?: ?boolean,
-  hitSlop?: ?EdgeInsetsOrSizeProp,
-  id?: string,
-  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
-  nativeID?: ?string,
-  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
-  onBlur?: ?(event: BlurEvent) => mixed,
-  onFocus?: ?(event: FocusEvent) => mixed,
-  onLayout?: ?(event: LayoutEvent) => mixed,
-  onLongPress?: ?(event: PressEvent) => mixed,
-  onPress?: ?(event: PressEvent) => mixed,
-  onPressIn?: ?(event: PressEvent) => mixed,
-  onPressOut?: ?(event: PressEvent) => mixed,
-  pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
-  rejectResponderTermination?: ?boolean,
-  testID?: ?string,
   touchSoundDisabled?: ?boolean,
-  accessibilityPosInSet?: ?number, // [Windows]
-  accessibilitySetSize?: ?number, // [Windows]
-  onAccessibilityTap?: ?() => void, // [Windows]
-  onMouseEnter?: ?(event: MouseEvent) => void, // [Windows]
-  onMouseLeave?: ?(event: MouseEvent) => void, // [Windows]
-  tabIndex?: ?number, // [Windows]
-  tooltip?: ?Stringish, // [Windows]
-  hostRef?: React.RefSetter<React.ElementRef<typeof Animated.View>>, // [Windows]
-|}>;
+};
+
+// [Windows
+export type TouchableWithoutFeedbackPropsWindows = {
+  accessibilityPosInSet?: ?number,
+  accessibilitySetSize?: ?number,
+  onAccessibilityTap?: ?() => void,
+  onMouseEnter?: ?(event: MouseEvent) => void,
+  onMouseLeave?: ?(event: MouseEvent) => void,
+  tabIndex?: ?number,
+  tooltip?: ?Stringish,
+  hostRef?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+};
+// Windows]
+
+export type TouchableWithoutFeedbackProps = $ReadOnly<
+  {
+    children?: ?React.Node,
+    /**
+     * Delay in ms, from onPressIn, before onLongPress is called.
+     */
+    delayLongPress?: ?number,
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called.
+     */
+    delayPressIn?: ?number,
+    /**
+     * Delay in ms, from the release of the touch, before onPressOut is called.
+     */
+    delayPressOut?: ?number,
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled?: ?boolean,
+    /**
+     * Whether this View should be focusable with a non-touch input device,
+     * eg. receive focus with a hardware keyboard / TV remote.
+     */
+    focusable?: ?boolean,
+    /**
+     * This defines how far your touch can start away from the button.
+     * This is added to pressRetentionOffset when moving off of the button.
+     * NOTE The touch area never extends past the parent view bounds and
+     * the Z-index of sibling views always takes precedence if a touch hits
+     * two overlapping views.
+     */
+    hitSlop?: ?EdgeInsetsOrSizeProp,
+    /**
+     * Used to reference react managed views from native code.
+     */
+    id?: string,
+    importantForAccessibility?: ?(
+      | 'auto'
+      | 'yes'
+      | 'no'
+      | 'no-hide-descendants'
+    ),
+    nativeID?: ?string,
+    onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "blur" occurs, meaning the element lost focus.
+     * Some platforms may not have the concept of blur.
+     */
+    onBlur?: ?(event: BlurEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "focus" occurs. Some platforms may not have
+     * the concept of focus.
+     */
+    onFocus?: ?(event: FocusEvent) => mixed,
+    /**
+     * Invoked on mount and layout changes with
+     * {nativeEvent: {layout: {x, y, width, height}}}
+     */
+    onLayout?: ?(event: LayoutChangeEvent) => mixed,
+    onLongPress?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * Called when the touch is released,
+     * but not if cancelled (e.g. by a scroll that steals the responder lock).
+     */
+    onPress?: ?(event: GestureResponderEvent) => mixed,
+    onPressIn?: ?(event: GestureResponderEvent) => mixed,
+    onPressOut?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * When the scroll view is disabled, this defines how far your
+     * touch may move off of the button, before deactivating the button.
+     * Once deactivated, try moving it back and you'll see that the button
+     * is once again reactivated! Move it back and forth several times
+     * while the scroll view is disabled. Ensure you pass in a constant
+     * to reduce memory allocations.
+     */
+    pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
+    rejectResponderTermination?: ?boolean,
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: ?string,
+    /**
+     * //FIXME: not in doc but available in examples
+     */
+    style?: ?ViewStyleProp,
+  } & TouchableWithoutFeedbackPropsAndroid &
+    TouchableWithoutFeedbackPropsIOS &
+    TouchableWithoutFeedbackPropsWindows & // [Windows]
+    AccessibilityProps,
+>;
 
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',
@@ -130,13 +177,20 @@ const PASSTHROUGH_PROPS = [
   'tooltip', // [Windows]
 ];
 
-// Modify the function to accept the ref prop and forward it
+/**
+ * Do not use unless you have a very good reason.
+ * All the elements that respond to press should have a visual feedback when touched.
+ * This is one of the primary reason a "web" app doesn't feel "native".
+ *
+ * @see https://reactnative.dev/docs/touchablewithoutfeedback
+ */
+// [Windows
 // $FlowFixMe[prop-missing]
 const TouchableWithoutFeedback: React.AbstractComponent<
-  Props,
+  TouchableWithoutFeedbackProps,
   React.ElementRef<typeof Animated.View>,
 > = React.forwardRef(function TouchableWithoutFeedback(
-  props: Props,
+  props: TouchableWithoutFeedbackProps,
   ref,
 ): React.Node {
   const {
@@ -272,4 +326,5 @@ const TouchableWithoutFeedback: React.AbstractComponent<
   return React.cloneElement(element, {...elementProps, ref}, ...children);
 });
 
-module.exports = TouchableWithoutFeedback;
+export default TouchableWithoutFeedback;
+// Windows]

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -8,6 +8,6 @@
  * @flow strict-local
  */
 
-export * from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
-import UnimplementedNativeViewNativeComponent from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
+export * from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
+import UnimplementedNativeViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
 export default UnimplementedNativeViewNativeComponent;

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -9,17 +9,25 @@
  */
 
 'use strict';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
+type Props = $ReadOnly<{
+  style?: ?ViewStyleProp,
+  children?: React.Node,
+  ...
+}>;
+
 /**
  * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner
  * View component and renders its children.
  */
-class UnimplementedView extends React.Component<$FlowFixMeProps> {
+class UnimplementedView extends React.Component<Props> {
   render(): React.Node {
     // Workaround require cycle from requireNativeComponent
-    const View = require('../View/View');
+    const View = require('../View/View').default;
     return (
       <View style={[styles.unimplementedView, this.props.style]}>
         {this.props.children}
@@ -38,4 +46,4 @@ const styles = StyleSheet.create({
     : {},
 });
 
-module.exports = UnimplementedView;
+export default UnimplementedView;

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -10,6 +10,8 @@
 
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import NativeReactNativeFeatureFlags from '../../../src/private/featureflags/specs/NativeReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
@@ -121,7 +123,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  filter: {process: processFilter},
+  filter:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: processFilter,
+        },
 
   /**
    * MixBlendMode
@@ -136,7 +144,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: {process: processBoxShadow},
+  boxShadow:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: processBoxShadow,
+        },
 
   /**
    * Linear Gradient
@@ -215,4 +229,4 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   objectFit: true,
 };
 
-module.exports = ReactNativeStyleAttributes;
+export default ReactNativeStyleAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -57,4 +57,4 @@ const ReactNativeViewAttributes = {
   RCTView: RCTView,
 };
 
-module.exports = ReactNativeViewAttributes;
+export default ReactNativeViewAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.windows.js

@@ -61,4 +61,4 @@ const ReactNativeViewAttributes = {
   RCTView: RCTView,
 };
 
-module.exports = ReactNativeViewAttributes;
+export default ReactNativeViewAttributes;