Skip to content

Commit 5ef4106

Browse files
filip131311facebook-github-bot
authored andcommitted
fix: View component does not have a displayName (#52688)
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 #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. ## Changelog: [INTERNAL] [FIXED] - Bring back the displayName property to the View component Pull Request resolved: #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
1 parent 3a833d3 commit 5ef4106

2 files changed

Lines changed: 10 additions & 4 deletions

File tree

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {use} from 'react';
2323
*
2424
* @see https://reactnative.dev/docs/view
2525
*/
26-
export default component View(
26+
component View(
2727
ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
2828
...props: ViewProps
2929
) {
@@ -213,3 +213,7 @@ export default component View(
213213
}
214214
return actualView;
215215
}
216+
217+
View.displayName = 'View';
218+
219+
export default View;

packages/react-native/ReactNativeApi.d.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<7839de712363f6691821e0c77dc6b8e8>>
7+
* @generated SignedSource<<421f4cd1a35a7be6057a22dbd76d8e2f>>
88
*
99
* This file was generated by scripts/js-api/build-types/index.js.
1010
*/
@@ -558,6 +558,7 @@ declare const Vibration_default: {
558558
cancel: () => void
559559
vibrate: (pattern?: Array<number> | number, repeat?: boolean) => void
560560
}
561+
declare const View: typeof View_default
561562
declare const ViewNativeComponent_default: HostComponent<ViewProps>
562563
declare const VirtualizedList: typeof VirtualizedListComponent_default
563564
declare const VirtualizedListComponent_default: VirtualizedListType
@@ -5628,7 +5629,8 @@ declare type ValueXYListenerCallback = (value: {
56285629
y: number
56295630
}) => unknown
56305631
declare type Vibration = typeof Vibration
5631-
declare function View(
5632+
declare type View = typeof View
5633+
declare function View_default(
56325634
props: ViewProps & {
56335635
ref?: React.Ref<React.ComponentRef<typeof $$ViewNativeComponent>>
56345636
},
@@ -6173,7 +6175,7 @@ export {
61736175
UIManager, // 8d2c8281
61746176
UTFSequence, // baacd11b
61756177
Vibration, // 315e131d
6176-
View, // 75d9e33b
6178+
View, // 39dd4de4
61776179
ViewProps, // 0ab8ceda
61786180
ViewPropsAndroid, // f3d007c3
61796181
ViewPropsIOS, // 58ee19bf

0 commit comments

Comments
 (0)