React Native + expo with shadow-cljs

#1

react-native has been on my todo-list for quite a while. I did a couple experiments with it in the past but never quite finished the “official” support since I don’t do any real react-native development myself. Several people have asked if shadow-cljs supports react-native and I only had a very unsatisfying answer which involved fiddling with :npm-module and some manual .js files.

I now have something that should work in most cases and requires minimal setup. I created 2 sample demos using a basic app setup created by expo init hello-world. One is using fulcro and the other reagent. Both use the same setup of creating an app/index.js which will be used as the entry point for expo (via app.json entryPoint).

Both just render something really basic via their :init-fn test.app/init. The intent for this :init-fn is to call a function which will only ever be called once. In the case of expo it is expected to register a root component on startup which is done via the shadow.expo/render-root helper. You don’t have to use this as it doesn’t have anything to do with the build support itself. You can do the setup completely yourself as long as the :init-fn ends up registering a root component.

Both setups support the REPL and live-reload (which will repeatedly call test.app/start).

A release will build only produce the app/index.js. During development the app directory will contain a lot of other files which are all setup in a way so that metro can process them. While this is not strictly necessary it was the easiest to setup and doesn’t require “hacking” around metro.

npm modules can just be used via npm install the-thing and (:require ["the-thing" :as x]) as usual with shadow-cljs. shadow-cljs doesn’t actually do any processing of the JS itself since metro will take care of this. Unfortunately that means that the externs inference shadow-cljs usually does is not quite as good and may require adding some manual externs. The externs/app.txt in the demos shows how that can be done via the simplified externs method.

I plan on documenting this all a bit better and fix whatever issues people may run into. I did test the basic dev stuff and release build compile but since I don’t know how to actually deploy an expo app there may be stuff missing.

Please reach out of you want to help test and move this out of the “experimental” stage.

21 Likes
#2

Thanks for this! I have an upcoming mobile for which I will enjoy trying this code. :slight_smile:

2 Likes
#3

Can confirm that as thheller says … this JUST works.

3 Likes
#4

Indeed. It is super duper sweet stuff!

1 Like