I use Android sdk's emulator (not Genymotion) and my Android. Both don't show the menu that way.A̶n̶y̶w̶a̶y̶,̶ ̶a̶f̶t̶e̶r̶ ̶u̶s̶e̶ ̶i̶O̶s̶ ̶s̶i̶m̶u̶l̶a̶t̶o̶r̶ ̶t̶o̶ ̶d̶i̶s̶a̶b̶l̶e̶ ̶l̶i̶v̶e̶ ̶r̶e̶l̶o̶a̶d̶,̶ ̶I̶ ̶c̶a̶n̶ ̶s̶w̶i̶t̶c̶h̶ ̶b̶a̶c̶k̶ ̶t̶o̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶e̶m̶u̶l̶a̶t̶o̶r̶.̶ ̶H̶e̶n̶c̶e̶ ̶d̶i̶s̶a̶b̶l̶i̶n̶g̶ ̶l̶i̶v̶e̶ ̶r̶e̶l̶o̶a̶d̶ ̶h̶a̶p̶p̶e̶n̶e̶d̶ ̶i̶n̶ ̶s̶e̶r̶v̶e̶r̶ ̶s̶i̶d̶e̶,̶ ̶n̶o̶t̶ ̶t̶h̶e̶ ̶e̶x̶p̶o̶ ̶c̶l̶i̶e̶n̶t̶ ̶s̶i̶d̶e̶ ̶ => I was wrong about this

Hi all! I'm trying to use react-navigation, but I cannot make it work.. 😞 can anyone put a simple snippet as example? (possibly without re-frame ) thanks!

@manu there are probably better ways to use react navigation, but this seems to be the simplest:

(defn create-nav [navigator-fn conf _]
  (let [vscreens (volatile! nil)
        rfn (r/reactify-component #(->> %
                                        clj->js
                                        get-screen-key
                                        (get @vscreens)
                                        (r/as-element)))
        _ (oset! rfn "!navigationOptions" #(->> %
                                                get-screen-key
                                                (get @vscreens)
                                                meta
                                                clj->js))
        ; TODO remove this dirty hack
        routes-conf (to-array (for [_ (range 10)] #js {:screen rfn}))
        jsconf (clj->js conf)
        nav (r/adapt-react-class (navigator-fn routes-conf jsconf))]
    (fn [{:keys [index dispatch-fn] :as conf} screens]
      (do (vreset! vscreens (filterv vector? screens))
          (let [c (count @vscreens)
                dfn #(when dispatch-fn
                       (-> % (js->clj :keywordize-keys true) dispatch-fn))
                routes (to-array (for [i (range c)]
                                   #js {:key       i        ;TODO this throws a type exception
                                        :routeName (str i)
                                        :params    #js {:blubb i}}))
                navigation #js {:dispatch dfn
                                :state    #js {:index  (or index (dec c))
                                               :routes routes}}
                navigation-hs (addNavigationHelpers navigation)]
            ;(doseq [i (range c)]
            ;  (.setParams navigation-hs #js {:params #js {:key i}
            ;                                 :key i}))
            (js/console.timeEnd "detail")
            [nav {:navigation navigation-hs}])))))

(defn stack-nav [conf cards]
  (create-nav StackNavigator conf cards))

(defn tab-nav [conf tabs]
  (create-nav TabNavigator conf tabs))

need to figure out how to do syntax highlighting

u can then use it like that:

[uic/stack-nav
              {:navigationOptions {:headerStyle          (s :aboveBackground {:height      35
                                                                              :padding-top 0})
                                   :headerTitleStyle     (s :title)
                                   :headerBackTitleStyle (s :title :highlight)
                                   :headerTintColor      highlight-color}
               :dispatch-fn       #(if info?
                                     (dispatch [:toggle-mxinfo mxid])
                                     (dispatch [:select-mx nil]))}
              [^{:header nil} [view {:style (s :background-view)}
                               [selection app-db]]
               (cond
                 (and mxid info?)
                 ^{:title       "Details"
                   :headerRight (header-right-mx-info mxid)}
                 [mx-info ok-tup mxcur]
                 mxid
                 ^{:title                    detail-title
                   :headerRight              (header-right mxid)
                   :headerBackTitle          "Back"
                   :headerTruncatedBackTitle "Back"}
                 [view {:style (s :background-view)}
                  [detail ok-tup mxid]])]

@ronb I tried to follow the example in this page https://facebook.github.io/react-native/docs/navigation.html, but with rendering just one page, like

but I got this error { [Invariant Violation: Route 'children' should declare a screen. For example: import MyScreen from './MyScreen'; children: { : screen: MyScreen, }]

@manu you need to reactify Myscreen and call StackNavigator directly without calling adapt-react-class first. i had exactly the same confusion when first learning about react-navigation. the api is quite strange

StackNavigator is not a react class but a factory function returning a react class.

https://github.com/re-native/re-native-navigation maybe this API is more clear, but i haven’t used that project

by the way reactify refers to reagent.core/reactify

@mfikes I have turned on :advanced compilation on my react-native project. it helps a lot with react-native bundle step (30min -> 3min) and the code seems to run quicker as well. although i have not carefully benchmarked before and after. My app seems to be a lot more responsive with advanced compilation turned on

compiled index.ios.js went from 2.5MB to 500K

Oh wow. That does appear to be significant.

haha yeah it was unbearable before that change. even had node gc timeouts during transformation of index.ios.js

although i would avoid using externs, because they are usually out of date with the current react-native API. cljs-oops seems to be a better short term solution