chore: allow for overriding metro server port (#20202)

This change will now allow for customizing the port number when running the metro server. The environment variable `RCT_METRO_PORT` can now be set when executing commands like `make run-ios`, `make run ios-device`, and `make run-android`. Though, it should be noted that `make clean` may need to be ran before attempting to set or change `RCT_METRO_PORT` since the react-native app will have statically built code that references the value of RCT_METRO_PORT from compile time and not runtime.

Makefile

@@ -436,10 +436,11 @@ android-clean: ##@prepare Clean Gradle state
 	rm -rf ~/.gradle
 
 
-android-ports: export FLOWSTORM_PORT := 7722
+android-ports: export FLOWSTORM_PORT ?= 7722
 android-ports: export TARGET := android-sdk
+android-ports: export RCT_METRO_PORT ?= 8081
 android-ports: ##@other Add proxies to Android Device/Simulator
-	adb reverse tcp:8081 tcp:8081 && \
+	adb reverse tcp:$(RCT_METRO_PORT) tcp:$(RCT_METRO_PORT) && \
 	adb reverse tcp:3449 tcp:3449 && \
 	adb reverse tcp:4567 tcp:4567 && \
 	adb reverse tcp:$(FLOWSTORM_PORT) tcp:$(FLOWSTORM_PORT) && \

nix/mobile/android/build.nix

@@ -17,6 +17,7 @@
   hermesEnabled ? lib.getEnvWithDefault "ORG_GRADLE_PROJECT_hermesEnabled" "true",
   buildUrl ? lib.getEnvWithDefault "ORG_GRADLE_PROJECT_buildUrl" null,
   statusGoSrcOverride ? lib.getEnvWithDefault "STATUS_GO_SRC_OVERRIDE" null,
+  reactMetroPort ? lib.getEnvWithDefault "RCT_METRO_PORT" 8081,
   # If APKs should be split based on architectures
   androidAbiSplit ? lib.getEnvWithDefault "ANDROID_ABI_SPLIT" "true",
   # Android architectures to build for
@@ -158,6 +159,7 @@ in stdenv.mkDerivation rec {
       --no-build-cache \
       --parallel \
       -Dmaven.repo.local='${deps.gradle}' \
+      -PreactNativeDevServerPort=${toString reactMetroPort} \
       assemble${gradleBuildType}
     '';
   in

scripts/check-metro-shadow-process.sh

@@ -6,7 +6,7 @@ if pgrep -f 'shadow-cljs watch mobile' > /dev/null; then
     exit 1
 fi
 
-if pgrep -f 'react-native start' > /dev/null; then
+if pgrep -f "react-native start --port=${RCT_METRO_PORT:-8081}" > /dev/null; then
     echo "Error: make run-metro is already running in another terminal" >&2
     echo "Please close that terminal before running this command." >&2
     exit 1

scripts/run-metro.sh

@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
 
-if pgrep -f 'react-native start' > /dev/null; then
+if pgrep -f "react-native start --port=${RCT_METRO_PORT:-8081}" > /dev/null; then
     echo "Info: metro is already running in another terminal"
 else
     echo "Info: starting a new metro terminal"
-    react-native start --reset-cache
+    react-native start --port=${RCT_METRO_PORT:-8081} --reset-cache
 fi

scripts/wait-for-metro-port.sh

@@ -4,7 +4,7 @@ set -euo pipefail
 TIMEOUT=10 # Metro should not take this long to start.
 
 while [ "${TIMEOUT}" -gt 0 ]; do
-  if ! lsof -i:8081 &> /dev/null; then
+  if ! lsof -i:"${RCT_METRO_PORT:-8081}" &> /dev/null; then
     echo "."
     sleep 1
     ((TIMEOUT--))