React Native 0.63 running on device by other port solution

by JackLee

React Native Metro bundler is runs on port 8081. And very unlucky my working machine is running a McAfee antivirus with the port 8081.

On React Native official sites there are provide two solution Terminating a process on port 8081 or Using a port other than 8081 .

Will the first solution Terminating a process is not work, even is work this is not a good solution since you will terminal you Anti virus protection on you machine. But when running McAfee antivirus the kill -9 <PID> command is not work.

Seconds solution using a port other than 8081 this is more better solution . But there are something unclear if you run on x-code their are still have the 8081 port on use error. And i can't find the node_modules/react-native/React/React.xcodeproj/project.pbxproj file to change the 8081.

After try and error finally found a solution.

For iOS Device

0) Start React Native Metro with port 8070

npx react-native start --port=8070

1) Open reactnativelearning.xcworkspace on project ios folder

2) Search and change 8081 on workspace replace 8081 to 8070 below is the files need to change

  • RCTBridgeDelegate.h
  • RTCDefines.h
  • RCTInspectorDevServerHelper.mm
  • RCTDevMenu.mm

3) Go to Signing & Capabilities On project target and test target Update you own developer detail Signing on Team > xxx(company)

4)Go to Build Phases Select "Start Packager"

Change the Shell script 8081 to 8070

5) Click run on x-code and launch apps on device

You apps should running on connected iOS device now.

6) Open apps and shake open React Native developer menu. Click "Reload" on first launch this will enable the Fast Refresh function if not the Fast Refresh will not working.

Command to debug on simulator

npx react-native run-ios --port 8070

Command to debug on Device

npx react-native run-ios --device "MyiPhoneDevice" --port 8070

For Android Device

Android is more easy than iOS, Just need change the port on command and reverse the tcp port.

0) Start React Native Metro with port 8070

npx react-native start --port=8070

1) Open an Existing Project > go to react native project > android folder

2) Reverse the tcp port by below command

adb reverse tcp:8081 tcp:8070

3) Build on Android Studio

You apps should working good on android device with Fast Refresh.

Command to debug on emulator

npx react-native run-android --port 8070

Command to debug on specific connect device

npx react-native run-android --deviceId=11AA22A3C --port 8070

You can find deviceId with below command

adb devices

Dependencies version

react 16.13.1

react-native 0.63.3

Developer IDE version

Xcode 12.0.1

Android Studio Version 4.1

Mobile device operating system

Android 11

iOS 14.0.1