Using shadow-cljs to compile React Native for iOS on GNU/Linux

Intro

In the previous post I described how to set up and run an IOS simulator on Linux using a VirtualBox with MacOS image.

We used Re-Natal as a cli tool to bootstrap the application.

In this post we will look into using shadow-cljs to compile a vanilla react-native codebase. I find this combo to give a much lighter and snappier workflow, there is also a huge advantage in being closer to the react-native and npm ecosystem.


integration checkbox

Before we begin please make sure you have the following tools set up:

  • on the host platform:
  • node and yarn
  • VirtualBox with MacOS image
  • samba server sharing the project folder
  • on the guest platform
  • socat
  • XCode

You can find all the instructions in this post.


Example project

I have created a very basic skeleton project which uses shadow-cljs to compile clojurescript into JavaScript output which in turn react-native can turn into native mobile code. You can find the source code here.

Clone the project and make sure it is shared with the guest machine.

On the host machine

Lets start by installing all the dependencised. Go into the projects folder and install them:

yarn deps

Next start the shadow-cljs watcher:

yarn app:watch

Once it is done compiling in a separate terminal window start the react-native packager (Metro):

yarn app:packager

It will occupy port 8081.

On the guest machine

Go to the guest machine running inside a VBox and use socat to start forwarding the port occupied by the Metro Bundler:

socat tcp-listen:8081,reuseaddr,fork tcp:192.168.1.3:8081

Now open the project in XCode and press Build and Run. Once it’s running use special +d to open developer menu on the simulator and make sure Live Reloading and Hot Reloading are both disabled:

_config.yml

If you edit the code on the host the changes are immediately reflected in the simulator running on the guest machine:

_config.yml

REPL

To connect a repl to the running project you can simply use M+x cider-connect in Emacs. Choose localhost and select the port, thi swil connect you to the clj REPL, from which you can get a cljs REPL with:

(shadow.cljs.devtools.api/nrepl-select :app)

Thanks for reading!

Written on July 11, 2019