How can I transfer the part of tabbarOptions code to ClojureScript

Question

How to use the TabNavigator of the react navigation in ClojureScript? It's really difficult to write navigationOption configuration and I want to know how to reach it.

I have do some efforts to address it, but not suitable. I have learned the mechanism of clojure compiler, so I try best to avoid the rookie mistakes.But it's really difficult to solve the problem of anonymous function as the prop to some components. If you write them using fn, #(...)， the propname will changed when compiled to js.

THe javascript code shows as following:

const TabNavigator = createBottomTabNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions:({naviagtion}) => ({
      tabBarLabel: 'home',
      tabBarIcon: ({focused, tintColor}) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          normalImage={require('./assets/home.png')}
          selectedImage={require('./assets/home.png')}
        />
      )
    })
  },
  Content: {
    screen: content,
    navigationOptions:({naviagtion}) => ({
      tabBarLabel: 'content',
      tabBarIcon: ({focused, tintColor}) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          normalImage={require('./assets/content.png')}
          selectedImage={require('./assets/content.png')}
        />
      )
    })
  }
},
{
  tabBarOptions: {
    activeTintColor: '#4CB4E7',
    inactiveTintColor: '#FFEE93',
    style: {backgroundColor: '#FFC09F'}
  }
}）

And this is my trying:

(defn tab-navigator []
  (router/create-bottom-tabnavigator
    (clj->js {:HomeScreen
      (clj->js {:screen (r/reactify-component home-screen)
       :navigationOptions (fn [{:keys [navigation]}]
          (clj->js {:tabBarLabel "home"
           :tabBarIcon (fn [{:keys [focused, tintColor]}]
              (tabbar/tab-bar-item tintColor focused (js/require "../resources/assets/home.png") (js/require "../resources/assets/home.png")))}))})
     :Content
      (clj->js {:screen (r/reactify-component content/content)
       :navigationOptions (fn [{:keys [navigation]}]
          (clj->js {:tabBarLabel "conent"
           :tabBarIcon (fn [{:keys [focused, tintColor]}]
              (tabbar/tab-bar-item tintColor focused (js/require "../resources/assets/content.png") (js/require "../resources/assets/content.png")))}))})})
    (clj->js {:tabBarOptions
      {:activeTintColor "#4CB4E7"
       :inactiveTintColor "#FFEE93"
       :style {:backgroundColor "#FFC09F"}}
    })))

Please give me a approach or some archive to refer, It's a really big gift.

Answer 1

I see two things :

1. You should use clj->js only before the first map
2. You should pass a map for the tabbar/tab-bar-item's properties

I use something like that for projects :

(defn tab-navigator []
  (router/create-bottom-tabnavigator
   (clj->js {:HomeScreen {:screen (r/reactify-component home-screen)
                          :navigationOptions
                          {:tabBarLabel "home"
                           :tabBarIcon (fn [{:keys [focused tintColor]}]
                                         (tabbar/tab-bar-item
                                          {:tintColor tintColor
                                           :focused focused
                                           :normalImage (r/as-element [:> rn/Image {:source (js/require "../resources/assets/home.png")}])}))}}})
   (clj->js {:tabBarOptions
             {:activeTintColor "#4CB4E7"
              :inactiveTintColor "#FFEE93"
              :style {:backgroundColor "#FFC09F"}}})))