Reactive native : Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

This is hard to trace but essentially there was a difference in terms of having bracket in your code, for example,

Good

import Navigator from './tabs/home';

// Ok, If you have export default defined in your js

Fail

import { Navigator} from './tabs/home';

// Works,f you js file has more than a default export.

Apparently this has to do with "De-structuring" object in javascript.


For example, say you have your components export that looks like this :-

export const Tabs = createMaterialTopTabNavigator({

Home: Home,

About: Settings,

Contact: Settings

},{

tabBarOptions: {

activeTintColor: '#000',

inactiveTintColor: 'gray',

style: {

backgroundColor: '#fff',

},

indicatorStyle: {

backgroundColor: '#000',

},

}

});

This works.... .

import { Tabs } from './tabs/home';