0

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.

enter image description here

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

enter image description here

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!

Nick Peterson
  • 51
  • 2

1 Answers1

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);
bvaughn
  • 13,300
  • 45
  • 46
  • 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 observer`export const MyComponentMemo = observer(function MyComponentMemo_({ etc }: MyComponentProps) {` Ex 2, `export const MyListView = ({ sort }: MyListViewProps) => {` Ex 3, `export const MyComponent = ({ prop1, prop2 }: MyComponentProps) => {` – Nick Peterson Jul 07 '21 at 00:04