fix: restore View display name

[mdjastrzebski]

Summary:

Resolves #52764

When checking React Native Testing Library support for RN 0.81 I've noticed that all snapshot tests that rendered <View /> rendered it <View_withRef>.

This change break both RN Testing Library simulation layer (could be fixed if needed), and will also affect any users using snapshot testing to test their components.

I've traced this change to #51023 which removed:

- View.displayName = 'View';

This PR restores displayName in order to preserver the snapshot stability.

Note most other built-in components declare displayName:

• Text
• TextInput
• etc

Changelog:

Test Plan:

[react-native-bot]

	Warnings
⚠️	❗ JavaScript API change detected - This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API. Please include a clear changelog message. This change will be subject to extra review. This change was flagged as: BREAKING

Generated by 🚫 dangerJS against cd7ab70

[mdjastrzebski]

re danger not about "BREAKING": this PR restores the state from before #51023, which will only be publish with RN 0.81, therefore should not be considered breaking

[yungsters]

How did you determine #51023 to be the root cause?

I would expect #52018 to have caused this, because it migrates View to Component Syntax. I suspect this because the name _withRef suffix comes from hermes-parser compiling Component Syntax into forwardRef calls with that suffix.

The ideal fix for this is to configure hermes-parser to set options.reactRuntimeTarget: '19' so that it does not produce forwardRef calls at all (because ref is now a prop). The reactRuntimeTarget option was added in [email protected].

I wonder if we need to set it here in @react-native/babel-preset: https://github.com/facebook/react-native/blob/main/packages/react-native-babel-preset/src/configs/main.js#L42C51-L42C65

[yungsters]

Are you able to check whether #52625 resolves the issue for you?

[mdjastrzebski]

@yungsters I've checked the #52625 but it still renders View as View_withRef.

Re root cause:

• I've noticed that chore: convert View to React 19 #51023 removed View.displayName = 'View'.
• After restoring setting displayName it in local node_modules of RNTL repo, it returned rendering to View (instead of View_withRef).
• Note: the rest of chore: convert View to React 19 #51023 seems ok, the only problem is the missing displayName. Which is normally set on other RN components like Text or TextInput.

[yungsters]

As mentioned in my previous comment, #51023 did not cause this. A component implemented as a named function will use that name in snapshot tests.

The View_withRef name comes from how hermes-parser compiles Component Syntax, which was introduced to View by #52018.

Can you tell me how to reproduce this? The root cause is that hermes-parser is not being correctly configured in your test environment, because it is missing the reactRuntimeTarget: '19' configuration.

[mdjastrzebski]

As mentioned in my previous reply, setting reactRuntimeTarget: '19' in the @react-native/babel-preset does not solve the <View_withRef /> issue.

I've prepared a minimal repro showcasing that:

• The main branch contains RN 0.81-rc.0 straight from template with a simple test. This branch is patched with patch-package to apply RN: Default Hermes Parser to reactRuntimeTarget: "19" #52625. Which still results in <View_withRef /> output.

• On the other hand, display-name branch applies the patch from this PR, which results in correct <View /> output.

As additional context I will mention that non of the other components (Text, TextInput, Switch, etc) are affected by the _withRef naming change. It's only View that being affected with that.

@yungsters please advise.

[mdjastrzebski]

Closing as essentially same fix (restoring displayName) was applied in #52688.
CC: @yungsters