How do I get string name of React Native component class?

Question

I want print class name with string format in react native programmatically. Can any one let me know that, how can I do this?

score 27 · Answer 1 · answered Dec 19 '16 at 08:42

27

In JavaScript you can get the name of the class by using instance.constructor.name.

class Demo extends React.Component {
    componentDidMount(){
        console.log(this.constructor.name);  // "Demo"
    }
}

For JSX components you can use the instance.type.displayName. For instance:

let text = <Text></Text>;
console.log(text.type.displayName) // "Text"

answered Dec 19 '16 at 08:42

martinarroyo

9,389
3
38
75

Thank you martinarroyo, above code working for me. Also I want to get the string name of method render on "onPress" props of Button whenever I will press the button. Can you also help me out to get the same? – Akhilesh Mourya Dec 19 '16 at 11:36
What exactly do you mean? Do you mean to log the `this.constructor.name` inside the onPress callback? It should be essentially the same. For example: ` – martinarroyo Dec 19 '16 at 21:39
19

Doesn't this break when the JS code gets "built"? Class names become symbols, so if you rely on `this.constructor.name` for something important it's likely to fail. – 0x6A75616E Mar 07 '17 at 00:47
Sadly I just confirmed this. They get minified so you need something else for logging. – sebastianf182 Jan 28 '18 at 06:19
In JSX `text.type.displayName` didn't work for me. Instead when I tried `text.type.name` it returned the expected class name – omarwaleed May 22 '18 at 09:01
3

Is someone having any solution to get the component class name in release mode (with release bundle)? I know it works with `this.constructor.name` in debug mode. – Akhilesh Mourya Sep 26 '18 at 07:38
`this.constructor.name` will be change after build release. random character as `g,v,i....`. How to restrict them change or another way ? Thanks ! – Shinichi Feb 07 '20 at 06:44

score 0 · Answer 2 · answered Apr 16 '20 at 04:55

If you look at /Libraries/Renderer/implementations/ReactNativeRenderer-prod.js you will find internal code that defines a function for getting component names. I've brought it out and updated it for RN:

const REACT_PORTAL_TYPE = Symbol.for('react.portal'),
  REACT_FRAGMENT_TYPE = Symbol.for('react.fragment'),
  REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode'),
  REACT_PROFILER_TYPE = Symbol.for('react.profiler'),
  REACT_PROVIDER_TYPE = Symbol.for('react.provider'),
  REACT_CONTEXT_TYPE = Symbol.for('react.context'),
  REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref'),
  REACT_SUSPENSE_TYPE = Symbol.for('react.suspense'),
  REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list'),
  REACT_MEMO_TYPE = Symbol.for('react.memo'),
  REACT_LAZY_TYPE = Symbol.for('react.lazy'),
  REACT_BLOCK_TYPE = Symbol.for('react.block');

export const getComponentName = (type) => {
  if (null == type) return null;
  if ('function' === typeof type) return type.displayName || type.name || null;
  if ('string' === typeof type) return type;
  switch (type) {
    case REACT_FRAGMENT_TYPE:
      return 'Fragment';
    case REACT_PORTAL_TYPE:
      return 'Portal';
    case REACT_PROFILER_TYPE:
      return 'Profiler';
    case REACT_STRICT_MODE_TYPE:
      return 'StrictMode';
    case REACT_SUSPENSE_TYPE:
      return 'Suspense';
    case REACT_SUSPENSE_LIST_TYPE:
      return 'SuspenseList';
  }
  if ('object' === typeof type)
    switch (type.$$typeof) {
      case REACT_CONTEXT_TYPE:
        return (type.displayName || 'Context') + '.Consumer';
      case REACT_PROVIDER_TYPE:
        return (type._context.displayName || 'Context') + '.Provider';
      case REACT_FORWARD_REF_TYPE:
        var innerType = type.render;
        innerType = innerType.displayName || innerType.name || '';
        return type.displayName || ('' !== innerType ? 'ForwardRef(' + innerType + ')' : 'ForwardRef');
      case REACT_MEMO_TYPE:
        return getComponentName(type.type);
      case REACT_BLOCK_TYPE:
        return getComponentName(type.render);
      case REACT_LAZY_TYPE:
        if ((type = 1 === type._status ? type._result : null)) return getComponentName(type);
    }
  return null;
};

How do I get string name of React Native component class?

2 Answers2

Linked