Fork me on GitHub

I think I need some basic JS interop help. We are trying to use an RN community slider widget: We require it thus: (ns (:require ["react-native" :as rn] ["@react-native-community/slider" :as Slider] )) And use it thus: (defn BalanceSlider [] (prn :slider! Slider) [:> rn/View [:> rn/Text {:style (:text styles)} "L"] [:> Slider {:style (:slider styles) :minimumValue 0 :maximumValue 1 :minimumTrackTintColor "#FFFFFF" :maximumTrackTintColor "#000000"}] [:> rn/Text {:style (:text styles)} "R"]]) The debug print is encouraging: :slider! #js {:default #js {"$$typeof" #object[Symbol(react.forward_ref)], :render #object[SliderComponent], :defaultProps #js {:disabled false, :value 0, :minimumValue 0, :maximumValue 1, :step 0, :inverted false}}} But we see the error "Element type is invalid: expected a string or a class/function but got: object" This bit on interop seems like what we are doing: : No luck finding examples of cljs+RN components. Help! 🙂 Thx 🙏


its rare to actually use ["foo" :as Bar] in my experience


you probably want default


or use the "standard" modern variant ["@react-native-community/slider$default" :as Slider]

👍 9

Wow. I never would have gotten that. Thx! 🙏


I’ve got a general react native question: How are folks handling responsive font sizes? Are you using pixels or something else? Do you use a normalization function? Are you using any packages to help? Generally curious… thanks!


Do you want the UI to look identical on different screen sizes; i.e. do you want the font size to always take proportionally the same amount of space on the screen? If yes, something like this might be appropriate: The function (<> 20) would give you a font size of “20” that takes identical space in terms of % of the screen on different screen sizes.


Oh cool, ya that’s similar to what I had in mind. Still trying to work out the plan with our UI/UX designer. Most of my curiosity here was hear from more experienced rn devs on common practice. I come from a strong web background, but it’s my first time doing rn.

👍 3

Just FYI, my approach in the link DOES NOT handle screen orientation changes well/at all. This hook can be useful if you need to screen orientation changes Also, this approach more or less works on different phone sizes but on tablets everything ends up huge, since it just takes proportional space on the screen.

👍 3