Skip to content

Instantly share code, notes, and snippets.

@nha

nha/README.md

Forked from mfikes/README.md
Created April 8, 2018 09:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nha/343275044acdc215310dbdb010f9584a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nha/343275044acdc215310dbdb010f9584a to your computer and use it in GitHub Desktop.
Download ZIP
Keywords in ClojureScript React Native Hiccup
Raw
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.

Raw
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)))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment