2023-07-19 cljsrn | Clojure Slack Archive

cljsrn 2023-07-19

Kent Bull 2023-07-19T00:25:33.118839Z

I answered my own question: react-native-svg to the rescue! It turns out I can just import what I need from this library as shown in the https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md file in their repo. What did NOT work for me was react-native-svg-transformer because shadow-cljs does not recognize SVG files in a cljs source root, or at least I didn’t do that very well.

Kent Bull 2023-07-19T00:26:49.781639Z

The ultimate result was the following markup:

(ns mymodule.svg.images
  (:require ["react-native-svg" :default Svg :refer (Path G Defs ClipPath)]))


(defn add-icon []
  [:> Svg {:width "40", :height "40", :fill "#000", :viewbox "0 0 40 40"}
   [:> Path {:stroke "#000", :stroke-linecap "round", :stroke-width "3", :d "M20.5 1.5v37M1.5 19.5h37"}]]
  )

And to use it you just call the function (add-icon)

Kent Bull 2023-07-19T00:27:45.952489Z

Thanks @thheller for the :default import capability with ShadowCLJS!

thheller 2023-07-19T05:58:59.479029Z

note that the official alternative would be

(ns mymodule.svg.images
  (:require ["react-native-svg" :refer (Path G Defs ClipPath)])
  (:require ["react-native-svg$default" :as Svg]))

Kent Bull 2023-07-19T16:29:20.118209Z

Thanks, I was curious.

Kent Bull 2023-07-19T16:31:51.399789Z

On navigation with React Native “@react-navigation/native” I’m getting a weird error on function arity:

Kent Bull 2023-07-19T16:32:09.751629Z

Why would this occur? This happens on an

[:> rn/Pressable {:on-press #((-> props .-navigation (.navigate "Home")))}
     (svg/logo-icon)]

Kent Bull 2023-07-19T16:43:11.242569Z

It got it figured out. It was something to do with the in-place function definition. Replacing #((…) with (fn [] …) solved my problem.

👍 1

joshmiller 2023-07-20T17:25:04.966759Z

I think the issue is too many parens. #(( some-form )) is going to immediately invoke some-form and make its result the body of #(). You should be able to replace it with #(-> props .-naivgation ...) and it’ll be fine.

Kent Bull 2023-07-20T21:04:15.734379Z

Ah, thanks, I’ll give that a try.

Clojurians Log v2

cljsrn 2023-07-19