Skip to content

Commit b58e5fa

Browse files
motiz88filip131311
andauthored
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 #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: #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>
1 parent 2e52c1a commit b58e5fa

File tree

2 files changed

+10
-4
lines changed

2 files changed

+10
-4
lines changed

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<<b56aa13d53b10140225651b9701de96d>>
7+
* @generated SignedSource<<0cdc59a5eb40a092a692cb81e76fe251>>
88
*
99
* This file was generated by scripts/build-types/index.js.
1010
*/
@@ -559,6 +559,7 @@ declare const Vibration_default: {
559559
cancel: () => void
560560
vibrate: (pattern?: Array<number> | number, repeat?: boolean) => void
561561
}
562+
declare const View: typeof View_default
562563
declare const ViewNativeComponent_default: HostComponent<ViewProps>
563564
declare const VirtualizedList: typeof VirtualizedListComponent_default
564565
declare const VirtualizedListComponent_default: VirtualizedListType
@@ -5622,7 +5623,8 @@ declare type ValueXYListenerCallback = (value: {
56225623
y: number
56235624
}) => unknown
56245625
declare type Vibration = typeof Vibration
5625-
declare function View(
5626+
declare type View = typeof View
5627+
declare function View_default(
56265628
props: ViewProps & {
56275629
ref?: React.Ref<React.ComponentRef<typeof $$ViewNativeComponent>>
56285630
},
@@ -6166,7 +6168,7 @@ export {
61666168
UIManager, // 8d2c8281
61676169
UTFSequence, // baacd11b
61686170
Vibration, // 315e131d
6169-
View, // 75d9e33b
6171+
View, // 39dd4de4
61706172
ViewProps, // 0ab8ceda
61716173
ViewPropsAndroid, // f3d007c3
61726174
ViewPropsIOS, // 58ee19bf

0 commit comments

Comments
 (0)