React-native-navigation: V2: Cannot find entry file index.android.js

[larryranches]

Issue Description

Using RNN V2 and RN 0.54.4 on a brand new React Native project, I get the error of Cannot find entry file index.android.js.

I was able to fix the error by adding a index.android.js file with the RNN app launch code and all is working fine. It seems in the build.gradle file, its set to use the proper index.js root file

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

but it's still looking for a index.android.js at the root of the RN project.

Is this supposed to be a pre-requisite step for v2 that should be in the docs for Android, or is it a bug?

Steps to Reproduce / Code Snippets / Screenshots

react-native run-android

---

Environment

• React Native Navigation version: 2.0.2237
• React Native version: 0.54.4
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator/Debug

[guyca]

New react native apps are created with a single index file, therefore we officially support single index file. You're welcome to PR instructions to the docs regarding usage of index.android and index.ios

[larryranches]

@guyca Thanks for your response.

V2 seems to support ios with the single index file but not Android. The error I mentioned above is very telling in the fact that it's looking for a index.android.js file in the RN project root that isn't there with a brand new project using a <= 0.50 RN version. When I add the index.android.js file with the launcher code, It works fine.

Your saying that v2 officially supports a single index file but in Android the error is saying otherwise so this is probably a bug.

If not, I'll happily submit a PR for the V2 documentation stating that you need to create a index.android.js in the root with the app launch code.

[richchurcher]

I'm noticing this too: despite

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

in MainApplication.java, the expected bundle location appears to be index.android.js.

[richchurcher]

To be clear, the bundling error is:

error: bundling failed: Error
    at DependencyGraph.getAbsolutePath (/home/basie/hylo/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:316:11)
    at /home/basie/hylo/mobile/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:280:416
    at Generator.next (<anonymous>)
    at step (/home/basie/hylo/mobile/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:445)
    at /home/basie/hylo/mobile/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:605
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 BUNDLE  [android, dev] ./index.android.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

[guyca]

I'm adding this to the 2.0 milestone but would appreciate a PR as I can't address this ATM

[viotti]

This is what I had to do in order to use index.js on Android.

Edit android/app/src/main/java/com/yourproject/MainApplication.java.

package com.yourproject; // Update package name here.

import java.util.ArrayList;
import java.util.List;

import android.support.annotation.Nullable;

import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationPackage;
import com.reactnativenavigation.react.ReactGateway;
import com.oblador.vectoricons.VectorIconsPackage;
import com.kishanjvaghela.cardview.RNCardViewPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import com.github.wuxudong.rncharts.MPAndroidChartPackage;
import com.learnium.RNDeviceInfo.RNDeviceInfo;

public class MainApplication extends NavigationApplication {
  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  @Override
  protected ReactGateway createReactGateway() {
    return new ReactGateway(this, isDebug(),
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          List<ReactPackage> packages = new ArrayList<>();

          packages.add(new MainReactPackage());
          packages.add(new NavigationPackage(this));

          // Replace those.
          // packages.add(new VectorIconsPackage());
          // packages.add(new RNCardViewPackage());
          // packages.add(new LinearGradientPackage());
          // packages.add(new RNDeviceInfo());
          // packages.add(new MPAndroidChartPackage());

          return packages;
        }

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

  @Nullable
  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return null;
  }
}

Override getPackages with the packages you use. Take care not to remove the main react package and the navigation package, respectively,new MainReactPackage() and new NavigationPackage(this)

Also, in android/app/build.gradle update the entryFile option.

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

[gabrielvcbessa]

Will they fix it?

[guyca]

Hey guys, instead of overriding createReactNativeGateway you can now simply override createReactNativeHost() in MainApplication, then override getJSMainModuleName()

    @Override
    protected ReactNativeHost createReactNativeHost() {
        return new NavigationReactNativeHost(this) {
            @Override
            protected String getJSMainModuleName() {
                return "index";
            }
        };
    }

Here I'm returning RNN's ReactNativeHost, but you can return your own implementation.

[viotti]

Thanks @guyca. Just tried and it works and my MainApplication code is now simpler.

[ducpt2]

+1
React Native: 0.55.4
RNN: 2.0.2292

I try all solution above but can not get it work.

[yomybaby]

@ducpt2
I use same same versions (RN 0.55.4 and RNN alpha (2.0.2292)).
@guyca 's solution make it works.

Don't forget to import NavigationReactNativeHost.

...
...
import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationReactNativeHost;
...
public class MainApplication extends NavigationApplication {
  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return Arrays.<ReactPackage>asList(
            // eg. new VectorIconsPackage()
    );
  }

  @Override
  protected ReactNativeHost createReactNativeHost() {
    return new NavigationReactNativeHost(this) {
      @Override
      protected String getJSMainModuleName() {
        return "index";
      }
    };
  }
}

[eduardomoroni]

Should we document this as part of installing section?

[javadoffuad]

@yomybaby Thank you! Now no error. But white screen.)
I try this too (2.0.2292).

android v7
react-native: 55.4
react-native-navigation: 2.0.2295

[eduardomoroni]

@javadoffuad have you followed the step to register screens?
This is a working example if you're planning use redux:
https://github.com/eduardomoroni/react-native-boilerplate/tree/master/src/presentation/navigation

[javadoffuad]

@eduardomoroni Thank you!

The problem was that I did not create a register screens.

[ujwal-setlur]

Please document this. The official docs seem to be out of date.

[sutefan1]

I tried the solution of @yomybaby, but I always get the error: "method does not override or implement a method from a supertype" and both @overrride are red underlined:
public List<ReactPackage> createAdditionalReactPackages() {...}
and
protected ReactNativeHost createReactNativeHost() {...}

This is my setup (package.json):
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-navigation": "v2.0.1937"

Any suggestions?

[eduardomoroni]

@papsti7 could you double-check your implementations against THIS?

[sutefan1]

@eduardomoroni Your example code doesn't work either, because of 2 reasons:

• Same Override problem as mentioned about

• NavigationReactNativeHost constructor needs isDebug as seconds parameter, which is a boolean.

Are there differences in the minor versions?

[sutefan1]

I just updated and relinked everything with version 2.0.2295 and then the implementation of @eduardomoroni works. I had a closer look at the implementation of NavigationApplication.java and recognised changes in there that makes the overrides in the MainApplication.java possible.

There should be an update of the docs, because the current instructions don't work out for older versions. Maybe state the exact version which works with that instructions!

[eduardomoroni]

@papsti7 it's an open source community, could you update docs and help other people to don't follow the same pitfall?

[nvthuong]

Hey guys, Flow by @yomybaby and do not forget to add "new MainReactPackage()" inside in the function createAdditionalReactPackages
Like this:

@Override
public List createAdditionalReactPackages() {
return Arrays.asList(
new MainReactPackage()
);
}

Thanks @yomybaby , @viotti for your support, It's work fine now.

[DavidNorena]

RNNN V2 For any of you guys interested in codepush configuration:

import javax.annotation.Nullable;

@Override
protected ReactNativeHost createReactNativeHost() {
    return new NavigationReactNativeHost(this) {
        @Nullable
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

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

[terreb]

@DavidNorena, thank you! The solution should be added to https://github.com/Microsoft/react-native-code-push/blob/master/docs/setup-android.md.

[DavidNorena]

glad you solved your problem and found my solution working for you !