Fork me on GitHub
#cljsrn
<
2017-09-16
>
psdp09:09:39

does anyone have a working example of using react -navigation with rum?

psdp09:09:31

I tried this but failed

(ns myapp.core
    (:require [re-natal.support :as support]
              [cljs-exponent.components :refer [text view image touchable-highlight] :as rn]))

(def ReactNavigation (js/require "react-navigation"))
(def StackNavigator (aget ReactNavigation "StackNavigator"))

(defn home []
  (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
        (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} "Hello World")))

(defn AppRoot []
  (js/React.createElement StackNavigator (clj->js {:Home {:screen (home)}})))

(defonce root-component-factory (support/make-root-component-factory))

(defn mount-app [] (support/mount (AppRoot)))

(defn init []
  (mount-app)
  (.registerComponent rn/app-registry "main" (fn [] root-component-factory)))

psdp09:09:44

[exp] [Invariant Violation: The component for route 'Home' must be a a React component. For example:
[exp] 
[exp] import MyScreen from './MyScreen';
[exp] ...
[exp] Home: {
[exp]   screen: MyScreen,
[exp] }
[exp] 
[exp] You can also use a navigator:
[exp] 
[exp] import MyNavigator from './MyNavigator';
[exp] ...
[exp] Home: {
[exp]   screen: MyNavigator,
[exp] }]

tiensonqin11:09:25

@psdp you should pass a react component. (defn ->react "Convert a rum component to a react component." [rum-component] (:rum/class (meta rum-component))

tiensonqin11:09:58

try passing (->react home).

psdp12:09:48

@tiensonqin Thanks for your advice! It's doesn't seem to work however, the return object became nil

psdp13:09:16

@tiensonqin Awesome! Works like a charm:100:

psdp16:09:47

@tiensonqin I would like to set a title for each navigation screen. Is it possible to set navigationOptions inside component functions? I tried this below, but it's not working:

(defc home <
  {:did-mount (fn [state]
                (let [comp (:rum/react-component state)]
                  (aset comp "navigationOptions" #js {:title "Home"})
                  state))}
  []
  (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
        (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} "Hello World")))
My workaround now is to pass a title argument to ->react wrapper function then set it for navigationOptions. It works but I would prefer to move that to component functions as I can have more controls over there.
(defn ->react
  "Convert a rum component to a react component."
  [rum-component title]
  (let [comp (:rum/class (meta rum-component))]
    (aset comp "navigationOptions" #js {:title title})
    comp))