This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-12-28
Channels
- # announcements (6)
- # beginners (89)
- # boot (1)
- # calva (1)
- # cider (24)
- # cljsrn (19)
- # clojars (2)
- # clojure (102)
- # clojure-europe (2)
- # clojure-italy (9)
- # clojure-nl (1)
- # clojure-spec (6)
- # clojure-uk (56)
- # clojurescript (29)
- # code-reviews (14)
- # cursive (5)
- # data-science (1)
- # datomic (44)
- # duct (1)
- # emacs (10)
- # figwheel-main (5)
- # fulcro (8)
- # graphql (10)
- # hoplon (1)
- # leiningen (7)
- # overtone (17)
- # pathom (8)
- # re-frame (13)
- # slack-help (3)
- # spacemacs (22)
- # sql (2)
- # vim (3)
Hi! Question: I'm trying to get a React Navigation tab navigator working in a Reagent/ClojureScript project. I've got the tab part working, but I can't figure out what is the right thing to pass in navigationOptions
to get a custom icon to show up.
Gist is here: https://gist.github.com/kellyi/16b880b910f0e796f27489e3ad3ed385#file-demo-cljs-L61
The main part is this, which seems like it should be rendering the tabBarIcon
correctly but won't for some reason:
(defn greeter-icon
[]
[ic {:name "smile-o"}])
(defn home
[]
(create-tab-navigator
(clj->js {"Counter" {"screen" (r/reactify-component counter)}
"Greeter" {"screen" (r/reactify-component greeter)
"navigationOptions" (fn []
(clj->js {"title" "Hello!"
"tabBarIcon" (r/reactify-component greeter-icon)}))}})))
Is there something I'm doing that's obviously wrong? FWIW I know React pretty thoroughly, but I'm new to ClojureScript
According to the docs the tabBarIcon
option accepts either a function which returns a React element or a React element on its own
Right now you have navigationOptions
accepting a function, not tabBarIcon
- is that intended?
Yeah, that's intended -- it seems like a quirk of the API
navigationOptions
takes a function which returns an object, some of whose keys can have function values
The title
option works if I change it, btw.
Try (r/reactify-component [greeter-icon])
I think you have to wrap it in a vector. Kind of like in JSX - you wouldn’t pass in just the naked GreeterIcon
class, you’d pass in <GreeterIcon />
Ah, right, that makes sense -- I'll give it a try!
Hm, unfortunately that didn't work. I tried out a bunch of other permutations too and the outcome would vacillate between: null is not an object (evaluations this.__reactAutobindPairs
on a red error screen or actually rendering the app but complaining that I had passed an uncalled function as a child component
This "works" in the sense that it renders to correct thing -- a null icon:
(defn new-icon
[]
nil)
(defn home
[]
(create-tab-navigator
(clj->js {"Counter" {"screen" (r/reactify-component counter)}
"Greeter" {"screen" (r/reactify-component greeter)
"navigationOptions" (fn []
(clj->js {"title" "Greeter!"
"tabBarIcon" new-icon}))}})))
@kinnes Looking at my tab bar navigator, I’m getting tab bar icons via the tab-screen
fn in cljs-react-navigation
which provides a bunch of useful helper fns for this kinda stuff. Yours would end up looking like…
(tab-navigator {:Counter {:screen (tab-screen counter)} :Greeter {:screen (tab-screen greeter {:tabBarLabel "Greeeter!" :tabBarIcon new-icon})}}})
Awesome! I saw that library but didn't try it yet. Seems like it might have a nicer interface than the thing I was trying.