Change entry file path of android and ios in react-native project

Question

After starting a new project with react-native init awesomeProject, i try to restructure my project, putting index.ios.js and index.android.ios inside a common folder named src.

When i execute react-native run-android, i get the following error:

Where i have to change to react-native search for entry files in the right path?

Answer 1

Thanks for Michael's info! I did the case for iOS and make the answer complete for both Android and iOS.

As the same as Android, the answers for development and production are different.

1. For Development (debug mode)

   go to AppDelegate.m

   set parameter jsBundleURLForBundleRoot as the path of entry file and moduleName as the component you registered in RN js. For example, if I want to change the entry js file to js/screen/LoginScreen.js and the component to LoginScreen, do the following:

   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
       jsBundleURLForBundleRoot:@"js/screen/LoginScreen"
       fallbackResource:nil];
   rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                
       moduleName:@"LoginScreen"
       initialProperties:nil                                            
       launchOptions:launchOptions];
   

2. For Production (release mode)

for production mode, Xcode generates a jsbundle file while building. Besides what we did for debug mode, we need to tell Xcode the entry file of jsbundle.

go to the "Build Phases" tab of current target. in the "Bundle React Native code and images" phase, append your entry file to end of the shell

Info about how to run development/produc mode on iOS here

Answer 2

I've used the following steps on react-native 0.35

For development you need to open a file

MyProject/android/app/src/main/java/com/MyProject/MainApplication.java

and override a method of ReactNativeHost called getJSMainModuleName:

package com.MyProject;

// ...

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    // ...

    // ADD THE LINES BELOW

    @Override
    protected String getJSMainModuleName() {
      return "src/index.android";
    }

    // ADD THE LINES ABOVE

  };

  // ...
}

This way the app will know where to fetch the module from a packager server.

For production, when you build your APK using cd android && ./gradlew assembleRelease you'll have to modify a file

MyProject/android/app/build.gradle

and add custom build options, make sure to place them before apply from: "../../node_modules/react-native/react.gradle" line:

apply plugin: "com.android.application"

import com.android.build.OutputFile

// ...

// ADD THE LINES BELOW

project.ext.react = [
    // the entry file for bundle generation
    entryFile: "src/index.android.js",
]

// ADD THE LINES ABOVE

// ...

apply from: "../../node_modules/react-native/react.gradle"

Unfortunately I don't have iOS setup right now, I can't help you with that yet.