diff --git a/syng-im/src/syng_im/android/core.cljs b/syng-im/src/syng_im/android/core.cljs index 04481430fb..1cbd1d64a7 100644 --- a/syng-im/src/syng_im/android/core.cljs +++ b/syng-im/src/syng_im/android/core.cljs @@ -2,31 +2,11 @@ (:require [reagent.core :as r :refer [atom]] [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.handlers] - [syng-im.subs])) + [syng-im.subs] + [syng-im.components.app-root :refer [app-root]] + [syng-im.components.react :refer [view text image touchable-highlight]] + [syng-im.components.react :refer [app-registry]])) -(set! js/React (js/require "react-native")) - -(def app-registry (.-AppRegistry js/React)) -(def text (r/adapt-react-class (.-Text js/React))) -(def view (r/adapt-react-class (.-View js/React))) -(def image (r/adapt-react-class (.-Image js/React))) -(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React))) - -(def logo-img (js/require "./images/cljs.png")) - -(defn alert [title] - (.alert (.-Alert js/React) 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 [] (dispatch-sync [:initialize-db]) diff --git a/syng-im/src/syng_im/components/app_root.cljs b/syng-im/src/syng_im/components/app_root.cljs new file mode 100644 index 0000000000..ad9da7d24b --- /dev/null +++ b/syng-im/src/syng_im/components/app_root.cljs @@ -0,0 +1,21 @@ +(ns syng-im.components.app-root + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view text image touchable-highlight]])) + + +(def logo-img (js/require "./images/cljs.png")) + +(defn alert [title] + (.alert (.-Alert js/React) 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"]]]))) + diff --git a/syng-im/src/syng_im/components/react.cljs b/syng-im/src/syng_im/components/react.cljs new file mode 100644 index 0000000000..ac65dc7a4c --- /dev/null +++ b/syng-im/src/syng_im/components/react.cljs @@ -0,0 +1,11 @@ +(ns syng-im.components.react + (:require [reagent.core :as r])) + +(set! js/React (js/require "react-native")) + +(def app-registry (.-AppRegistry js/React)) +(def navigator (r/adapt-react-class (.-Navigator js/React))) +(def text (r/adapt-react-class (.-Text js/React))) +(def view (r/adapt-react-class (.-View js/React))) +(def image (r/adapt-react-class (.-Image js/React))) +(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React))) \ No newline at end of file