React-native: Unable to modify existing RN project to use single index.js entry point (both iOS and Android)

[sunweiyang]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13
Node: 8.6.0
Yarn: 1.2.0
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.3 => 0.49.3

Steps to Reproduce

(Write your steps here:)

1. Have an existing React Native 0.48 project
2. Upgrade to React Native 0.49.3
3. Rename index.android.js to index.js, and delete index.ios.js
4. Use jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"]; in AppDelegate.m

Expected Behavior

My expectation was that RN 0.49.* would know to use index.js as the entry point, but the packager and output suggested that it was still trying to use the old entry points (i.e. index.android.js).

Actual Behavior

The packager showed this output, suggesting that it was using old entry points:

Bundling `index.android.js`  [development, non-minified]  0.0% (0/1), failed.
error: bundling failed: Error
    at DependencyGraph._getAbsolutePath (/Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/node-haste/DependencyGraph.js:305:11)
    at DependencyGraph.getDependencies (/Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/node-haste/DependencyGraph.js:283:4236)
    at Resolver.getDependencies (/Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/Resolver/index.js:129:5)
    at /Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/Bundler/index.js:642:39
    at Generator.next (<anonymous>)
    at step (/Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/Bundler/index.js:13:1336)
    at /Users/sunw/Skale/Repos/skale-react-native/Skale/node_modules/metro-bundler/src/Bundler/index.js:13:1496
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Screenshots (Android and iOS, respectively):

[393197906]

I have the same problem

[duailibe]

I had the same problem, which was fixed by deleting the ios/build/ and android/app/build/ folders

[sunweiyang]

Unfortunately @duailibe, the issue persists even after deleting ios/build/ and android/app/build/.

[achuvm]

I'm pretty sure this could've been done prior to the defaulting to only 1 index.js file

For Android, go to your Module: app's build.gradle and add the following above the line: apply from: "../../node_modules/react-native/react.gradle"

project.ext.react = [
    entryFile: "index.js"
]

In MainApplication.java, you need to override another function in the anonymous ReactNativeHost class by adding this:

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }

For iOS, go to your AppDelegate.m and change "index.ios" to "index" in this line:

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

Depending on how old your project is, you might have a Build Phases Script that looks like this:

export NODE_BINARY=node

../node_modules/react-native/scripts/react-native-xcode.sh ../index.ios.js

In that case, you can remove the argument ../index.ios.js or simply rename it to index.js

These changes were tested with a new RN 47.2 project that I upgraded to RN 49.3 with a single index.js file. These instructions were also used to upgrade a RN 47.2 project w/ our Viro platform to a RN 49.3 project with a single index.js file too.

Hope that helps!

edit1: left out another android fix
edit2: added possibly additional iOS changes

[AishwaryaSurana]

@achuvm This helped when I run app through react-native run-ios but when I try through XCode this is not helping as well.

[achuvm]

Hi @AishwaryaSurana,

That's interesting, maybe take a look at my updated answer for iOS, there's possibly another thing you have to change to run from Xcode. Although I was under the impression react-native run-ios would essentially build the Xcode project.

[sunweiyang]

Thanks @achuvm, your edited comment worked great for me!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.