Skip to content

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Mar 26, 2025

Native only. Displays the native tag for Native Host components inside a badge, when user inspects the component.

Only displaying will be supported for now, because in order to get native tags indexable, they should be part of the bridge operations, which is technically a breaking change that requires significantly more time investment.

The text will only be shown when user hovers over the badge.
Screenshot 2025-03-26 at 19 46 40

@hoxyq hoxyq requested review from javache and shwanton March 26, 2025 19:48
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Mar 26, 2025
Copy link

@shwanton shwanton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huge QOL improvement for debugging Native RN Views!

const title =
'Unique identifier for the corresponding native component. React Native only.';

export default function ForgetBadge({nativeTag}: Props): React.Node {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/Forget/NativeTag/

<InspectedElementBadges
hocDisplayNames={element.hocDisplayNames}
compiledWithForget={element.compiledWithForget}
nativeTag={inspectedElement.nativeTag}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: destructure with the rest of inspectedElement?

const {owners, rendererPackageName, rendererVersion, rootType, source} =
inspectedElement;

Copy link
Member

@javache javache left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this!

@hoxyq hoxyq merged commit f0c767e into facebook:main Apr 2, 2025
241 checks passed
@hoxyq hoxyq deleted the react-devtools/native-tag branch April 2, 2025 21:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants