A thin ClojureScript wrapper around the React Native API
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Natal Shell

A thin ClojureScript wrapper around the React Native API

Dan Motzenbecker, MIT License @dcmotz

Clojars Project

Natal Shell is a simple convenience wrapper around the React Native API, offering a simple Clojure-ready interface out of the box.

It is designed as a companion library to Natal (a command line utility for quickly bootstrapping React Native projects in ClojureScript), but can be used completely independently.


Natal Shell exposes React components as macros which you can require like so:

(ns future-app.core
  (:require [om.core :as om])
  (:require-macros [natal-shell.components :refer [view text switch image slider-ios]]))

Use them like this:

(text {:style {:color "teal"}} "Well isn't this nice.")

You can pass children as the trailing arguments or as a collection:

    (map #(text nil %) ["un" "deux" "trois"])
    (repeat (switch {:style {:margin 20}})))))

All component names are normalized in Clojure's snake-case, for example:

;; Using SegmentedControlIOS
(segmented-control-ios {:values ["Emerald" "Sapphire" "Gold"]})

The same rule applies to API methods.

APIs are divided into separate Clojure namespaces like so:

(ns future-app.actions
  (:require-macros [natal-shell.components :refer [text]]
                   [natal-shell.alert-ios :refer [alert prompt]]
                   [natal-shell.push-notification-ios :refer [present-local-notification]]))

(text {:onPress #(alert "Hello from CLJS")} "press me")


One deviation from the React Native docs is that the DataSource constructor is not a property of the ListView component constructor and exists in its own module:

[natal-shell.data-source :refer [data-source clone-with-rows]]

Error Feedback

Natal Shell provides a simple macro called with-error-view that you can wrap around the body of your component's render to get visible feedback when an error is thrown:

(defui HomeView
  (render [_]
        (this-non-existent-function-will-throw "and render the error screen")))))

A red screen with a stack trace will be shown, making it easier to realize where something's gone awry.


Natal Shell is automatically generated from scraping the React Native docs via the script in scripts/scraper.clj.

Future areas of improvement may include optionally omitted prop arguments and automatic conversion of snake-case keys in maps.