fix: View component does not have a displayName (#52688) (#52880)

Summary:
Hello, I work on [Radon IDE](ide.swmansion.com) I encountered an issue while adding support for react native 81, this PR solves it:
In https://github.com/facebook/react-native/issues/51023 EvanBacon removed `displayName` filed from `View` component adding the following comment:
>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

Unfortunately the Fabric renderer uses the `displayName` property to generate the name of the component for the inspector functionality and in absence of it generates a name that might be confusing to the end user:

<img width="351" height="283" alt="Screenshot 2025-07-17 at 21 27 37" src="https://github.com/user-attachments/assets/852246aa-6586-4684-b80e-5d70b9678c6e" />

Problem is not specific to Radon and happens in chrome devtools as well:

<img width="501" height="130" alt="Screenshot 2025-07-17 at 22 16 52" src="https://github.com/user-attachments/assets/3514dd02-59f7-473a-87b1-6ed325d2034c" />

This PR brings back the `displayName` property to fix that.

[INTERNAL] [FIXED] - Bring back the displayName property to the View component

Pull Request resolved: https://github.com/facebook/react-native/pull/52688

Test Plan:
- Run the application
- open chrome devtools and navigate to "components" tab
- before changes the View components would show up as `View_withRef` after they are named `View`

Rollback Plan:

Reviewed By: lunaleaps, cortinico

Differential Revision: D78512254

Pulled By: alanleedev

fbshipit-source-id: 46e4a224b09fe3fb938c055a675f687c86d7ddcb

Co-authored-by: filip131311 <159789821+filip131311@users.noreply.github.com>
This commit is contained in:
Moti Zilberman
2025-07-28 14:46:36 +01:00
committed by GitHub
co-authored by filip131311
parent 2e52c1aab0
commit b58e5facbd
2 changed files with 10 additions and 4 deletions
+5 -1
View File
@@ -23,7 +23,7 @@ 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
) {
@@ -213,3 +213,7 @@ export default component View(
}
return actualView;
}
View.displayName = 'View';
export default View;
+5 -3
View File
@@ -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<<b56aa13d53b10140225651b9701de96d>>
* @generated SignedSource<<0cdc59a5eb40a092a692cb81e76fe251>>
*
* This file was generated by scripts/build-types/index.js.
*/
@@ -559,6 +559,7 @@ declare const Vibration_default: {
cancel: () => void
vibrate: (pattern?: Array<number> | number, repeat?: boolean) => void
}
declare const View: typeof View_default
declare const ViewNativeComponent_default: HostComponent<ViewProps>
declare const VirtualizedList: typeof VirtualizedListComponent_default
declare const VirtualizedListComponent_default: VirtualizedListType
@@ -5622,7 +5623,8 @@ declare type ValueXYListenerCallback = (value: {
y: number
}) => unknown
declare type Vibration = typeof Vibration
declare function View(
declare type View = typeof View
declare function View_default(
props: ViewProps & {
ref?: React.Ref<React.ComponentRef<typeof $$ViewNativeComponent>>
},
@@ -6166,7 +6168,7 @@ export {
UIManager, // 8d2c8281
UTFSequence, // baacd11b
Vibration, // 315e131d
View, // 75d9e33b
View, // 39dd4de4
ViewProps, // 0ab8ceda
ViewPropsAndroid, // f3d007c3
ViewPropsIOS, // 58ee19bf