Intro

In the previous post I described how to set-up and run an iOS simulator on Linux, using a VirtualBox with and 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 clojurescript codebase targeting React Native. I find this combo to give a much lighter and snappier workflow, there is also a huge advantage in being closer to the react and npm ecosystem.

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

Integration Checkbox

• 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 app which uses shadow-cljs to compile ClojureScript into JavaScript output, which then React Native turns into a native mobile code. You can find the full source code here.

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

git clone git@github.com:fbielejec/shadow-cljs-react-native.git

On the host machine

Lets start by installing all the dependencies:

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:

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

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, this will connect you to the clj REPL, from which you can get the cljs REPL with:

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

Thanks for reading!