Using HOC with Wrapper Forwarding refs via es7 Decorators. Throw error "Expected a constructor"

[xutm]

🐛 Bug Report

Using HOC with Wrapper Forwarding refs via es7 Decorators will throw Expected a constructor error.

To Reproduce

• react-native init AwesomeProject
• cd AwesomeProject
• Add FancyButton.js and index.js
• react-native run-ios
• you can find error with "Expected a constructor"

Code Example

• FancyButton.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />
  })
}

@logProps
class FancyButton extends React.Component {
  render() {
    return <View>
        {this.props.children}
      </View>
  }
}

export default FancyButton

• index.js

import React, { Component } from 'react'
import { Text, AppRegistry, View } from 'react-native'
import FancyButton from './FancyButton'

class HelloWorldApp extends Component {
  render() {
    const ref = React.createRef()

    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <FancyButton ref={ref}>
          <Text>Hello, world!</Text>
        </FancyButton>
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => (HelloWorldApp))

Environment

react: 16.8.3,
react-native: 0.59.1
@babel/plugin-proposal-decorators: 7.4.0

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Memory: 25.50 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.2.0 - ~/.nvm/versions/node/v10.2.0/bin/node
Yarn: 1.10.1 - ~/.nvm/versions/node/v10.2.0/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.2.0/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 26.0.0, 26.0.2, 27.0.3, 28.0.3
IDEs:
Android Studio: 3.1 AI-173.4720617
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmGlobalPackages:
react-native-cli: 2.0.1

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write `[skip envinfo]` alongside an explanation in your Environment: section.

[xutm]

Similar issue

[lukasikora]

Same issue for enhancer HOC (as decorator) with new react-redux package (ver 7). I have debugged the issue and found out that react-proxy library checks type of components and assumes that they are functions. Assumption is not quite up to date considering react memoized components (js objects, not functions), react-redux 'connect' function returning memo component and other cases when
returned component is not a function.

[kelset]

hey everyone, it seems that this is basically a duplicate of #24553 and I'd like to keep the redundancy low, I'll write a follow up comment over there.

[gaearon]

0.61 is out with a fix.