Hi, I’m looking for a remote (GMT+8) Clojure(script) position (full-time or contract), I’m the original author of https://github.com/seantempesta/expo-cljs-template and https://github.com/tiensonqin/lymchat. Looking forward to talk with you!

i learned a bunch about cljs + rn by reading lymchat’s source!

@mfm Thank you very much.

Do you know how to write the tabBarIcon here

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() { 

Here is how I've written

(TabNavigator
    (clj->js {:swipeEnabled true
              :initialRouteName "boxes-view"
              :tabBarPosition "bottom"
              :navigationOptions {:tabBarVisible true

                                  :tabBarIcon (fn [{:keys [tintColor]}][Image {:source (js/require "./images/linfa_logo.png") :style {:tintColor tintColor} }])
                                  }})) 

Hi! what this symbol :> means?

@manu: That tells Reagent to expect a React component, rather than a Reagent component.

@seantempesta thanks! I saw it on your repository cljs-react-navigation!

Yeah…I need to remove those. It just confuses people.

but I cannot undestand how do you import it

How you import my library?

I mean, I don't undestand how do you import that symbol

what can I use instead of :>?

adapt-react-class?

Yeah

(def image (r/adapt-react-class Image))

You don’t have to import any symbol to use :>. When Reagent is reading the vector it checks to see if the first element is that symbol. Then it assumes the rest of the vector is a react component.

ah ok

[:> Image {:source "asdf.jpg"}] Will automatically adapt the Image class and convert the props to js using clj->js

I'm trying to put an icon to the tab of the tabnavigator

I saw you did it by useng Ionicons

hahah yeah that symbol is so confusing because you can't google it!

or even search the source for it

when I first saw it I was like wat 🙃

I'm trying with Image but I have an error

@seantempesta this is my code

(def Boxes-View (r/reactify-component boxes-view))
(def img* (adapt-react-class (.-Image react)))
(aset Boxes-View "navigationOptions" (clj->js {:tabBarLabel "Home"
                                               :tabBarIcon (fn [{:keys [tintColor focused ]}]
                                                            [img* {:source (js/require "./images/linfa_logo.png") :style {:tintColor tintColor} }])})) 

I've this error

Objects are not valid as a React child (found: object with keys {name, id, class}). If you meant to render a collection of children, use an array instead 

@manu: You might have to render an element as the return value for the tabBarIcon fn.

I found it incredibly confusing to remember when to convert the props or when to return a component vs an element, so I created the cljs-react-navigation library to take care of those details.

what is the difference between element and component? :thinking_face:

I think you can do that via (r/as-element [img* {:source (js/require "./images/linfa_logo.png")...])

I believe an element is an instance of a component.

https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62

great! now it is working!!

But if you use my library it’ll take care of all the converting for you.

Oh cool!

thanks a lot!! ❤️

np

unfortunately I've just discovered your library

and i spent a lot of time in updating from react-navigator to react-navigation

and now I'm almost at the end of the project

Yeah. I banged my head against several walls until I finally gave up and just decided to spec the entire API. They don’t make it easy either! Most of it isn’t documented so you have to dig around in the source code to figure out what the attributes are and what the expected return values need to be.

your repository is a good example of how to use them! 😄

I'll use your project next project! for now thanks for made it 😄

Thanks! Github stars are appreciated. I’m looking for some contracting work at the moment, and I think those stars help. 🙂