React Native using shadow-cljs in 3 minutes
The fastest way a ClojureScript coder can get started with React Native. Prove me wrong.
Here follows instructiomn for getting started either using the command line or Calva, assuming you have stuff like XCode, or whatever is the Android equivalents, installed:
$ npm install -g expo-cli $ yarn $ shadow-cljs watch app # wait for first compile to finish or expo gets confused $ yarn start
Then use your editor of choice to hook up the REPL and such.
Open the project and some
edn file. Then:
- In a Terminal pane, execute
npm install -g expo-cli, then
yarnand wait for it to finish.
- Start build task Watch CLJS and wait for it to build the project.
- Start build task Start Expo and wait for it to fire up Expo in your browser.
- Start the app on your phone or in a simulator.
- In the Expo settings for your app (shake or force touch with two fingers), disable Live Reloadinhg and Hot Reloading. (Don't worry, shadow-cljs will take care of that for you.)
- Connect Calva to the shadow-cljs app (
ctrl+alt+v c) and choose to connect the
A production build invloves first asking shadow-cljs to build a relase, then to ask Expo to work in Production Mode.
NB: Currently there's a bug in the metro bundler that causes release builds to fail in Production Mode. This project includes a way to patch it (nicked from here). Patch by executing:
patch node_modules/metro/src/JSTransformer/worker.js ./etc/metro-bundler.patch
- Kill the watch and expo tasks.
shadow-cljs release app
- Start the expo task (as per above)
- Enable Production mode.
- Start the app.
If you get complaints about Module HMRClient is not a registered callable module*, you probably have Hot reloading enabled. Disable it and try again.
Some notes from Thomas Heller
(This project is built from this example of his: https://github.com/thheller/reagent-expo)
:app build will create an
release mode that is the only file needed. In dev mode the
app directory will contain many more
:init-fn is called after all files are loaded and in the case of
expo must render something synchronously as it will otherwise complain about a missing root component. The
shadow.expo/render-root takes care of registration and setup.
You should disable the
expo live reload stuff and let
shadow-cljs handle that instead as they will otherwise interfere with each other.
Source maps don't seem to work properly.
metro propably doesn't read input source maps when converting sources as things are correctly mapped to the source .js files but not their sources.
Initial load in dev is quite slow since
metro processes the generated
reagent.dom which will load
react-dom which we don't have or need. Including the
src/main/reagent/dom.cljs to create an empty shell. Copied from re-natal.