Clojurians Log v2
Clojure programming
Channels
Apps
helix 2023-09-11
Having difficulties to customise @react-navigation/bottom-tabs... how do I translate this snippet of JSX to helix?
<Tab.Screen
name="Home"
options={{
tabBarBadge: 3,
tabBarIcon: ({color, size}) => (
<Text>XYZ</Text/>
),
}}>{TabA}</Tab.Screen>($ Screen {:name "Home"
:options {:tab-bar-badge 3
:tab-bar-icon
(fn [color size]
($ rn/Text "XYZ"))
}}
TabA):options key seems to be ignored. I tried with camel-case attributes in options but not difference. SinceHelix version looks like this:
JSX/TSX version:
Jimmy Miller 2023-09-11T17:46:03.808099Z
On phone but you probably want options to be a #js {} instead of a clojure object. With camel-cased keys.
lilactown 2023-09-11T17:50:08.966949Z
jimmy is right
($ Screen {:name "Home"
:options #js {:tabBarBadge 3
:tabBarIcon
(fn [color size]
($ rn/Text "XYZ"))}}
TabA)Of course 🙈.... thanks. I looked into the generated JS and it was obvious there, passing ClojureScript data structures to React Native could not work. Interestingly no error messages. Use the source!