diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js index 94ffb6fea6d..be74cb04c0d 100644 --- a/packages/react-native/Libraries/Components/View/View.js +++ b/packages/react-native/Libraries/Components/View/View.js @@ -10,7 +10,6 @@ import type {ViewProps} from './ViewPropTypes'; -import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags'; import TextAncestorContext from '../../Text/TextAncestorContext'; import ViewNativeComponent from './ViewNativeComponent'; import * as React from 'react'; @@ -29,183 +28,98 @@ component View( ) { const hasTextAncestor = use(TextAncestorContext); - let actualView; - if (ReactNativeFeatureFlags.reduceDefaultPropsInView()) { - const { - accessibilityState, - accessibilityValue, - 'aria-busy': ariaBusy, - 'aria-checked': ariaChecked, - 'aria-disabled': ariaDisabled, - 'aria-expanded': ariaExpanded, - 'aria-hidden': ariaHidden, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, - 'aria-live': ariaLive, - 'aria-selected': ariaSelected, - 'aria-valuemax': ariaValueMax, - 'aria-valuemin': ariaValueMin, - 'aria-valuenow': ariaValueNow, - 'aria-valuetext': ariaValueText, - id, - tabIndex, - ...otherProps - } = props; + const { + accessibilityState, + accessibilityValue, + 'aria-busy': ariaBusy, + 'aria-checked': ariaChecked, + 'aria-disabled': ariaDisabled, + 'aria-expanded': ariaExpanded, + 'aria-hidden': ariaHidden, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + 'aria-live': ariaLive, + 'aria-selected': ariaSelected, + 'aria-valuemax': ariaValueMax, + 'aria-valuemin': ariaValueMin, + 'aria-valuenow': ariaValueNow, + 'aria-valuetext': ariaValueText, + id, + tabIndex, + ...otherProps + } = props; - // Since we destructured props, we can now treat it as mutable - const processedProps = otherProps as {...ViewProps}; + // Since we destructured props, we can now treat it as mutable + const processedProps = otherProps as {...ViewProps}; - const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g); - if (parsedAriaLabelledBy !== undefined) { - processedProps.accessibilityLabelledBy = parsedAriaLabelledBy; - } - - if (ariaLabel !== undefined) { - processedProps.accessibilityLabel = ariaLabel; - } - - if (ariaLive !== undefined) { - processedProps.accessibilityLiveRegion = - ariaLive === 'off' ? 'none' : ariaLive; - } - - if (ariaHidden !== undefined) { - processedProps.accessibilityElementsHidden = ariaHidden; - if (ariaHidden === true) { - processedProps.importantForAccessibility = 'no-hide-descendants'; - } - } - - if (id !== undefined) { - processedProps.nativeID = id; - } - - if (tabIndex !== undefined) { - processedProps.focusable = !tabIndex; - } - - if ( - accessibilityState != null || - ariaBusy != null || - ariaChecked != null || - ariaDisabled != null || - ariaExpanded != null || - ariaSelected != null - ) { - processedProps.accessibilityState = { - busy: ariaBusy ?? accessibilityState?.busy, - checked: ariaChecked ?? accessibilityState?.checked, - disabled: ariaDisabled ?? accessibilityState?.disabled, - expanded: ariaExpanded ?? accessibilityState?.expanded, - selected: ariaSelected ?? accessibilityState?.selected, - }; - } - - if ( - accessibilityValue != null || - ariaValueMax != null || - ariaValueMin != null || - ariaValueNow != null || - ariaValueText != null - ) { - processedProps.accessibilityValue = { - max: ariaValueMax ?? accessibilityValue?.max, - min: ariaValueMin ?? accessibilityValue?.min, - now: ariaValueNow ?? accessibilityValue?.now, - text: ariaValueText ?? accessibilityValue?.text, - }; - } - - actualView = - ref == null ? ( - - ) : ( - - ); - } else { - const { - accessibilityElementsHidden, - accessibilityLabel, - accessibilityLabelledBy, - accessibilityLiveRegion, - accessibilityState, - accessibilityValue, - 'aria-busy': ariaBusy, - 'aria-checked': ariaChecked, - 'aria-disabled': ariaDisabled, - 'aria-expanded': ariaExpanded, - 'aria-hidden': ariaHidden, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, - 'aria-live': ariaLive, - 'aria-selected': ariaSelected, - 'aria-valuemax': ariaValueMax, - 'aria-valuemin': ariaValueMin, - 'aria-valuenow': ariaValueNow, - 'aria-valuetext': ariaValueText, - focusable, - id, - importantForAccessibility, - nativeID, - tabIndex, - ...otherProps - } = props; - const _accessibilityLabelledBy = - ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy; - - const _accessibilityState = - accessibilityState != null || - ariaBusy != null || - ariaChecked != null || - ariaDisabled != null || - ariaExpanded != null || - ariaSelected != null - ? { - busy: ariaBusy ?? accessibilityState?.busy, - checked: ariaChecked ?? accessibilityState?.checked, - disabled: ariaDisabled ?? accessibilityState?.disabled, - expanded: ariaExpanded ?? accessibilityState?.expanded, - selected: ariaSelected ?? accessibilityState?.selected, - } - : undefined; - - const _accessibilityValue = - accessibilityValue != null || - ariaValueMax != null || - ariaValueMin != null || - ariaValueNow != null || - ariaValueText != null - ? { - max: ariaValueMax ?? accessibilityValue?.max, - min: ariaValueMin ?? accessibilityValue?.min, - now: ariaValueNow ?? accessibilityValue?.now, - text: ariaValueText ?? accessibilityValue?.text, - } - : undefined; - - actualView = ( - - ); + const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g); + if (parsedAriaLabelledBy !== undefined) { + processedProps.accessibilityLabelledBy = parsedAriaLabelledBy; } + if (ariaLabel !== undefined) { + processedProps.accessibilityLabel = ariaLabel; + } + + if (ariaLive !== undefined) { + processedProps.accessibilityLiveRegion = + ariaLive === 'off' ? 'none' : ariaLive; + } + + if (ariaHidden !== undefined) { + processedProps.accessibilityElementsHidden = ariaHidden; + if (ariaHidden === true) { + processedProps.importantForAccessibility = 'no-hide-descendants'; + } + } + + if (id !== undefined) { + processedProps.nativeID = id; + } + + if (tabIndex !== undefined) { + processedProps.focusable = !tabIndex; + } + + if ( + accessibilityState != null || + ariaBusy != null || + ariaChecked != null || + ariaDisabled != null || + ariaExpanded != null || + ariaSelected != null + ) { + processedProps.accessibilityState = { + busy: ariaBusy ?? accessibilityState?.busy, + checked: ariaChecked ?? accessibilityState?.checked, + disabled: ariaDisabled ?? accessibilityState?.disabled, + expanded: ariaExpanded ?? accessibilityState?.expanded, + selected: ariaSelected ?? accessibilityState?.selected, + }; + } + + if ( + accessibilityValue != null || + ariaValueMax != null || + ariaValueMin != null || + ariaValueNow != null || + ariaValueText != null + ) { + processedProps.accessibilityValue = { + max: ariaValueMax ?? accessibilityValue?.max, + min: ariaValueMin ?? accessibilityValue?.min, + now: ariaValueNow ?? accessibilityValue?.now, + text: ariaValueText ?? accessibilityValue?.text, + }; + } + + const actualView = + ref == null ? ( + + ) : ( + + ); + if (hasTextAncestor) { return ( {actualView} diff --git a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js index 8ace2238ded..070252d7b65 100644 --- a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js +++ b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js @@ -828,17 +828,6 @@ const definitions: FeatureFlagDefinitions = { }, ossReleaseStage: 'none', }, - reduceDefaultPropsInView: { - defaultValue: true, - metadata: { - dateAdded: '2025-5-12', - description: - 'Optimize how default (accessibility) props are processed in View to avoid unnecessary keys.', - expectedReleaseValue: true, - purpose: 'experimentation', - }, - ossReleaseStage: 'none', - }, shouldUseAnimatedObjectForTransform: { defaultValue: false, metadata: { diff --git a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js index 43a4976f352..190922e6713 100644 --- a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js +++ b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<4a82f02f08467a26ec38ec44d21484cf>> + * @generated SignedSource<<1f567a382688ca9876d17e9ce8d428ff>> * @flow strict * @noformat */ @@ -35,7 +35,6 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{ enableAccessToHostTreeInFabric: Getter, fixVirtualizeListCollapseWindowSize: Getter, isLayoutAnimationEnabled: Getter, - reduceDefaultPropsInView: Getter, shouldUseAnimatedObjectForTransform: Getter, shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter, shouldUseSetNativePropsInFabric: Getter, @@ -150,11 +149,6 @@ export const fixVirtualizeListCollapseWindowSize: Getter = createJavaSc */ export const isLayoutAnimationEnabled: Getter = createJavaScriptFlagGetter('isLayoutAnimationEnabled', true); -/** - * Optimize how default (accessibility) props are processed in View to avoid unnecessary keys. - */ -export const reduceDefaultPropsInView: Getter = createJavaScriptFlagGetter('reduceDefaultPropsInView', true); - /** * Enables use of AnimatedObject for animating transform values. */