seantempesta / cljs-react-navigation Goto Github PK

(s/fdef screen
        :args (s/cat :component :react/component 
                            :options :react-navigation/navigationOptions)
        :ret #(ric/react-class? %))

(ns my-app.router
  (:require [my-app.screens :refer [sign-in-screen second-screen ]]
            [cljs-react-navigation.re-frame :refer [stack-navigator
                                                    stack-screen]]))

(def MyStack (stack-navigator
                          {:sign-in
                           {:screen (stack-screen sign-in-screen
                                                  {:title "1"})}
                           :second
                           {:screen (stack-screen second-screen
                                                  {:headerTitle "2"})}}))

(ns my-app.screens
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [my-app.handlers]
            [my-app.ui :refer [text view image text-input
                               dimensions gifted-chat alert
                               flat-list activity-indicator
                               touchable-highlight]]
            [my-app.subs]))

(defn sign-in-screen [{:keys [navigation screenProps] :as props}]
  (let [{:keys [navigate]} navigation
        state (r/atom {:username ""})
        get-text #(-> % .-nativeEvent .-text)
        on-input-change (fn [value]
                          (swap! state assoc :username (get-text value)))
        on-press (fn []
                   (navigate "second"))]
    (fn [props]
      [container
       [view {:width "70%"
              :flex-direction "column"
              :align-items "center"}
        [text-input {:style {:height 40
                             :width "100%"}
                     :placeholder "Enter username"
                     :borderWidth 1
                     :margin-bottom 20
                     :textAlign "center"
                     :value (:username @state)
                     :on-change on-input-change}]
        [touchable-highlight {:on-press on-press}
         [text "Go"]]]])))

(defn second-screen [{:keys [navigation] :as props}]
  (fn [props]
    [container [view [text "hello"]]]))

(ns my-app.db)


(defonce default-routes (clj->js {:index 0
                                  :routes [{:key "1"
                                            :routeName "sign-in"}
                                           {:key "2"
                                            :routeName "second"}]}))
;; initial state of app-db
(defonce app-db {:greeting "Hello Clojurescript in Expo!"
                 :routing default-routes})

// Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });