How to develop React Native iOS Apps In Windows with Hackintosh (well, sort of)
Hello Medium! So this is my first story, but I would like to get straight into the game.
I’m kinda frustrated I’m required a physical Mac and iPhone to do iOS React Native development.
I mean, I have MacBook and iPhone, I do have it. And I had to share my repo to my MacBook then run my React Native Builder and React Native Packager, which is kinda verbose and lame. Boo.
Besides, I want to work in a workstation😂, I have a Xeon workstation and it’s sad I had to say goodbye to my keyboard and mouse and hence goodbye to productivity.
Even Xamarin offered a remote iOS Simulator and build agent so we could enjoy developing on our main PC and then push the build on our remote Mac environment. And I doubt the RN team would have the breeze to make that happen.
So I squeezed some of my brain power and finally came out of a solution, which is very, very wacky, crazy and lazy. And here’s the points I’ve thought of:
The Good 1: It works universally, in any x86_64 bit PCs with Virtualization enabled, given you have followed the steps clearly.
The Good 2: You can dispose the environment easily. You can also clone an environment and move it somewhere else.
The Bad 1: It, Just, Works!
The Bad 2: I Don’t recommend you to run any other Mac programs beyond XCode.
The Bad 3: Don’t expect AMD CPUs to run much over this.
The Ugly 1: You need a very beefy, monstrous PC for that, to get merely a fraction of performance on a real Mac.
The Ugly 2: No hardware acceleration, so don’t expect to run and debug OpenGL ES context with it.
If you’re a real man, get a Mac. Otherwise now we’ll discover the journey to Hack-in-to-sh!
(Warning: Practicing Hackintosh is a violation of EULA of both Apple Software and Hardware, and you may face charges and lawsuits, despite the fact no one has been in the past 10 years but a company do, yet we aren’t limited to do anything with our computer, including installing various operating systems, so brace yourself and decide if you’d like to continue stepping on a legal grey zone)
Prerequisite
As I’ve mentioned before, you actually need a very strong and powerful PC! I have a Xeon workstation, but it barely runs well, imagine what kind of nightmare it was to get it hustling, eh?
Also, you need a SSD, unless you have the patience to wait more than 5 minutes to get into your Mac VM with your HDD.
Wait a minute! VM. Hmm…Virtual machine? You’ve guessed it ain’t ya? That’s right, we’ll need VMWare for this.
Step 1: Fetch the Mac installation image
Well, without this we wouldn’t be able to do anything…
If you have a friend that has a Mac, borrow his or her machine…
Download macOS Sierra from App Store…
Go online and find the ritual to rip that installation image into portable DMG/ISO form.
I wouldn’t disclose such method, cause I don’t wanna get no troubles~¯\_(ツ)_/¯
Transfer the final DMG/ISO file to your main PC. Of course we’ll need it, or how do we…
Step 2: Download VMWare Player
Unless you have VMWare Workstation, which most of us don’t, then we will have to proceed downloading VMWare Player.
Just install it. Should be no problems at all.
Step 3: Download Unlocker
Alright, this is our first hack.
Basically, VMWare locked the essential options preventing OSX and EFI running and cooperating together(hardcode, serial, SMB, etc.) running on any virtual machine instances on all VMWare hypervisor but VMWare Fusion.
So we will have to ‘unlock’ it by patching a few things in order to get Hackintosh working.
After downloading the files by clicking ‘Clone or download’, unzip it, find the files named ‘win-install.cmd’ and ‘win-update-tools.cmd’.
Right click ‘win-install.cmd’ and select ‘Run as Administrator’, same goes ‘win-update-tools.cmd’. This is required to gain access to the Windows Registry and stop VMWare services in order to perform patching.
Step 4: Create a New Virtual Machine
Open up your VMWare Player and just right in the menu select Create a New Virtual Machine.
Then select the installer disc image file you’ve just transferred before.
Then we’ll need to select ‘Apple Mac OS X’ and pick the appropriate version. Here for example, I’m using macOS Sierra, so it was ‘macOS 10.12', if you’re using El Capitan or Yosemite, get the right version.
Go pass all that options. Remember to configure your VM, I changed the core counts, but most of the time it was OK for the mass.
Step 5: Modding the .vmx file
We’ll have to go around the limitation imposed by VMWare I have mentioned in Step 3. We will have to add an entry to the virtual machine configuration file. Or you will face a core dump during the launching of the VM.
By default, it’s located in ‘~/Documents/Virtual Machine/<Insert your VM Name>/<Insert your VM Name>.vmx’ if you haven’t changed the location.
Open it and add the following text in the very end of the file:
smc.version = “0”
Step 6: Start Me Up
Whew, what a hard work here. Now it’s time to get the installation working.
There should be no problems at all. You should be able to see the fancy Apple Logo.
And the language selection screen.
Select the language of your own. Then we’ll have to click Utilities->Disk Utility. Format the virtual disk to HFS.
See the video of doing so: https://puu.sh/w46Pj/a5a7f8ff5d.webm
Then we could proceed to install it. Usually, it takes about 20 minutes-ish to do it. During the long-lasting wait, prepare and grab yourself a cup coffee and wait till the end. An automatic reboot is scheduled after the end, and you shall see the welcome screen.
See in action: https://puu.sh/w46Pw/519687fc0d.webm
Step 7: Set Me Up
Finish it up like you usually do with a new Mac. Don’t enable location service and don’t sign into Apple ID yet though. Don’t send no data to Apple as well as to increase the concealment of our Hackintosh setup.
We’ll have to install VMWare Tools as well. Unmount your OSX Base System drive in the finder. Then click Player->Manage->Install VMWare Tools. By installing this you gain a huge boost in performance, but still barely runs in our eyes.
See this: https://puu.sh/w4a2m/314480bc99.webm
Congratulations! You have a fully functional Hackintosh virtual machine in your hand now! We’ll now shift to the developer section…
We’re about to setup some essential software on our Hackintosh side…
We’ll need…
Brew. Of course. For the NodeJS and NPM and React Native.
Yarn to speed up our package install time unless you use share it like I do.
Xcode to compile React Native Host.
Step 1:Install Xcode
You’re required an Apple ID for this, no not the developer one, ordinary one is fine.
See the videos:
https://puu.sh/w4b8y/665e3fa868.webm
https://puu.sh/w4b8t/07ceee8b38.webm
Wait until it finishes. Shouldn’t take too long, you have a NAT wired Internet access. Would you like to play out Safari or some other apps? (Despite horrible performance)
Step 2: Install Brew and Node (and Yarn and RN)
Click on the link above to get the command first.
Well, this one should be easy. Given you have installed VMWare Tools, the clipboard is bi-directional by default, so you could copy it in your Windows side and dump it into Mac side.
Open up the terminal and paste the command given by Brew. Enter your password to allow the installation. All will be automated and should be in less than 10 minutes.
Take this as an example: https://puu.sh/w4atb/acbf000b84.webm
(Press WinKey+Space to open up Spotlight search, Press WinKey+V to paste)
Installing Node and NPM:
$ brew install nodejshttps://puu.sh/w4aOv/f6b6e35234.webm
Installing Yarn:
$ brew install yarnhttps://puu.sh/w4aOb/0eb124b1d5.webm
Install RN:
$ npm -g install react-native-clihttps://puu.sh/w4aSC/5524d0705b.webm
Step 3: Get on your project
For time being, I have not copied my original repo, but I have created a new RN project instead. If you moved your project you have everything set up perfectly.
You have two ways of running your project; Method 1: Go to your project folder, click ios, open the xcodeproj, click on the run button in the Xcode IDE; Method 2: Go to your project folder in terminal, enter ‘react-native run-ios’, and poof, it’s done.
Final step: Run simulator
Success! It’s running perfectly! Yay!
You could try to enable hot reload, modify some code and see if it changes.
After that, everything should be working like a charm!
I haven’t tried to run ’em on physical devices, but in theory you just need USB passthrough, and Xcode or iTunes should be able to recognize your devices.
So let alone the legality in between, I think this Hackintosh is a pretty fancy hack to get iOS developement in Windows without buying an overpriced Mac Pro/MacBook Pro.
Some may even install an actual Hackintosh distrubution into bare metal hardware like into those ultrabooks, Dell XPS 15 or ZenBook, that way the same thing can be achieved, but it’s more dangerous and you lost your Windows environment (unless you have dual boot enabled — Most of us don’t).
I look forward to seeing RN team release a new toolkit for Mac/Windows devs to get a better development experience while still using the most comfortable tools of our own. They say it’s an interesting idea and awaits PR.
I doubt this is my answer to this. Anyway, thank you for reading this article (more like a tutorial). There sure be someway easier, if you have the generosity to share your idea, please do so in the comment section, I look forward to see your reaction. Have a nice day with my hacks!
(Edited in 13/1)
Greetings! I guess it has been a long time since I wrote this. Now, I have discovered a whole new world regarding developing mobile apps in a Hackintosh VM. Thanks to the recent advancement of React Native and by exploiting Expo and host-only connection, we can have a even sweeter development environment so you can finally have your choice of IDE and bundle server hosted in Windows.
This is going to override Step 3 in the tutorial I mentioned above. I’m also going to introduce you one more trick to make the VM fully immersive to iOS development.
Basically, you just need CRNA and the latest version of Expo/React Native (speaking of 0.52 in the time of writing), that’s it. If you have an existing app bootstrapped under CRNA, it might work flawlessly as well.
It’s very simple. (I assume you will use Yarn, should be similar for NPM) Start your CRNA packager in Windows, using PowerShell or CMD:
Windows $ yarn run start
...
To view your app with live reloading, point the Expo app to this QR code.
You'll find the QR scanner on the Projects tab of the app.
<QR code>
Or enter this address in the Expo app's search bar:exp://<REDACTED>:19000Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.Logs from serving your app will appear here. Press Ctrl+C at any time to stop.› Press a to open Android device or emulator.
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)
This is going to be the port we are using.
Then, try and find your host address. (Different machine have different IP, YMMV)
OSXVM $ ifconfig
...
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
options=b<RXCSUM,TXCSUM,VLAN_HWTAGGING>
ether 00:0c:29:a1:d7:8e
inet6 fe80::cfe:e149:421e:601a%en0 prefixlen 64 secured scopeid 0x4
inet 192.168.67.128 netmask 0xffffff00 broadcast 192.168.67.255
nd6 options=201<PERFORMNUD,DAD>
media: autoselect (1000baseT <full-duplex>)
status: activeFor me, this is the host address. But you need to discard the last byte and append 1.
So the host IP here is 192.168.67.1. Take a note of it first.
Then, we will activate the secret sauce made by the Apple engineers.
Starting from XCode 9, by creating a simple directory in the root of your Mac HD, you can gain access to the internal menu of the iOS Simulator. Older versions don’t have this feature AFAIK.
Close all of your simulators first. Then simply type this in your terminal.
OSXVM $ sudo mkdir /AppleInternal(Your Password)
That’s it! Now check if the internal menu is present by starting up a simulator and look for this:
Actually, this is universal to real Macs as well! For the information of this internal menu, check this Medium article out. But we are more focused on the full screen mode, which is actually the reason you could bring your XCode along with the simulator in a new virtual desktop:
If you had any of the permission problem, well, particularly High Sierra users, you will need to create this folder in Recovery Mode. Just click Utility and Terminal, but you will need to relocate your Main Mac HD, it will work out as well.
Now, we will proceed to install Expo Client on (any one of the) simulator environment.
This step is very trivial so I recommend you to read this from Expo official document instead:
Once you got the Expo app installed, open it up in the Simulator.
Then, click the ‘Plus’ and type in your host address, but first, we’ll need to format it to what expo could recognize:
The format is:
exp://<Host IP address>:<Host port>So for me that is: “exp://192.168.67.1:19000”
Click open, and if you sees the bundle being built in the Windows Dev PC side, then CONGRATULATIONS, you’ll be able to get yourself the app simulator environment. However, HMR is not on, but is Live Reload, by default. If you need that, Go Hardware->Shake Gesture and change it.
The last step is to activate the full-screen mode to make it more immersive. Should clicking an item in the Internal Menu easy and trivial for you, then just click the green fullscreen button.
https://giant.gfycat.com/AncientPepperyAdamsstaghornedbeetle.mp4
And that’s it! You can even have Genymotion work alongside! This is a very big boost to the productivity!
That’s the end of the update. Hope you are happy in the journey! Expo is indeed a powerful tool and we need to cherish it. There ain’t no such thing as a free lunch. Please consider donations to the Expo project. They are eager in money to maintain the project and pay their (build) server! (Sadly they offered no method of doing this yet)
And please, Apple, do not tell your attorney to contact me and get me into the legal troubles. 🤣