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.

[AAGSICON]

Is this a bug report?

yes

App.js.txt
User_List.php.txt

Have you read the Contributing Guidelines?

(Write your answer here.)

Environment

Steps to Reproduce

(Write your steps here:)

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[bobmulder]

While this report is minimalistic (so I do understand nobody responded on this one), I do have the same error. I'm not on my workspace so I'll try to explain what happens.

I was using version 0.43.x when I upgraded to 0.49.x. This was the moment my app failed because of dependencies (PropTypes, et cetera), so I tried to reinstall packages with NPM, clear cache, et cetera. The code does NOT recognize components by React Native. PHPStorm does not link the imported component (like it should do), so that seems to be related to this error when running run-android.

At this moment I am planning to start a new project (newest version of RN) and copy my src folder into it. But this should not be the right solution huh ;)

[simoarpe]

Any updates on this?
I'm facing the same error.
I've updated from 0.48.1 to 0.48.4.

[simoarpe]

I answer my own question.
The fix is fairly simple.
Open App.js file and modify this line
class YourApp extends Component {
into
export default class YourApp extends Component<{}> {

[bobmulder]

@simoarpe My editor gives me a warning when using <{}>. This seems to be invalid. Is that right?

[simoarpe]

@bobmulder supposedly it should be accurate, that is the same syntax used in the App.js when a new project is generated using react-native init YourApp.

[bobmulder]

Okay I'll check it out when I'm home. Thanks for noticing!

[dexter21r]

Adding export default solved my problem

my code

//Import library to help create component
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';

//Create a Component
const App = () => (
  <Header />
);

//Export App - This line solved my issue
export default App;

//Render it to the device
AppRegistry.registerComponent('albums', () => App);
//albums is project name that we use while creating RN App

[jayeshjain24]

I am facing the same issue on Linux .
react-native-cli: 2.0.1
react-native: 0.50.3
node -v : v9.2.0
npm -v : 5.5.1

[HannanShaik]

I am facing this issue as well. I have tried solutions suggested by @dexter21r and @simoarpe but no luck. I am getting this error not in my root App.js but in one of my screens where i am using a ScrollView

[rakeshgithub]

adding export default App worked for me
`//Render it to the device

export default App;

AppRegistry.registerComponent('albums', () => App);`

I was having the same in root App.js

[satejsarker]

@rakeshgithub answer is work for me

[Johncy1997]

import React, { Component } from 'react';
import { AppRegistry, FlatList,
StyleSheet, Text, View, Image, Alert, Platform,
TouchableHighLight,
RefreshControl, TextInput} from 'react-native';
import {addNewTask} from '../actions';

export default class AddComponent extends Component{
constructor(props)
{
super(props);
this.state = ({
newTaskName: ''
});
}
render(){
return(
<View style={{
backgroundColor: 'tomato',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
height: 64
}}>
<TextInput style={{
height :40,
width: 200,
margin: 10,
padding: 10,
borderColor: 'white',
borderWidth: 1,
color: 'white'
}}
keyboardType= 'default'
placeholderTextColor= 'white'
placeholder= 'Enter task name'
autoCapitalize= 'none'
onChangeText={
(text) => {
this.setState({
newTaskName: text
});
}
}
/>
<TouchableHighLight
style={{
marginRight: 30
}}
underlayColor='blue'
onPress={(event)=>{
if(!this.state.newTaskName.trim()){
return;
}
this.props.onClickAdd(this.state.newTaskName);
//call click event => use "Container"
}}
>
<Image
style={{ width: 35, height: 35 }}
source={require('../images/download.png')}
/>


);
}
}

[smithaitufe]

Please what is the solution to this error? I have tried all the suggestions and no one worked for me.

This is making react native really really unpredictable

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}