No Component Names in React Native Web Debugging

Question

When trying to debug React Native within the web browser, I am unable to see any Component names. Whether via standard browser DevTools or the React (Component) browser extension, I do not see any reference to the Component names or even the classNames.

Component names are obfuscated by View, Anonymous, Screen, etc in the React extension. Part of that how the code is written using React Native's defaultView and Screen components. But I would expect to see the child components nested eventually.

CSS classes are in css-xyz123 format, seemingly unrelated to their actual Component and class names.

Anyone know why this is occurring or how to get the Component names visible for web debugging? I considered a few causes:

How the components are written (functional components, often wrapped with Mobx observers)
Babel compiler settings
Other minifiction or React Native build settings

Thank you!

bvaughn · Accepted Answer · 2021-07-02 17:29:38Z

1

A component name like "Anonymous (ForwardRef)" means your source code probably looks something like this:

const Component = React.forwardRef((props, ref) => {...});

The function passed to forwardRef is an anonymous function, so there is no name for DevTools to read. (Note that this will also be true for built-in browser tooling.)

To "fix" this, you can use a named function. There are two options:

const Component = React.forwardRef(function MyComponent(props, ref) {...});

Or:

const MyComponent = (props, ref) => {...};
const Component = React.forwardRef(MyComponent);

answered Jul 2, 2021 at 17:29

bvaughn

13.5k49 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Peterson Over a year ago

Thanks for the reply and suggestions, @bvaughn! I love the idea about forwardRef & anonymous functions. Unfortunately, that const Component = React.forwardRef does not seem to be the culprit as I am not using forwardRef. For reference, here are a few examples of component declaration structures I'm using often. Ex 1, Mobx observerexport const MyComponentMemo = observer(function MyComponentMemo_({ etc }: MyComponentProps) { Ex 2, export const MyListView = ({ sort }: MyListViewProps) => { Ex 3, export const MyComponent = ({ prop1, prop2 }: MyComponentProps) => {

Collectives™ on Stack Overflow

No Component Names in React Native Web Debugging

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related