Clojurians Log v2

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.

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"}]]
  )

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

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]))

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

Why would this occur? This happens on an

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

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