react-native link causes duplicate imports in Android settings.gradle

Question

For some reason when I call react-native link, it adds duplicate includes to android/settings.gradle which in turn adds duplicate imports to android/app/src/main/com/<projectName>/MainApplication.java.

It hasn't always done this. It started doing it when I added a specific package manually because something wasn't working, but I don't remember which one.

My hunch is that react-native link assumes that packages listed in some order--it looks like reverse alphabetical--but as the npm package name doesn't necessarily match the include project name in settings.gradle which doesn't match the import name in MainApplication.java, I'm having a hard time figuring out how to reorder them in settings.gradle in order to stop this behavior. Or it could be something else entirely.

package.json

{
  // ...
  "dependencies": {
    "events": "^1.1.1",
    "flux": "^3.1.2",
    "react": "~15.4.1",
    "react-native": "0.42.0",
    "react-native-datepicker": "^1.4.4",
    "react-native-fs": "^2.1.0-rc.1",
    "react-native-navigation": "^1.0.30",
    "react-native-push-notification": "^2.2.1",
    "react-native-sound": "^0.9.1",
    "react-native-vector-icons": "^4.0.0",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "react-test-renderer": "~15.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Here's what the files should be...

android/settings.gradle

rootProject.name = // <projectName>
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-sound'
project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app')
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')

include ':app'

android/app/src/main/com/[projectName]/MainApplication.java

package // com.<projectName>;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.zmxv.RNSound.RNSoundPackage;
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import com.reactnativenavigation.RnnPackage;
import com.rnfs.RNFSPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new VectorIconsPackage(),
            new RNSoundPackage(),
            new ReactNativePushNotificationPackage(),
            new RnnPackage(),
            new RNFSPackage(),
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

After I run react-native link, the files change to:

android/settings.gradle

rootProject.name = // <projectName>
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-sound'
project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app')
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-sound'
project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app')
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')

include ':app'

android/app/src/main/com/[projectName]/MainApplication.java

// ...
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.zmxv.RNSound.RNSoundPackage;
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import com.reactnativenavigation.RnnPackage;
import com.rnfs.RNFSPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.zmxv.RNSound.RNSoundPackage;
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import com.reactnativenavigation.RnnPackage;
import com.rnfs.RNFSPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new VectorIconsPackage(),
            new RNSoundPackage(),
            new ReactNativePushNotificationPackage(),
            new RnnPackage(),
            new RNFSPackage(),
            new VectorIconsPackage(),
            new RNSoundPackage(),
            new ReactNativePushNotificationPackage(),
            new RnnPackage(),
            new RNFSPackage(),
      );
    }
  };

// ...

If I run react-native-link again, it adds a third copy of the packages.

Does anyone have any insight into how react-native link works?

Answer 1

This is a known bug on React Native. There's currently a PR pending for this bug: https://github.com/facebook/react-native/pull/18131

Update: The bug has been fixed!

To address this issue, you'll just have to manually comb through your dependencies whenever you run react-native-link. I find it's helpful to have a clean git status before running it, then going over the changed files afterwards with git diff afterwards.