React Native + Metro: Build Android / iOS with custom scripts

Question

Premises

To allow for multi environment builds, the following Android flavors were set:

productFlavors {
  development {
    resValue "string", "app_name", "AppName Dev"
    applicationId "com.org.nativeapp.development"
  }
  staging {
    resValue "string", "app_name", "AppName Stag"
    applicationId "com.org.nativeapp.staging"
  }
  production {
    resValue "string", "app_name", "AppName"
  }
}

On package.json, we could then build the app over different environments through the following scripts:

"android": "react-native run-android --mode=developmentDebug --appIdSuffix=development",
"android:prod": "react-native run-android --mode=productionDebug",
"android:stag": "react-native run-android --mode=stagingDebug --appIdSuffix=staging",

Introduction to the Problem

After upgrading a React Native project from 0.67.5 to latest (currently 0.71.3), when running metro through npx react-native start, we now have the possibility to build Android and iOS by simply pressing a key, as shown below:

Problem

Now, being able to directly build from the Metro process is very handy. But because those commands are (presumably) only running react-native run-android and react-native run-ios, those builds fail as, because of the multi environments setup, it'd need to run react-native run-android --mode=developmentDebug --appIdSuffix=development instead.

Conclusion

1. Is there a way to modify the scripts that are run when building through the Metro session? If not,
2. Is there a way to simply attach flags to those default commands, so to be able to build a specific Android flavor while on Metro?

Extra: Out of curiosity, on top of the default commands on the Metro session (r - reload the app, d - open developer menu, i - run on iOS, a - run on Android), would it be possible to add some other custom script?

Any comment on this is deeply appreciated - Thanks a ton in advance!

Answer 1

Update: This is fixed on rn-cli dev mainline branch and should be available on the next release v11.4.0++

Update: A PR addressing this is up in RN CLI -> https://github.com/react-native-community/cli/pull/1937

I opened a feature request on the RN CLI to track this issue: https://github.com/react-native-community/cli/issues/1872

The answer to both of your questions would be no. Unfortunately, there is currently(as of the time of posting) no way of changing what commands metro executes when on watch mode since the options are hardcoded. The RN CLI's https://github.com/react-native-community/cli/blob/main/docs/projects.md configuration allows adding new commands but not changing the watchMode ones. And trying to override the default ones by adding them to the configuration just causes both the default and your replacement to be executed. The commands are defined by the react-native CLI metro plugin and are nonconfigurable. As seen in the code for the watchMode function: https://github.com/react-native-community/cli/blob/86df104250608977130378b9b59d8a9e12d0212a/packages/cli-plugin-metro/src/commands/start/watchMode.ts

At this point IMO there are at least 3 possible ways (that I can think of ATM) you could work around this:

• Submit an issue with the react-native-community and wait/hope for a fix from the community
• Upstream a fix yourself to react-native-community repo
• Fork, modify, and maintain your own fork of the RN CLI to achieve your desired outcome

Answer 2

Recently I added support for this inside React Native CLI, and it will land soon! So if you would like to change parameters passed to run-android or run-ios command when launching from terminal just pass watchModeCommandParams in react-native.config.js:

module.exports = {
  project: {
    ios: {
      watchModeCommandParams: ['--mode', 'Release'],
    },
    android: {
      watchModeCommandParams: ['--mode', 'Release'],
    },
  },
};