https://github.com/dmotz/natal-shell

A thin ClojureScript wrapper around the React Native API
https://github.com/dmotz/natal-shell

clojure clojurescript react react-native

Last synced: 4 days ago
JSON representation

A thin ClojureScript wrapper around the React Native API

• Host: GitHub
• URL: https://github.com/dmotz/natal-shell
• Owner: dmotz
• License: mit
• Created: 2015-11-16T04:59:12.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-03-26T01:33:07.000Z (over 5 years ago)
• Last Synced: 2024-10-08T03:41:13.473Z (28 days ago)
• Topics: clojure, clojurescript, react, react-native
• Language: Clojure
• Homepage:
• Size: 40 KB
• Stars: 39
• Watchers: 6
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Natal Shell

### A thin ClojureScript wrapper around the React Native API

[Dan Motzenbecker](http://oxism.com), MIT License

[@dcmotz](https://twitter.com/dcmotz)

[![Clojars Project](http://clojars.org/natal-shell/latest-version.svg)](http://clojars.org/natal-shell)

---

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](https://github.com/dmotz/natal)

(a command line utility for quickly bootstrapping React Native projects in

ClojureScript), but can be used completely independently.

## Usage

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

```clojure

(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:

```clojure

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

```

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

```clojure

(view

  nil

  (interleave

    (map #(text nil %) ["un" "deux" "trois"])

    (repeat (switch {:style {:margin 20}})))))

```

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

```clojure

;; 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:

```clojure

(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")

```

#### `ListView.DataSource`

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:

```clojure

[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:

```clojure

(defui HomeView

  Object

  (render [_]

    (with-error-view

      (view

        nil

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

## Coda

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.