Running Your React Native App on a Physical iPhone on a Virtual Machine (VirtualBox & VMWare)
For one reason or the other, be it convenience (to continue using a workstation), financial or pure choice; you have decided to develop IOS apps on a non-mac machine or on a virtual machine on your Mac(for whatever reason).
DISCLAIMER : It is illegal to develop or run Apple software on non-Apple hardware, this tutorial is strictly for educational purposes.
VirtualBox and VMWare have come to the rescue for the most part, but you may still have issues running your app on a physical iPhone, so I created this tutorial.
Hot Reloading/Fast Refresh may not work on an iPhone because your guest virtual Mac(Hackintosh) may not be on the same network as your iPhone. Most Hackintoshes aren’t compatible with the Network Drivers on your host system, therefore there is no Wi-Fi on the guest Mac.
The internet connectivity on the guest mac would be through a virtual ethernet network(Brigded) from the host system(NAT), which your iPhone cannot connect to.
Could not connect to development server.
Ensure the following:
Node server is running and available on the same network — run ‘npm start’ from react-native root
- Node server URL is correctly set in AppDelegate
-Wifi is enabled and connected to the same network as the Node Server
THE SOLUTION
For issues running the app on simulator, skip to step 8.
I assume your device is already recognized by your guest Mac and Xcode, if not, follow this tutorial.
STEP 1
On your iPhone, while it is plugged in, go to settings, then Mobile Data.
STEP 2
Switch on Mobile Data and Click on Personal Hotspot.
STEP 3
Click on Allow Others to join, then Personal Hotspot comes on.
STEP 4
Open System Preferences and click on Network.
STEP 5
Click on the “+” sign to add a new network.
STEP 6
A dialog box will appear, where you click on the dropdown then select “iPhone USB”. Next, click on “Create” then click on “Apply”.
STEP 7
Once the device is connected successfully, it will look like what’s in the rectangle to the left. If successfully connected, take note of the IP address, we’ll use this later on. In my case it’s:
172.20.10.2
STEP 8
Open up Xcode again and edit your AppDelegate.m file. It would be found in the explorer pane at the left hand side. Within the folder named after the project.
Scroll to the bottom and replace
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@”index” fallbackResource:nil]
with
return [NSURL URLWithString:@”http://”Your IP address from before”:”Port the server is running on”/index.bundle?platform=ios&dev=true&minify=false"];
FOR A SIMULATOR, REPLACE WITH
return [NSURL URLWithString:@”http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false"];
in my case;
return [NSURL URLWithString:@”http://172.20.10.2:8081/index.bundle?platform=ios&dev=true&minify=false"];
It should look similar to what I have below.
STEP 9
Go to Product on the Menu bar and then Clean the build folder.
STEP 10
Run your build (Hit the play Button). Ensure that your physical device is selected and that the previous builds have been deleted from your device.
And that’s it!!!
The app should now run on your iPhone. If it doesn't work and the development server is running, try reloading the app by:
- Shaking the device and selecting reload.
- Going to the running terminal and pressing “r” to reload.
