package com.reactnativenavigation does not exist

Question

I am a beginner in react native. Right now I am trying to integrate https://wix.github.io/react-native-navigation/#/ library to my react-native application. for now, I am targeting only the Android platform.

I have performed all the steps that are mentioned in the documentation but when I tried to run on an application using react-native run-android it gives me the below error.

error: package com.reactnativenavigation does not exist

I understand the meaning of error it is saying that this package doesn't exist in my project but this package I installed from npm and it exists in the node module.

I am using the latest version of Nodejs and npm and below is the package.json dependency.

 "dependencies": {
    "react": "16.8.3",
    "react-native": "^0.59.6",
    "react-native-navigation": "^2.18.2",
    "react-native-vector-icons": "^6.4.2",
    "react-redux": "^7.0.2",
    "redux": "^4.0.1"
},
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "babel-jest": "^24.7.1",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
},

Full Error:

E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainActivity.java:19: error: package com.reactnativenavigation does not exist
import com.reactnativenavigation.NavigationActivity;
                                ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainActivity.java:21: error: cannot find symbol
public class MainActivity extends NavigationActivity {
                                  ^
  symbol: class NavigationActivity
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:12: error: package com.reactnativenavigation does not exist
import com.reactnativenavigation.NavigationApplication;
                                ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:13: error: package com.reactnativenavigation.react does not exist
import com.reactnativenavigation.react.NavigationReactNativeHost;
                                      ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:14: error: package com.reactnativenavigation.react does not exist
import com.reactnativenavigation.react.ReactGateway;
                                      ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:20: error: cannot find symbol
public class MainApplication extends NavigationApplication {
                                     ^
  symbol: class NavigationApplication
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:54: error: cannot find symbol
    protected ReactGateway createReactGateway() {
              ^
  symbol:   class ReactGateway
  location: class MainApplication
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:53: error: method does not override or implement a method from a supertype
  @Override
  ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:55: error: cannot find symbol
        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
                                   ^
  symbol:   class NavigationReactNativeHost
  location: class MainApplication
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:56: error: method does not override or implement a method from a supertype
            @Override
            ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:61: error: cannot find symbol
        return new ReactGateway(this, isDebug(), host);
                   ^
  symbol:   class ReactGateway
  location: class MainApplication
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:64: error: method does not override or implement a method from a supertype
    @Override
    ^
E:\data\code\practise\react-native\reactNativeStart\android\app\src\main\java\com\reactnativestart\MainApplication.java:77: error: method does not override or implement a method from a supertype
    @Override
    ^
13 errors

Answer 1

I don't believe downgrading is a good solution. I had this issue, I am assuming you are still on React Native 60+ (0.61 in my case). I solved it by ignoring flavours to all previous versions except for RN 60. I believe it has something to do with plugins for all the versions listed in the if block being ignored.

So in your android/build.gradle have the code below down the bottom

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                variantFilter { variant ->
                    def names = variant.flavors*.name
                    if (
                            names.contains("reactNative51") ||
                            names.contains("reactNative55") ||
                            names.contains("reactNative56") ||
                            names.contains("reactNative57") ||
                            names.contains("reactNative57_5") 
                            // names.contains("reactNative60")
                    ) {
                        setIgnore(true)
                    }
                }
            }
        }
    }
}

You may run into an error after about unrecognised symbols in MainApplication.java where the doc is also providing the wrong information.

In your MainApplication.java below should be your MainApplication Method. I have changed the getPackages() method to RN's original method as in RN 60 the method that RNN uses has type errors

public class MainApplication extends NavigationApplication {

    @Override
    protected ReactGateway createReactGateway() {
        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
            @Override
            protected String getJSMainModuleName() {
                return "index";
            }
        };
        return new ReactGateway(this, isDebug(), host);
    }

    @Override
    public boolean isDebug() {
        return BuildConfig.DEBUG;
    }

    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      return packages;
    }

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