React-Native IOS real device does not connect to Metro server

Viewed 10346

My Simulator works fine it connects to the development server first try. But on my real device I have to delete node modules, reinstall Podfiles, clean building folder and delete Derived Data then it loads a bunch of time in Xcode and finally connects to dev server. But after I stop it and I want to run it again it wont connect. I used to able to just run npm start and launch my app on my phone and it connected automatically, and I could make changes, it refreshed and everything, but now even with Xcode running it doesn't work 10/9 times.

And yes I'm on the same network with my phone as the computer. I tried to set my mac's IP on Bundle Settings on the phone, no success.

Anyone got any idea?

9 Answers

Have the same problems. These are my steps to 'fix' this:

  • Ensure that you don't have ethernet internet cable plugged in. Only wifi network (iPhone and Mac has to be on the same wifi network)! I think that this was the main problem in my situation.
  • Turn off the metro, the app usually starts (because the native app build contains also js build).
  • Then run the metro again.
  • Shake your device and Configure Bundler with your Mac's IP
  • it seams that only resave of this screen helps - so you don't have to spend time with finding and entering the IP
  • Then it should connect to your metro

I spent hours trying all possible fixes...

Another hints:

For me it was the XCode build which was targeted for Release, not Debug.

Simply navigate Product > Scheme > Edit Scheme and change the Build Configuration to Debug.

Once the app is launched shake the device to enter the dev menu, click configure bundler and put the IP address of the machine running metro. Mine was set to default localhost. There is also a metro.config.js that I think you can set this up to use a spec.

If you're on a mac the local IP address can be found in system pref -> network -> WIFI

The only thing the predictably works for me is connecting with the mac to the iphone's hotspot.

Not ideal, but nothing else worked for me ‍♀️

I'm on m1 in case it matters

For me it was enough to remove node_modules folder

rm -rf node_modules

Then I have run

npm install; 
npm start -- --reset-cache;

And reinstalled pods

cd ios; rm -rf Podfile.lock Pods; pod --repo-update install; cd ..;

As a rule of thumb whenever running an app on iOS device, or even a simulator I've used before I uninstall the app before running again.

Unsure if you had a previous version in this instance but worth a shot in the dark.

I find running via Xcode rather than react-native run-ios is more consistent also.

Turn off/on wi-fi on device / on mac, rebuild app

What worked for me after trying everything I could, was creating a file main.jsbundle inside the ios folder, adding to the XCode project and target the file with the application using the Target Membership section (in XCode)

On iOS 16 the real device can't connect on metro bundler. To verify this, open safari and enter your mac's IP, eg. 192.168.1.10:8081 (8081 is the bundler port), if the page won't load then there's a network issue.

Solution: Untick the Disable unless needed checkbox under Mac network settings: enter image description here

This will put the iOS device in hotspot mode but the mac will continue using the WiFi connection for internet browsing. Don't know what kind of sorcery this is but it works.

Related