React-Native Invariant Violation: Element type is invalid

21
votes

When I going to run my react native app on my iPhone Expo this error displayed in red background area.

Invariant Violation: 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.

this is the App.js inside the 'src/components/' folder 

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


export default class App extends Component {
  render() {
    return (
    	<View>
      		<Text>Hello</Text>
      	</View>
    );
  }
}

This is the main App.js in react-native app folder.

import App from './src/components/App';

I used expo app for run this code. How can I solve this error?

4
javascriptandroidiosreactjsreact-native
How do you know problem is about the App.js file? – nidaorhan
I don’t know about that also i didn’t mentioned that app.js has errors. I need to get a idea about this problem and how to solve this. – Thimeth Karanayaka
I don't think the problem is in the code you shared. I just built a test app with that and it works. Can you share the rest of the app code? Or a sample app? If possible, put it in github. – THpubs
this is simple app I tried to study. these are the codes which i made changes. others are react native bundle of codes. i didn't change anything from that. – Thimeth Karanayaka
export default App; or export {LoginForm}; – Amit Tandel

4 Answers

12
votes

Expo expects you to export a component from /App.js. But right now you are only importing into /App.js. Expo is not receiving any component to render. You need to export the component you imported like this:

export default App;

On side note: Use a class component only if you must.

7
votes

In my case instead of exporting like this:

export default App;

...I exported like following: 

export {LoginForm};

It worked completely fine.

2
votes

I had this error from doing my export in the following style with no default export specified. I did not specify a default because I was exporting multiple small components from one file. 

export const  Modal  = (props) => (
    <div className="someClass">
    </div>        
  )

I was able to get it working by adding brackets to the import statement. 

import {Modal} from '../components/Modal.js'
1
votes

i had same issue and i put export default before class yourclassname extends Component in App.js