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 Re         


        

Answer 1

In iOS AppDelegate.m change this

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

to

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

Answer 2

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

Answer 3

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>
        );
    }
}