React-native-navigation: I get this error when converting from class to function based component

[yassinebridi]

Issue Description

I get error bellow when converting my component from class based to funcitonal based component.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `WrappedComponent`.

This error is located at:
    in WrappedComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
createFiberFromTypeAndProps
    VirtualizedList.js:1081:13
createFiberFromElement
    VirtualizedList.js:1178:42
reconcileSingleElement
...

Steps to Reproduce / Code Snippets / Screenshots

This is before converting:

const React = require("react");
const { Component } = require("react");
const { View, Text, Platform, Button } = require("react-native");

class Home extends Component {
  render() {
    return (
      <View>
        <Text> home </Text>
      </View>
    );
  }
}

module.exports = Home;

And this is after:

const React = require("react");
const { Component } = require("react");
const { View, Text, Platform, Button } = require("react-native");

const Home = () => {
  return (
    <View>
      <Text> home </Text>
    </View>
  );
};

export default Home;

---

Environment

• React Native Navigation version: 2.22.3
• React Native version: 0.59.10
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Genymotion, os: Android 5.1.0

[sanketdeshmukh19]

How did you solve this issue?

[ryanpag3]

For those that stumble on this like I did, I had to make a small change in how I registered functional components vs class-based components.

Navigation.registerComponent(key, () => ScreenComponent) (note the arrow function)