This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-08-05
Channels
- # announcements (1)
- # babashka (5)
- # beginners (151)
- # calva (43)
- # clj-kondo (23)
- # cljdoc (1)
- # cljs-dev (6)
- # cljsrn (10)
- # clojure (60)
- # clojure-australia (1)
- # clojure-europe (26)
- # clojure-gamedev (14)
- # clojure-nl (1)
- # clojure-spec (10)
- # clojure-uk (80)
- # clojurescript (66)
- # clojureverse-ops (4)
- # community-development (7)
- # conjure (8)
- # datomic (15)
- # deps-new (1)
- # docker (27)
- # emacs (2)
- # fulcro (13)
- # honeysql (13)
- # java (5)
- # jobs-discuss (43)
- # lsp (121)
- # luminus (13)
- # malli (1)
- # off-topic (73)
- # pathom (12)
- # polylith (29)
- # practicalli (4)
- # re-frame (35)
- # reagent (44)
- # remote-jobs (5)
- # rewrite-clj (2)
- # sci (7)
- # shadow-cljs (125)
- # sql (4)
- # tools-deps (9)
- # xtdb (5)
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 🙏
your import is probably wrong https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages
or use the "standard" modern variant ["@react-native-community/slider$default" :as Slider]
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: 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.
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.
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.