react-native-tvos 0.78.0-0rc4 → 0.79.0-0

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import type {PressEvent} from '../../Types/CoreEventTypes';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
 import Pressability, {
@@ -24,61 +24,82 @@ import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-
+type TVProps = {
   /**
-   * Determines the type of background drawable that's going to be used to
-   * display feedback. It takes an object with `type` property and extra data
-   * depending on the `type`. It's recommended to use one of the static
-   * methods to generate that dictionary.
-   */
-  background?: ?(
-    | $ReadOnly<{|
-        type: 'ThemeAttrAndroid',
-        attribute:
-          | 'selectableItemBackground'
-          | 'selectableItemBackgroundBorderless',
-        rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
-        type: 'RippleAndroid',
-        color: ?number,
-        borderless: boolean,
-        rippleRadius: ?number,
-      |}>
-  ),
-
-  /**
-   * TV preferred focus (see documentation for the View component).
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
    */
   hasTVPreferredFocus?: ?boolean,
 
   /**
-   * TV next focus down (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusDown?: ?number,
 
   /**
-   * TV next focus forward (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusForward?: ?number,
 
   /**
-   * TV next focus left (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusLeft?: ?number,
 
   /**
-   * TV next focus right (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusRight?: ?number,
 
   /**
-   * TV next focus up (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusUp?: ?number,
+};
 
+export type TouchableNativeFeedbackProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  /**
+   * Determines the type of background drawable that's going to be used to display feedback.
+   * It takes an object with type property and extra data depending on the type.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: ?(
+    | $ReadOnly<{
+        type: 'ThemeAttrAndroid',
+        attribute:
+          | 'selectableItemBackground'
+          | 'selectableItemBackgroundBorderless',
+        rippleRadius: ?number,
+      }>
+    | $ReadOnly<{
+        type: 'RippleAndroid',
+        color: ?number,
+        borderless: boolean,
+        rippleRadius: ?number,
+      }>
+  ),
   /**
    * Set to true to add the ripple effect to the foreground of the view, instead
    * of the background. This is useful if one of your child views has a
@@ -90,56 +111,80 @@ type Props = $ReadOnly<{|
    * versions, this will fallback to background.
    */
   useForeground?: ?boolean,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
-|}>;
+}>;
 
-class TouchableNativeFeedback extends React.Component<Props, State> {
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+class TouchableNativeFeedback extends React.Component<
+  TouchableNativeFeedbackProps,
+  State,
+> {
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for selectable elements.
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackground',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackground',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for borderless selectable elements. Requires API 21+.
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackgroundBorderless',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackgroundBorderless',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android ripple with
-   * the supplied color. If `borderless` is true, the ripple will render outside
-   * of the view bounds. Requires API 21+.
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
    */
   static Ripple: (
     color: string,
     borderless: boolean,
-    rippleRadius: ?number,
-  ) => $ReadOnly<{|
+    rippleRadius?: ?number,
+  ) => $ReadOnly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,
     type: 'RippleAndroid',
-  |}> = (color: string, borderless: boolean, rippleRadius: ?number) => {
+  }> = (color: string, borderless: boolean, rippleRadius?: ?number) => {
     const processedColor = processColor(color);
     invariant(
       processedColor == null || typeof processedColor === 'number',
@@ -221,7 +266,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     }
   }
 
-  _dispatchHotspotUpdate(event: PressEvent): void {
+  _dispatchHotspotUpdate(event: GestureResponderEvent): void {
     if (Platform.OS === 'android') {
       const {locationX, locationY} = event.nativeEvent;
       const hostComponentRef = findHostInstance_DEPRECATED(this);
@@ -337,11 +382,14 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     );
   }
 
-  componentDidMount(): void {
+  componentDidUpdate(
+    prevProps: TouchableNativeFeedbackProps,
+    prevState: State,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidMount(): mixed {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -364,4 +412,4 @@ const getBackgroundProp =
 
 TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
-module.exports = TouchableNativeFeedback;
+export default TouchableNativeFeedback;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -9,8 +9,8 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
@@ -23,31 +23,73 @@ import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 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,
   isTVSelectable?: ?boolean,
   tvParallaxProperties?: TVParallaxPropertiesType,
+
+  /**
+   * 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.
@@ -133,7 +175,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()),
@@ -317,7 +359,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableOpacityProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||
@@ -339,12 +381,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,83 +8,128 @@
  * @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 type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 
 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 = {
+  tvParallaxProperties?: TVParallaxPropertiesType,
+};
+
+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,
-  tvParallaxProperties?: TVParallaxPropertiesType,
-|}>;
+};
+
+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',
@@ -113,7 +158,16 @@ const PASSTHROUGH_PROPS = [
   'tvParallaxProperties',
 ];
 
-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,
@@ -234,4 +288,4 @@ module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
 
   // $FlowFixMe[incompatible-call]
   return React.cloneElement(element, elementProps, ...children);
-};
+}

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;