Building Mobile Apps (iOS and Android) with Clojurescript
- Re-Natal is a utility for setting up ClojureScript based React Native projects. If you have some prior experience with react native, I am sure you are aware of
create-react-native-appcommand-line tool. Re-Natal does the same thing.
- Reagent enables us to write react components as Clojure functions. It uses Hiccup-like markup instead of React’s sort-of HTML.
- Figwheel provides stateful hot reloads for faster feedback during development.
Setting up a new project using Re-Natal is easy and straight forward. Let’s first install Re-Natal using the following command
npm install -g re-natal
Once we have installed re-natal, we can initialize a new project
re-natal init <AppName>
By default, re-natal uses Reagent as the React wrapper but that is not the only option. You can specify a different wrapper like Om or Rum using the following command
re-natal init <AppName> -i [om-next | reagent6 | rum]
Now that we have a dummy project, let’s get it running.
I would only be covering running the project on an android emulator. Getting this running on iOS should be pretty straight forward.
- Inside your application folder run
- Now inside the android folder create a new file
local.propertieswith the location of your Android SDK
sdk.dir = /Users/<USERNAME>/Library/Android/sdk
3. Run your android emulator using the following command
cd /Users/USERNAME/Library/Android/sdk/emulator && ./emulator @<EMULATOR_NAME>// If you are unaware of the emulators, you can find that usingemulator -list-avds
4. Now let’s install the app on the emulator using
npm run run-android
Voila! We now have an Android Application created with React Native written in Clojurescript !
Now let’s change the background color of the button and the text shown when we press the button.
Let’s re-install the app using
npm run run-android.
Even after changing the code and reinstalling our application everything looks the same.
Although we have made changes to our
cljfile, one thing we still haven’t done is rebuild our code to update
index.android.js, the file which is actually loaded by the bundler.
This is where figwheel comes into the picture. Without it, you need to manually rebuild and install the application every time you make some changes to your code. If you check
project.clj you will notice this is exactly what happens in the
prod profile. There is no figwheel, and every time you build the project it updates the
lein with-profile prod cljsbuild auto
However, this is a really slow feedback cycle during development. Therefore we have a separate
dev profile that uses figwheel. To start using figwheel run the following commands (Make sure your emulator is running beforehand)
1. re-natal use-android-device avd
2. re-natal use-figwheel
3. lein figwheel android
4. npm run run-android
Now you can make changes to your code and see the result in realtime!
That’s about it! Thank you for reading, and I hope you enjoyed the article. In the next part let’s build an application from scratch!