-1

I'm new to React-Native and trying to start with it by following a beginner's tutorial. I've followed the tutorial and created a "Header" component and try to export and import it and eventually use it. Unfortunately I get an error: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object. I went across these two questions:

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

But none of them helped me to solve my issue.

These are my files and their contents:

index.js

import { AppRegistry } from 'react-native';
import App from './App';

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

App.android.js

// Import section
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';

// create a component
const App = () => (
    <Header />
);

// Render it to the device
AppRegistry.registerComponent('albums', () => App);

header.js

// Import labraries for making a component
import React from 'react';
import { Text } from 'react-native';

// Make a component
const Header = () => {
    return <Text>Albums</Text>
};

// Make the component available to other parts of the app
export default Header;

I've also tried to import header like this (but it didn't help):

import { Header } from './src/components/header';

I would really appreciate any help to solve this issue. Thanks in advance :)

P.S I'm using React-Native version 0.49.1

dorash
  • 183
  • 1
  • 3
  • 9

2 Answers2

2

So I figured it up, the problem was that I registered App twice:

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

Once in index.js and the second time in App.android.js. I solved the error by removing the registration from index.js.

Thanks for the helpers anyway :)

dorash
  • 183
  • 1
  • 3
  • 9
0

Change this form : 

import { Header } from './src/components/header';

to : 

import  Header  from './src/components/header';

In index.js change : 

import App from './App';

to 

import App from './App.android';

Hope this will help.

Bhagwat K
  • 2,982
  • 2
  • 23
  • 33