chore: convert View to React 19 (facebook#51023)

Summary:
- Convert View implementation to React 19:
  - Remove legacy `forwardRef` in favor of built-in `ref` prop.
  - Use `use` API instead of `useContext`.
  - Drop the extraneous `.Provider` for `TextAncestor` context.
  - Remove `displayName` in favor of component name. I'm not 100% sure this is a full fallback but it is valid according to `react/display-name` eslint rule—https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
- Based on discussion with Nicola Carti and Riccardo Cipolleschi.
- I tried using flow `component` keyword but it's not enabled in this project. Given the `react-native` package is shipped untranspiled, it's probably safer to avoid newer flow types.
- Overall matched the component style of LogBox.
- It's unclear the exact right way to type a ref since it should be optional for external users of the component but required inside the component. Erring on the side of caution and using optional types so users don't get type errors when `ref` isn't defined.

## Changelog:

[GENERAL] [BREAKING] Upgrade `View` component to React 19.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: facebook#51023

Test Plan: - Type checks should pass.

Reviewed By: rshest

Differential Revision: D74546184

Pulled By: yungsters

fbshipit-source-id: b8257e3a75477c1117b19cd3f8e0843947b092ca

Author: EvanBacon

packages/react-native/Libraries/Components/View/View.js

@@ -23,108 +23,97 @@ export type Props = ViewProps;
  *
  * @see https://reactnative.dev/docs/view
  */
-const View: component(
+function View({
+  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
+}: $ReadOnly<{
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
-  ...props: ViewProps
-) = React.forwardRef(
-  (
-    {
-      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
-    }: ViewProps,
-    forwardedRef,
-  ) => {
-    const hasTextAncestor = React.useContext(TextAncestor);
-    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;
+  ...ViewProps,
+}>): React.Node {
+  const hasTextAncestor = React.use(TextAncestor);
+  const _accessibilityLabelledBy =
+    ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
-    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;
-
-    const actualView = (
-      <ViewNativeComponent
-        {...otherProps}
-        accessibilityLiveRegion={
-          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+  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,
         }
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
-        accessibilityState={_accessibilityState}
-        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
-        accessibilityLabelledBy={_accessibilityLabelledBy}
-        accessibilityValue={_accessibilityValue}
-        importantForAccessibility={
-          ariaHidden === true
-            ? 'no-hide-descendants'
-            : importantForAccessibility
+      : 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,
         }
-        nativeID={id ?? nativeID}
-        ref={forwardedRef}
-      />
-    );
+      : undefined;
 
-    if (hasTextAncestor) {
-      return (
-        <TextAncestor.Provider value={false}>
-          {actualView}
-        </TextAncestor.Provider>
-      );
-    }
+  const 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}
+    />
+  );
 
-    return actualView;
-  },
-);
+  if (hasTextAncestor) {
+    return <TextAncestor value={false}>{actualView}</TextAncestor>;
+  }
 
-View.displayName = 'View';
+  return actualView;
+}
 
-export default View;
+export default View as component(
+  ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
+  ...props: ViewProps
+);

packages/react-native/Libraries/Components/View/__tests__/View-test.js

@@ -25,7 +25,7 @@ describe('View', () => {
   });
 
   it('has displayName', () => {
-    expect(View.displayName).toEqual('View');
+    expect(View.displayName ?? View.name).toEqual('View');
   });
 });
 

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -3496,11 +3496,10 @@ declare export default typeof ReactNativeViewAttributes;
 
 exports[`public API should not change unintentionally Libraries/Components/View/View.js 1`] = `
 "export type Props = ViewProps;
-declare const View: component(
+declare export default component(
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 );
-declare export default typeof View;
 "
 `;