CODEWITHSUNDEEP
javascriptreact-nativecross-platform
Brandon
Brandon

Reputation: 1886

Using single entry file for react native app

I am attempting to use a single entry file for android and iOS in a React Native app.

I have followed a few tutorials and have ended up with the following:

index.js

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

export default class Main extends Component {
   render() {
      return (
        <Text>Hello world! from both IOS and Android</Text>
      );
   }
}

index.ios.js

import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';


AppRegistry.registerComponent('Main', () => Main);

I end up with the following error:

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

If I remove the curly braces from Main in the import statement it says '...but got: object' so I feel like it's something to do with my exporting/importing but nothing seems to work. Any help would be appreciated.

Upvotes: 1

Views: 838

Answers (2)

hyb175
hyb175

Reputation: 1291

React Native tries to import based on platform. For example, if you have index.ios.js and index.android.js in the same folder, React Native will bundle index.ios.js only if it is bundling for ios. It is possible that when you import from ./index, React Native is revolving the path with index.ios.js instead of index.js because you are bundling for ios.

If you are curious enough, you can try to console.log the content of the imported module, e.g. console.log(Main) to see what is actually getting imported.

Upvotes: 0

Marko Gresak
Marko Gresak

Reputation: 8197

You are exporting your Main component as:

export default class Main extends Component {

but importing as:

import {Main} from './index';

The default export should be imported as:

import Main from './index';

If you use default export, you must import like this. If this doesn't work, there must be another problem in your code.

Upvotes: 1

Related Questions