Fork me on GitHub
#cljsrn
<
2021-08-05
>
kennytilton11:08:45

I think I need some basic JS interop help. We are trying to use an RN community slider widget: https://github.com/callstack/react-native-slider We require it thus: (ns example.views.studio (: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: :https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md No luck finding examples of cljs+RN components. Help! 🙂 Thx 🙏

alexdavis11:08:35

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

alexdavis11:08:44

you probably want default

thheller11:08:43

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

đź‘Ť 9
kennytilton13:08:29

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

gammarray16:08:34

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!

raspasov04:08:05

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: https://github.com/raspasov/alexandria-clj/blob/main/src/ss/react_native/dimensions.cljs 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.

gammarray11:08:19

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
raspasov11:08:04

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 https://reactnative.dev/docs/usewindowdimensions 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