Build react native apps for ios in a vm.md

Build react native apps for ios in a vm.md

Build react native apps for ios in a vm

This guide attempts to explain how to run Macos in a virtual machine to enable building React native apps for iOS using Quickemu.

Although the process will only be explained in Ubuntu, the same steps can be reproduced in other os following the installation guide

The specific use case here is an existing React Native application prebuild using expo, so the ios folder is created with the xcode project files to be compiled, but once in macos it can be used as a "normal" mac.

Contents:

1. Install quickemu and create VM
2. Macos dev environment setup
3. Setup project
4. Done
5. Errors

Install quickemu and create VM

In ubuntu add ppa and install from apt:

sudo apt-add-repository ppa:flexiondotorg/quickemu
sudo apt update
sudo apt install quickemu

Install spice

To enable copy/paste is required to install the spice client. Install SPICE guest agent.

sudo apt install spice-vdagent

Start the agent

sudo systemctl start spice-vdagent

Options. Enable the service to start automatically at boot

sudo systemctl enable spice-vdagent

Check the SPICE Agent Status:

sudo systemctl status spice-vdagent

Setup vm

Follow the guide "Create macOS virtual machines" to create the vm, download the recovery image, setup the hdd and install the os.

Once the virtual machine is created a folder, containing the VM's files, and a .conf file will be created with the name {os}-{version}.

These are some additional options that can be added to the configuration file. It is recommended to add the ram option because it comes with 4G out of the box which is barely enough.

cpu_cores="4" - Specify the number of CPU cores allocated to the VM
ram="8G" - Specify the amount of RAM to allocate to the VM
disk_size="16G" - Specify the size of the virtual disk allocated to the VM

More configurations options can be found in the section Connecting to your VM and Tuning CPU cores, RAM & disks

Run

The vm can be launch with the command:

quickemu --vm {os}-{version}.conf --display spice

To enable copy/pase run with --display spice. This requires the spice client

Macos dev environment setup

To be able to compile React native applications in macos we'll need to install:

• Xcode
• Cocoapods
• Homebew
• Nvm, node and Yarn
• Git

Xcode

Downloads are avalable in Apple's developers page or throw the store.

It's necessary to login with a developer account.

Cocoapods

sudo gem install drb -v 2.0.6
sudo gem install activesupport -v 6.1.7.7
sudo gem install cocoapods -v 1.15

Homebrew

Install Hombrew running the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

If for any reason that fails, there are alternative methods avalable in Homebrew's installation page

Nvm, Node and Yarn

brew install nvm
nvm install v18.20.2
nvm alias default v18.20.2
node install -g yarn

Git

brew install git

Activate arm64 mode (Only in M1)

env /usr/bin/arch -arm64 /bin/bash --login
chsh -s /bin/zsh

Setup project

Clone repository and cd into it.

1. Reload node dependencies (if necessary)

rm -rf node_modules
rm yarn.lock
yarn install

2. Clear and install pods

cd ios
rm -rf Pods
rm Podfile.lock
pod cache clean --all
pod install --repo-update

3. Install pods and run expo

cd ../
yarn ios  

Done!

If everything went right, the simulator will open and another terminal with react native running will popup.

Errors

Most likely, everything did not went right, so this are some error I encounter:

Could not get the simulator list from Xcode

Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Error: Command failed: xcrun simctl list --json devices

The simulator is not running. Open Xcode, go to developer tools / simulator

PhaseScriptExecution [CP-User]\ Generate\ Specs

The following build commands failed: PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/macdev/Library/Developer/Xcode/DerivedData/powermind-hjowaszrqktkzadejmkwnxwcbwua/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-46EB2E00021AC0.sh (in target 'FBReactNativeSpec' from project 'Pods')

• Check node path: which node
• Check the correct version of node is install: node -v
• Verify node path in ios/.xcode.env.local

Reinstal dependencies

1. Delete node_module and yarn.lock and reinstall with yarn install
2. cd into ios folder and delete Pods folder and Podfile.lock
3. Delete pod cache with pod cache clean --all
4. Reinstall pods with pod install --repo-update
5. cd back into the root of the project and run yarn ios