How to use index.js instead of (index.ios.js, index.android.js) in React Native for cross-platform app?

Question

Thanks for the answers from now,

I am a newbie in React Native, I want to make a cross-platform app so I created index.js:

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

class ReactApp extends Component {

    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}

module.exports = ReactApp;

Then I imported index.js from both index.ios.js and index.android.js like this:

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

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

I think after this it should work but I get this error:

Your image is not working. Also, you didn't state what you were trying to accomplish by doing this. — Michael Cheng
– Michael Cheng, Commented Jun 28, 2017 at 13:30
@MichaelCheng image is working I think cause I tried on my phone also, I want to make a cross-platform app — davut dev
– davut dev, Commented Jun 28, 2017 at 13:36
replace first line in index.js with this and try import React, {Component} from 'react'; — Ravi Panchal
– Ravi Panchal, Commented Jun 28, 2017 at 14:01

Floris M · Accepted Answer · 2017-11-27 10:48:54Z

43

After React v0.49, you don't need index.ios.js and index.android.js. You only need the index.js:

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

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

(replace appMobile with the name of your app)

Source: (https://github.com/facebook/react-native/releases/tag/v0.49.0)

New projects have a single entry-point (index.js) from now on

edited Nov 27, 2017 at 10:48

answered Oct 31, 2017 at 9:58

Floris M

1,81420 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Wilfredo P Over a year ago

That was about I was looking for, because I've worked with other version (older) and I saw the 2 different files, but from 0.49 you will get one file after create the app.

Thomas Kekeisen Over a year ago

If you want to upgrade your RN version check facebook.github.io/react-native/docs/upgrading.html (react-native-git-upgrade should work like a charme)

pstanton Over a year ago

is it possible to still use 2 files with new react-native?

Floris M Over a year ago

I don't think so

Nike Kov Over a year ago

The issue explaining something: github.com/facebook/react-native/issues/…

|

Michael Cheng · Accepted Answer · 2017-06-28 14:31:43Z

7

You're going about this backwards. index.ios.js and index.android.js will always be separate entry points in a default react-native init project. If you want to have them run the same codebase via index.js, you should set it up so index.ios.js and index.android.js import index.js and registers the same base component as defined in index.js.

For example, you can look at how it's done in this example ToDo app (Github repo here).

If you place index.js in your root folder, it will conflict with index.android.js and index.ios.js when you don't reference it directly. So you will need to point to the exact path in your import. See the code below.

index.ios.js and index.android.js (same contents)

import React from 'react';
import { AppRegistry } from 'react-native'
import ReactApp from './index.js'
// Had you placed index.js in another folder like `./app`, you could instead do your import with this shorthand:
// import ReactApp from './app'

AppRegistry.registerComponent('ReactApp', () => ReactApp)

index.js

// Note: I noticed that you imported Component from the wrong place. That might also be contributing to your issue so I fixed it here.
import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';

// Unless you are exporting multiple things from a single file, you should just use this.
// It's more idiomatic than using module.exports = ReactApp;
export default class ReactApp extends Component {
    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}

edited Jun 28, 2017 at 14:31

answered Jun 28, 2017 at 13:57

Michael Cheng

10.7k6 gold badges54 silver badges52 bronze badges

2 Comments

davut dev Over a year ago

I copied and pasted your code but I am getting the same error :-/ ,

Michael Cheng Over a year ago

@davutdev Try it now with the edits. I missed the React import since I put the answer together really quickly. You still need that in all three files. Also, realized that the shorthand ./index import will have a naming conflict if you place index.js in the same directory as other files starting with index.something. Had you used another filename or placed it elsewhere, that wouldn't have been an issue. I added comments to explain it in the answer. I also tested this in a brand new project just now so if there are any errors still, it must be from something else.

FOLOF · Accepted Answer · 2018-09-27 09:36:41Z

6

In iOS AppDelegate.m change this

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

to

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

answered Sep 27, 2018 at 9:36

FOLOF

1914 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to use index.js instead of (index.ios.js, index.android.js) in React Native for cross-platform app?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related