Element type is invalid: expected a string/class/function got: object

Question

I'm working on React-Native project and got problem while trying to implement react-navigation. I followed a tutorial and when trying to run the project, I get an error that say:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in.

I searched the web, including this site but couldn't find any solution. This is my code: index.js:

import React, { Component } from 'react';
import { Stack } from './config/Router';

class Application extends Component{
  render(){
    <View>
      return <Stack />;
    </View>
  }
}

export default Application;

This is the Router:

import React from 'react';
import { StackNavigator } from 'react-navigation';

import Login from '../components/Login';
import Home from '../components/Home';

export const Stack = StackNavigator({
  Login:{
    screen: Login
  },
  Home:{
    screen: Home,
    navigationOptions: {
      title: 'Home'
    }
  }
});

and this is index.ios.js:

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

AppRegistry.registerComponent('Application', () => Application);

How can I fix the error? Thanks in advance!

Answer 1

It looks like

class Application extends Component{
  render(){
    <View>
      return <Stack />;
    </View>
  }
}

should be

class Application extends Component{
  render(){
    return(
      <View>
        <Stack />
      </View>
    );
  }
}

Also you will need to import the View component in index.js

You likely forgot to export your component from the file it’s defined in.

This is almost always the reason you will get an invalid element error so always double check your imports.