Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Question

I am attempting to use navigation in my react native application, but am receiving an error.

Here is my index.js file:

import React, { Component } from 'react'
import { AppRegistry } from 'react-native';
import App from './App';

class ChatNow extends Component {
    render() {
        return (
            <App />
        )
    }
}

AppRegistry.registerComponent('ChatNow', () => App);

I get the following error:

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

I also tried commenting out the class and just running it the way the base index.js file was when it was created, but I get the same error.

In this case, the app.js file is designed to implement a Navigator component, deprecated from react native but reimplemented through 'react-native-deprecated-custom-components'.

Here is my app.js code:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Navigator from 'react-native-deprecated-custom-components';

import MainScreen from './components/mainScreen'
import SignInScreen from './components/signInScreen';

export default class App extends Component {
  _renderScene(route, navigator) {
    switch(route.name) {
      case 'SignInScreen':
        return <SignInScreen />
      case 'MainScreen':
        return <MainScreen />
    }
  }

  render() {
    return(
      <Navigator 
        initialRoute={{name: 'MainScreen', title: 'Welcome'}}
        renderScene={this._renderScene}
        style={styles.container}
        sceneStyle={styles.sceneContainer}
      />
    )
  }
}

Answer 1

Hi I believe the problem is that you are not passing the top level component to AppRegistry.registerComponent, instead of App it should be ChatNow, but the way i've personally used it, if ChatNow is not doing anything you could just get rid of it and do this:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('ChatNow', () => App);

I hope it helps, I tried just leaving a comment but i dont have enought rep.

Answer 2

Okay, it was the dumbest thing...

Turns out the line of code that was causing the problem was:

import Navigator from 'react-native-deprecated-custom-components';

It should have been:

import { Navigator } from 'react-native-deprecated-custom-components';

Oops.