use natal-shell in om next template

resources/om-next.cljs

@@ -2,21 +2,14 @@
 (set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
 
 (ns $PROJECT_NAME_HYPHENATED$.core
-  (:require [om.next :as om :refer-macros [defui]]))
+  (:require [om.next :as om :refer-macros [defui]])
+  (:require-macros [natal-shell.components :refer [view text image touchable-highlight]]
+                   [natal-shell.alert-ios :refer [alert]]))
 
 ;; Reset js/React back as the form above loads in a different React
 (set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
 
 
-;; Set up some methods to help create React Native elements
-(defn view [opts & children]
-  (apply js/React.createElement js/React.View (clj->js opts) children))
-
-(defn text [opts & children]
-  (apply js/React.createElement js/React.Text (clj->js opts) children))
-
-
-;; Set up our Om UI
 (defonce app-state (atom {:app/msg "Welcome to $PROJECT_NAME$"}))
 
 (defui WidgetComponent
@@ -25,9 +18,19 @@
          '[:app/msg])
   Object
   (render [this]
-          (let [{:keys [app/msg]} (om/props this)]
-            (view {:style {:flexDirection "column" :margin 40}}
-                  (text {:style {:fontSize 50 :fontWeight "100"}} msg)))))
+    (let [{:keys [app/msg]} (om/props this)]
+      (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
+        (text
+          {:style {:fontSize 50 :fontWeight "100" :marginBottom 20 :textAlign "center"}}
+          msg)
+
+        (image {:source {:uri "https://raw.githubusercontent.com/cljsinfo/logo.cljs/master/cljs.png"}
+                :style {:width 80 :height 80 :marginBottom 30}})
+
+        (touchable-highlight
+          {:style {:backgroundColor "#999" :padding 10 :borderRadius 5}
+           :onPress #(alert "HELLO!")}
+          (text {:style {:color "white" :textAlign "center" :fontWeight "bold"}} "press me"))))))
 
 ;; om.next parser
 (defmulti read om/dispatch)