Skip to content
An example project to get you started with React Native using shadow-cljs in 3 minutes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
etc
externs
src/main
.gitignore Initial commit Mar 11, 2019
.watchmanconfig Initial commit Mar 11, 2019
README.md
app.json
babel.config.js
package.json Add more instructions Mar 11, 2019
rn-rf-shadow.png
shadow-cljs.edn
yarn.lock

README.md

React Native using shadow-cljs in 3 minutes

The fastest way a ClojureScript coder can get started with React Native. Prove me wrong.

This is an example project using: shadow-cljs, React Native, Expo, Reagent, and re-frame.

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:

Command line

$ 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.

Using Calva

Open the project and some cljs or edn file. Then:

  1. In a Terminal pane, execute npm install -g expo-cli, then yarn and wait for it to finish.
  2. Start build task Watch CLJS and wait for it to build the project.
  3. Start build task Start Expo and wait for it to fire up Expo in your browser.
    1. Start the app on your phone or in a simulator.
    2. 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.)
  4. Connect Calva to the shadow-cljs app (ctrl+alt+v c) and choose to connect the :app build.

Production builds

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

  1. Kill the watch and expo tasks.
  2. Execute shadow-cljs release app
  3. Start the expo task (as per above)
    1. Enable Production mode.
    2. 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)

The :app build will create an app/index.js. In release mode that is the only file needed. In dev mode the app directory will contain many more .js files.

: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 .js files.

reagent.core loads 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.

You can’t perform that action at this time.