React Native error: Element type is invalid: expected a string or a class/function but got: object

Question

I am getting this error and I am having a lot of trouble fixing this.

What I am trying to do here is have 3 different screens and have a tabbar that navigates to each screen.

Here is my index:

import React, { Component } from 'react'; import { AppRegistry, Navigator, StyleSheet, View, Text } from 'react-native';  import Nav from './app/components/Nav'; import Screen from './app/Screen';  import Tabs from 'react-native-tabs'  import SwitchView from './SwitchView';  class Proj extends Component {  constructor(props){     super(props); }  render(){     var x = "FeedView";     return(            <View style={styles.container}>             <Tabs selected={x} style={{backgroundColor:'white'}}                   selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}>                 <Text name="FeedView">First</Text>                 <Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>                 <Text name="BoardView">Third</Text>             </Tabs>              <SwitchView id={x}/>            </View>     ); } }  const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, })  AppRegistry.registerComponent('Proj', () => Proj); 

here is my SwitchView:

import Feed from './app/pages/Feed/Feed'; import Board from './app/pages/Board'; import Wiki from './app/pages/Wiki';  class SwitchView extends Component { render(){     var { id } = this.props;      switch (id) {         case "FeedView":             return <Feed/>         case "WikiView":             return <Wiki/>         case "BoardView":             return <Board/>     } } } 

Answer 1

This is probably caused by some JS module export/import issues in your program, typically for one of the two reasons listed below:

• You forget to export, or you export something incorrectly
• You import something that doesn't exist, or you import something incorrectly

I ran into similar error, but in my case, it is not caused by export but caused by import, and I used the import statement incorrectly to import something that doesn't exist in the module.

In my case, the import was incorrectly written as:

import { MyComponent } from './MyComponents/MyComponent'

while actually it should be:

import MyComponent from './MyComponents/MyComponent'

And it drove me crazy and took me a whole day to figure it out and I hope this will save several hours for some people.

Answer 2

Change your SwitchView definition to

export default class SwitchView extends Component...