@office-iss/react-native-win32 0.0.0-canary.299 → 0.0.0-canary.300

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -47,7 +47,7 @@ function flatAnimatedNodes(
 export default class AnimatedTransform extends AnimatedWithChildren {
   // NOTE: For potentially historical reasons, some operations only operate on
   // the first level of AnimatedNode instances. This optimizes that bevavior.
-  #nodes: $ReadOnlyArray<AnimatedNode>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
 
   _transforms: $ReadOnlyArray<Transform<>>;
 
@@ -74,12 +74,12 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
-    this.#nodes = nodes;
+    this._nodes = nodes;
     this._transforms = transforms;
   }
 
   __makeNative(platformConfig: ?PlatformConfig) {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);
@@ -112,7 +112,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -121,7 +121,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __detach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -85,8 +85,8 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  * See https://reactnative.dev/docs/animatedvalue
  */
 export default class AnimatedValue extends AnimatedWithChildren {
-  #listenerCount: number;
-  #updateSubscription: ?EventSubscription;
+  _listenerCount: number;
+  _updateSubscription: ?EventSubscription;
 
   _value: number;
   _startingValue: number;
@@ -100,8 +100,8 @@ export default class AnimatedValue extends AnimatedWithChildren {
       throw new Error('AnimatedValue: Attempting to set value to undefined');
     }
 
-    this.#listenerCount = 0;
-    this.#updateSubscription = null;
+    this._listenerCount = 0;
+    this._updateSubscription = null;
 
     this._startingValue = this._value = value;
     this._offset = 0;
@@ -127,38 +127,38 @@ export default class AnimatedValue extends AnimatedWithChildren {
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     super.__makeNative(platformConfig);
-    if (this.#listenerCount > 0) {
-      this.#ensureUpdateSubscriptionExists();
+    if (this._listenerCount > 0) {
+      this.__ensureUpdateSubscriptionExists();
     }
   }
 
   addListener(callback: (value: any) => mixed): string {
     const id = super.addListener(callback);
-    this.#listenerCount++;
+    this._listenerCount++;
     if (this.__isNative) {
-      this.#ensureUpdateSubscriptionExists();
+      this.__ensureUpdateSubscriptionExists();
     }
     return id;
   }
 
   removeListener(id: string): void {
     super.removeListener(id);
-    this.#listenerCount--;
-    if (this.__isNative && this.#listenerCount === 0) {
-      this.#updateSubscription?.remove();
+    this._listenerCount--;
+    if (this.__isNative && this._listenerCount === 0) {
+      this._updateSubscription?.remove();
     }
   }
 
   removeAllListeners(): void {
     super.removeAllListeners();
-    this.#listenerCount = 0;
+    this._listenerCount = 0;
     if (this.__isNative) {
-      this.#updateSubscription?.remove();
+      this._updateSubscription?.remove();
     }
   }
 
-  #ensureUpdateSubscriptionExists(): void {
-    if (this.#updateSubscription != null) {
+  __ensureUpdateSubscriptionExists(): void {
+    if (this._updateSubscription != null) {
       return;
     }
     const nativeTag = this.__getNativeTag();
@@ -173,13 +173,13 @@ export default class AnimatedValue extends AnimatedWithChildren {
         },
       );
 
-    this.#updateSubscription = {
+    this._updateSubscription = {
       remove: () => {
         // Only this function assigns to `this.#updateSubscription`.
-        if (this.#updateSubscription == null) {
+        if (this._updateSubscription == null) {
           return;
         }
-        this.#updateSubscription = null;
+        this._updateSubscription = null;
         subscription.remove();
         NativeAnimatedAPI.stopListeningToAnimatedNodeValue(nativeTag);
       },

package/Libraries/AppState/AppState.js

@@ -120,18 +120,18 @@ class AppStateImpl {
     }
     switch (type) {
       case 'change':
-        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        // $FlowFixMe[invalid-tuple-arity] Flow cannot refine handler based on the event type
         const changeHandler: AppStateStatus => void = handler;
         return emitter.addListener('appStateDidChange', appStateData => {
           changeHandler(appStateData.app_state);
         });
       case 'memoryWarning':
-        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        // $FlowFixMe[invalid-tuple-arity] Flow cannot refine handler based on the event type
         const memoryWarningHandler: () => void = handler;
         return emitter.addListener('memoryWarning', memoryWarningHandler);
       case 'blur':
       case 'focus':
-        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        // $FlowFixMe[invalid-tuple-arity] Flow cannot refine handler based on the event type
         const focusOrBlurHandler: () => void = handler;
         return emitter.addListener('appStateFocusChange', hasFocus => {
           if (type === 'blur' && !hasFocus) {

package/Libraries/BatchedBridge/MessageQueue.js

@@ -162,6 +162,8 @@ class MessageQueue {
 
   getCallableModule(name: string): {...} | null {
     const getValue = this._lazyCallableModules[name];
+    /* $FlowFixMe[constant-condition] Error discovered during Constant
+     * Condition roll out. See https://fburl.com/workplace/1v97vimq. */
     return getValue ? getValue() : null;
   }
 
@@ -466,6 +468,8 @@ class MessageQueue {
       const profileName = debug
         ? '<callback for ' + module + '.' + method + '>'
         : cbID;
+      /* $FlowFixMe[constant-condition] Error discovered during Constant
+       * Condition roll out. See https://fburl.com/workplace/1v97vimq. */
       if (callback && this.__spy) {
         this.__spy({type: TO_JS, module: null, method: profileName, args});
       }

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -396,7 +396,7 @@ const AccessibilityInfo = {
    */
   addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
     eventName: K,
-    // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
+    // $FlowFixMe[incompatible-type] - Flow bug with unions and generics (T128099423)
     handler: (...AccessibilityEventDefinitions[K]) => void,
   ): EventSubscription {
     const deviceEventName = EventNames.get(eventName);

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.win32.js

@@ -420,7 +420,7 @@ const AccessibilityInfo = {
    */
   addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
     eventName: K,
-    // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
+    // $FlowFixMe[incompatible-type] - Flow bug with unions and generics (T128099423)
     handler: (...AccessibilityEventDefinitions[K]) => void,
   ): EventSubscription {
     const deviceEventName = EventNames.get(eventName);

package/Libraries/Components/Pressable/Pressable.js

@@ -116,6 +116,12 @@ type PressableBaseProps = $ReadOnly<{
    */
   onPressOut?: ?(event: GestureResponderEvent) => mixed,
 
+  /**
+   * Whether to prevent any other native components from becoming responder
+   * while this pressable is responder.
+   */
+  blockNativeResponder?: ?boolean,
+
   /**
    * Either view styles or a function that receives a boolean reflecting whether
    * the component is currently pressed and returns view styles.
@@ -183,6 +189,7 @@ function Pressable({
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
+    blockNativeResponder,
     cancelable,
     children,
     delayHoverIn,
@@ -236,7 +243,7 @@ function Pressable({
   };
 
   const accessibilityLiveRegion =
-    ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
+    ariaLive === 'off' ? 'none' : (ariaLive ?? props.accessibilityLiveRegion);
 
   const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
@@ -294,10 +301,12 @@ function Pressable({
           onPressOut(event);
         }
       },
+      blockNativeResponder,
     }),
     [
       android_disableSound,
       android_rippleConfig,
+      blockNativeResponder,
       cancelable,
       delayHoverIn,
       delayHoverOut,

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -122,6 +122,12 @@ type PressableBaseProps = $ReadOnly<{
    */
   onPressOut?: ?(event: GestureResponderEvent) => mixed,
 
+  /**
+   * Whether to prevent any other native components from becoming responder
+   * while this pressable is responder.
+   */
+  blockNativeResponder?: ?boolean,
+
   /**
    * Called after the element loses focus.
    */
@@ -231,6 +237,7 @@ function Pressable({
     'aria-multiselectable': ariaMultiselectable, // Win32
     'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
+    blockNativeResponder,
     cancelable,
     children,
     delayHoverIn,
@@ -348,6 +355,7 @@ function Pressable({
           onPressOut(event);
         }
       },
+      blockNativeResponder,
       // [Windows
       onKeyDown,
       onKeyUp,
@@ -356,6 +364,7 @@ function Pressable({
     [
       android_disableSound,
       android_rippleConfig,
+      blockNativeResponder,
       cancelable,
       delayHoverIn,
       delayHoverOut,

package/Libraries/Components/StatusBar/StatusBar.js

@@ -235,8 +235,8 @@ class StatusBar extends React.Component<StatusBarProps> {
   static _defaultProps: any = createStackEntry({
     backgroundColor:
       Platform.OS === 'android'
-        ? NativeStatusBarManagerAndroid.getConstants()
-            .DEFAULT_BACKGROUND_COLOR ?? 'black'
+        ? (NativeStatusBarManagerAndroid.getConstants()
+            .DEFAULT_BACKGROUND_COLOR ?? 'black')
         : 'black',
     barStyle: 'default',
     translucent: false,

package/Libraries/Components/Switch/Switch.js

@@ -215,7 +215,7 @@ const Switch: component(
       native.value != null && native.value !== jsValue;
     if (
       shouldUpdateNativeSwitch &&
-      // $FlowIssue[method-unbinding]
+      // $FlowFixMe[method-unbinding]
       nativeSwitchRef.current?.setNativeProps != null
     ) {
       if (Platform.OS === 'android') {

package/Libraries/Components/TextInput/TextInput.js

@@ -915,8 +915,8 @@ const TextInput: component(
         Platform.OS === 'android'
           ? // $FlowFixMe[invalid-computed-prop]
             // $FlowFixMe[prop-missing]
-            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
-            autoComplete
+            (autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete)
           : undefined
       }
       textContentType={

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -1051,7 +1051,8 @@ const TextInput: component(
       }
       autoComplete={
         Platform.OS === 'android'
-          ? // $FlowFixMe
+          ? // $FlowFixMe[invalid-computed-prop]
+            // $FlowFixMe[prop-missing]
             autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
             autoComplete
           : undefined

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -138,7 +138,7 @@ class TouchableBounce extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
     const _accessibilityState = {
       busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
       checked:

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -328,7 +328,7 @@ class TouchableHighlightImpl extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -332,7 +332,7 @@ class TouchableNativeFeedback extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -294,7 +294,7 @@ class TouchableOpacity extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -189,7 +189,7 @@ export default function TouchableWithoutFeedback(
       disabled:
         disabled !== null
           ? disabled
-          : ariaDisabled ?? accessibilityState?.disabled,
+          : (ariaDisabled ?? accessibilityState?.disabled),
       hitSlop: hitSlop,
       delayLongPress: delayLongPress,
       delayPressIn: delayPressIn,
@@ -272,7 +272,7 @@ export default function TouchableWithoutFeedback(
         ? 'no-hide-descendants'
         : props.importantForAccessibility,
     accessibilityLiveRegion:
-      ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion,
+      ariaLive === 'off' ? 'none' : (ariaLive ?? props.accessibilityLiveRegion),
     nativeID: props.id ?? props.nativeID,
   };
 

package/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';
@@ -23,188 +22,103 @@ import {use} from 'react';
  *
  * @see https://reactnative.dev/docs/view
  */
-export default component View(
+component View(
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 ) {
   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;
-
-    // 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;
-    }
+  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};
+
+  const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+  if (parsedAriaLabelledBy !== undefined) {
+    processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
+  }
 
-    if (ariaLabel !== undefined) {
-      processedProps.accessibilityLabel = ariaLabel;
-    }
+  if (ariaLabel !== undefined) {
+    processedProps.accessibilityLabel = ariaLabel;
+  }
 
-    if (ariaLive !== undefined) {
-      processedProps.accessibilityLiveRegion =
-        ariaLive === 'off' ? 'none' : ariaLive;
-    }
+  if (ariaLive !== undefined) {
+    processedProps.accessibilityLiveRegion =
+      ariaLive === 'off' ? 'none' : ariaLive;
+  }
 
-    if (ariaHidden !== undefined) {
-      processedProps.accessibilityElementsHidden = ariaHidden;
-      if (ariaHidden === true) {
-        processedProps.importantForAccessibility = 'no-hide-descendants';
-      }
+  if (ariaHidden !== undefined) {
+    processedProps.accessibilityElementsHidden = ariaHidden;
+    if (ariaHidden === true) {
+      processedProps.importantForAccessibility = 'no-hide-descendants';
     }
+  }
 
-    if (id !== undefined) {
-      processedProps.nativeID = id;
-    }
+  if (id !== undefined) {
+    processedProps.nativeID = id;
+  }
 
-    if (tabIndex !== undefined) {
-      processedProps.focusable = !tabIndex;
-    }
+  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 (
+    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,
-      };
-    }
+  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 ? (
-        <ViewNativeComponent {...processedProps} />
-      ) : (
-        <ViewNativeComponent {...processedProps} ref={ref} />
-      );
-  } 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 = (
-      <ViewNativeComponent
-        {...otherProps}
-        accessibilityLiveRegion={
-          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
-        }
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
-        accessibilityState={_accessibilityState}
-        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
-        accessibilityLabelledBy={_accessibilityLabelledBy}
-        accessibilityValue={_accessibilityValue}
-        importantForAccessibility={
-          ariaHidden === true
-            ? 'no-hide-descendants'
-            : importantForAccessibility
-        }
-        nativeID={id ?? nativeID}
-        ref={ref}
-      />
+  const actualView =
+    ref == null ? (
+      <ViewNativeComponent {...processedProps} />
+    ) : (
+      <ViewNativeComponent {...processedProps} ref={ref} />
     );
-  }
 
   if (hasTextAncestor) {
     return (
@@ -213,3 +127,7 @@ export default component View(
   }
   return actualView;
 }
+
+View.displayName = 'View';
+
+export default View;