How to rename react-native entry file (index.ios.js)

Question

When I init a react-native project, index.ios.js is created as project entry file.

Can I change this file's name and if so, how?

Answer 1

When you start a react-native app you'll see this message output by the React Packager:

Running packager on port 8081

and then:

Looking for JS files in
   /Users/gbirman/gil/mapily 


React packager ready.

By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:

 http://localhost:8081/index.ios.bundle

If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:

 http://localhost:8081/foo.bundle

You can confirm this by opening that url in your browser.

Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:

 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js

Answer 2

Suppose you've moved your index.ios.js into a folder called dist. You need to do two things

1. For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.

2. For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:

   export NODE_BINARY=node ../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js

   react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.

   Updated Build Phases Example

   Reference - react-native/scripts/react-native-xcode.sh