react-native: 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.

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<{}> {

Hi smithaitufe, You are having the issue because you are probably exporting addNewTask as default and you importing it as named export. So change import {addNewTask} from ‘…/actions’; to import addNewTask from ‘…/actions’;

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

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

I fixed this error after finding that i have been importing Image from native-base isntead of importing it from react-native.

You may importing this way:

import { foo } from 'bar'

when you should:

import foo from 'bar'

Double check your imports and exports

for me it was a difference between:

import App from ‘./app’

and

import App from ‘./app/index.js’

(the latter fixed the issue)

I solved the issue by importing ‘Image’ from ‘react-native’ instead of ‘native-base’

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’)} /> </TouchableHighLight> </View> ); } }

i solve this problem by creating index.js file and exporting the file from it and at app.js import file from index.js . suppose you have to import loginform.js from ./src/component to app.js then first make index.js file on component folder then export loginform to index.js on app.js import loginform from index.js

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

If you are importing a class that you have Exported as default. e.g ‘export default ClassName’;

Then you will get this error. So instead of importing like this import { ClassName } from ‘./ClassName’

Use

import ClassName from ‘./ClassName’

In my case it happened when I was importing List from react-native-elements to use it with FlatList.

However, it seems react-native-elements no longer has List as a component since 1.0.0BETA4. Changing List to View fixed it for me.

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

This isn’t the most helpful error message. my issue was in the import

import Provider from ‘react-redux’;

instead of

import { Provider } from ‘react-redux’;

It’s import problem. When I used: in cart.js const CartItem = require("./cart-item"); in cart-item.js export default CartItem I did have this problem, but when I change import: in cart.js import CartItem from "../cart/cart-item"; all works fine!

@danielland85 same problem, same solution. for anyone else who recently upgraded native-base, they decided to remove the drawer in 2.7.2. SEMVER FTW

i found the solution by downgrade native-base@2.7.0

having the same problem today and I solved it just as prabin12 did. I created index.js in my components folder and export my app.js from it.

import App from ‘./App.js’; export { App };

In my case it was a lack of attention, without realizing it was importing a class from a file that it did not exist. It was importing along with other classes from this same file, and only then did I realize that specifically this class was not from such a file. My suggestion, check 100% imports if it’s right, it might be a simple mistake.

https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string

Removing the curly braces from the name of the function or the class, which I am importing solved the error for me. Like- import NewHeader from ‘./components/Header.js’; instead of import {NewHeader} from ‘./components/Header.js’;

my mistake!!! i was importing my Provider from ‘redux’ instead from ‘react-redux’ once i fixed that issue the error stopped showing up import { Provider } from 'redux' // WRONG!! i corrected the imports by: import { Provider } from 'react-redux' //CORRECT!!

after i fixed that the error stopped showing up!

happy coding people!

i have been having the same error, i tried all the above solutions and even went to just making a very simple app and discovered that the error only popped up when i was setting up my redux, when i added //// <Provider store={store}> <TodoApp /> <Provider>

the problem might be due to the latest redux package but then again i m not to experienced in react-native to give a solid conclusion.

please assist me further on my issue

A slight variation that I’m including for any others that also hit it.

For me, the this code was causing that same error. This fails:

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

    return (
      <View>
        <Text style={{color: 'red'}}>
          and red
        </Text>
      </View>
    );

(although bizarrely, if I changed the View to a Text it worked)

The fix for me was to import from react-native not from react-native-elements.

This works :

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

    return (
      <View>
        <Text style={{color: 'red'}}>
          and red
        </Text>
      </View>
    );

Just make sure that your imports are in needed order, I had the same problem and after fix with imports all started to work good.

@ajaykumarramani i have the same problem after updating to latest version of nativebase.

Problem with native-base component Drawer

React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. Check your code at App.js:21. 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in App (at renderApplication.js:33) 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in RCTView (at View.js:60) 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in View (at AppContainer.js:102) 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in RCTView (at View.js:60) 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in View (at AppContainer.js:122) 07-19 18:13:38.381 5975 6003 W ReactNativeJS: in AppContainer (at renderApplication.js:32)

import React, { Component } from ‘react’; import { Text, } from ‘react-native’; import { Drawer, Icon, Button, Container, Header, Content, Left, Right, Body } from ‘native-base’; import SideBar from ‘./HomeScreen’;

export default class App extends Component {

closeDrawer(){ this._drawer._root.close() }; openDrawer(){ this._drawer._root.open() };

render() { return ( <Drawer ref = { (ref) => { this._drawer = ref; } } content = { <SideBar navigator={ this._navigator } /> } onClose = { () => this.closeDrawer() } > <Container> <Header> <Left> <Button transparent onPress={() => this.closeDrawer()}> <Icon name='menu' /> </Button> </Left> <Body> <Text>Home Screen</Text> </Body> <Right> <Icon name='home' /> </Right> </Header> <Content> <Text> Home Screen </Text> </Content> </Container> </Drawer> ); } }

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

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

@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.

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 😉