Keywords in ClojureScript React Native Hiccup

README.md

Instead of using vars in React Native Hiccup, it would be interesting to use keywords.

Consider the way things are currently done:

(def ReactNative (js/require "react-native"))
(def text (r/adapt-react-class (.-Text ReactNative)))

(defn greeting []
  [text "Hello"])

It would be nice to use :text instead:

(defn greeting []
  [:text "Hello"])

This might make it a little easer to treat and test views as data.

The namespace below shows an abuse of reagent.impl.template/tag-name-cache to achieve this via

(defn register-tag [k v]
  (gobj/set reagent.impl.template/tag-name-cache k v))

in the main namespace generated via re-natal. The revisions involve the register-tag function and its use, along with revising the Hiccup in app-root to use keywords.

core.cljs

(ns hiccup-tags.ios.core
  (:require [goog.object :as gobj]
            [reagent.core :as r :refer [atom]]
            [reagent.impl.template]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [hiccup-tags.events]
            [hiccup-tags.subs]))

(def ReactNative (js/require "react-native"))

(def app-registry (.-AppRegistry ReactNative))

(defn register-tag [k v]
  (gobj/set reagent.impl.template/tag-name-cache k v))

(def tag->class
  {:text                (.-Text ReactNative)
   :view                (.-View ReactNative)
   :image               (.-Image ReactNative)
   :touchable-highlight (.-TouchableHighlight ReactNative)})

(defn register-tags []
  (doseq [[kw c] tag->class]
    (register-tag (name kw) (r/adapt-react-class c))))

(def logo-img (js/require "./images/cljs.png"))

(defn alert [title]
      (.alert (.-Alert ReactNative) title))

(defn app-root []
  (let [greeting (subscribe [:get-greeting])]
    (fn []
      [:view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
       [:text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} @greeting]
       [:image {:source logo-img
               :style  {:width 80 :height 80 :margin-bottom 30}}]
       [:touchable-highlight {:style {:background-color "#999" :padding 10 :border-radius 5}
                             :on-press #(alert "HELLO!")}
        [:text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]])))

(defn init []
  (register-tags)
  (dispatch-sync [:initialize-db])
  (.registerComponent app-registry "HiccupTags" #(r/reactify-component app-root)))