Question 32935 in React native Question posted in
The official React Native documentation can be found here.

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

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:

enter image description here

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!

Tags:

2

Answers


  1. 0

    by the using of scripts,you can able to solve this problem,like this

    • In your React Native project, create a folder called "scripts".

    • Create two files in the "scripts" folder called "build-android.sh"
      and "build-ios.sh".

    • Create your Android build commands in "build-android.sh".

    • Add your custom build commands to "build-ios.sh".

    • To make both files executable, run the commands chmod +x
      scripts/build-android.sh and chmod +x scripts/build-ios.sh.

    • Add the following scripts to package.json:

      "scripts": {
      "android": "cd scripts && ./build-android.sh",
      "ios": "cd scripts && ./build-ios.sh"
      }

    • Build your Android app using npm run android.

    • Build your iOS app with npm run ios.

    try this maybe its helpful for you

    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search