Skip to content

Instantly share code, notes, and snippets.

@seantempesta
Created April 11, 2016 16:52
Show Gist options
  • Save seantempesta/408def04c6371564f8f757b4fc3784cc to your computer and use it in GitHub Desktop.
Save seantempesta/408def04c6371564f8f757b4fc3784cc to your computer and use it in GitHub Desktop.
An example of using react-native-router-flux with reagent
(defstate ReactNativeRouterFlux :start (js/require "react-native-router-flux"))
(defstate TabBar :start (.-TabBar @ReactNativeRouterFlux))
(defstate Actions :start (.-Actions @ReactNativeRouterFlux))
(defstate Modal :start (.-Modal @ReactNativeRouterFlux))
(defstate Reducer :start (.-Reducer @ReactNativeRouterFlux))
(defstate router :start (r/adapt-react-class (.-Router @ReactNativeRouterFlux)))
(defstate scene :start (r/adapt-react-class (.-Scene @ReactNativeRouterFlux)))
(defn reducerCreate [params]
(let [defaultReducer (@Reducer params)]
(fn [state action]
(.log js/console "ACTION:" action)
(defaultReducer state action))))
(def core
(with-meta
(fn []
[@router {:createReducer reducerCreate}
[@scene {:key "modal"
:component @Modal}
[@scene {:key "root"
:hideNavBar true}
[@scene {:key "tabbar"
:tabs true
:default "tab-account"
:tabBarStyle {:backgroundColor gs/offWhite}}
[@scene {:key "tab-participants"
:tite "Participants"
:icon (r/reactify-component (tab-view/create-icon (:participantsIcon @tab-view/styles)))}
[@scene {:key "participants"
:hideNavBar true
:component (r/reactify-component participant-search/core)}]]
[@scene {:key "tab-account"
:initial true
:icon (r/reactify-component (tab-view/create-icon (:accountIcon @tab-view/styles)))}
[@scene {:key "account"
:component (r/reactify-component account/core)
:hideNavBar true}]]
[@scene {:key "tab-groups"
:icon (r/reactify-component (tab-view/create-icon (:groupsIcon @tab-view/styles)))}
[@scene {:key "groups"
:component (r/reactify-component groups-dashboard/core)
:hideNavBar true}]]]
[@scene {:key "login"
:title "Kidlink"
:type "replace"
:component (r/reactify-component login/core)
:initial true}]]]])
{:component-did-mount (fn [this]
(info "Router mounted"))
:component-will-unmount (fn [this]
(info "Router unmounted"))}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment