2022-01-24 cljsrn | Clojure Slack Archive

cljsrn

FlavaDave 2022-01-24T17:01:28.026900Z

Been working on rn apps with shadow-cljs and it almost always goes pretty smooth but sometimes I run along an npm package that i just cant get to work. Im trying to get a deck swiper working from this package https://www.npmjs.com/package/@ilterugur/react-native-deck-swiper-renewed and wrote a basic swiper like so:

(ns deck-swipe.core
  (:require
   ["react-native" :as rn]
   ["@ilterugur/react-native-deck-swiper-renewed" :refer [Swiper]]
   [shadow.react-native :refer [render-root]]
   [reagent.core :as r]))

(def styles
  ^js (-> {:container
           {:flex            1
            :backgroundColor "#F5FCFF"}
           :card
           {:flex            1
            :borderRadius    4
            :borderWidth     2
            :borderColor     "#E8E8E8"
            :justifyContent  "center"
            :backgroundColor "white"}
           :text
           {:textAlign       "center"
            :fontSize        50
            :backgroundColor "transparent"}}
          (clj->js)
          (rn/StyleSheet.create)))


(defn root
  []
  (fn []
    [:> rn/View {:style (.-container styles)}
     [:> Swiper {:cards           ["do" "more" "of" "what" "makes" "you" "happy"]
                 :renderCard      (fn []
                                    (r/as-element [:> rn/View {:style (.-card styles)}
                                                   [:> rn/Text {:style (.-text styles)} card]]))
                 :onSwiped        #(js/console.log %)
                 :onSwipedAll     #(js/console.log "onSwipedAll")
                 :cardIndex       0
                 :backgroundColor "#4FD0E9"
                 :stackSize       3}]
     [:> rn/Button {:onPress #(js/console.log "oulala")
                    :title   "Press me"}]]))

(defn start
  {:dev/after-load true}
  []
  (render-root "deckSwipeCLJS" (r/as-element [root])))

(defn init []
  (start))

but then i get

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `deck_swipe.core.root`.

This error is located at:
    in RCTView (at View.js:32)
    in View (created by deck_swipe.core.root)
    in deck_swipe.core.root
    in Unknown (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in deckSwipeCLJS(RootComponent) (at renderApplication.js:60)

FlavaDave 2022-01-24T17:03:00.027100Z

the only other time i have seen that error is when I have worked in a JS react native project and accidentally cut out the export default App; line at the end of App.js

thheller 2022-01-24T17:07:59.027300Z

Swiper likely is the undefined one, make sure your require is correct. it might be a default export.

thheller 2022-01-24T17:08:41.027600Z

try ["@ilterugur/react-native-deck-swiper-renewed$default" :as Swiper] isntead of ["@ilterugur/react-native-deck-swiper-renewed" :refer [Swiper]]

FlavaDave 2022-01-24T17:29:27.027800Z

oh crap sorry i think that was a small typo from when I was trying something different.

(ns deck-swipe.core
  (:require
   ["react-native" :as rn]
   ["@ilterugur/react-native-deck-swiper-renewed" :refer [Swiper]]
   [shadow.react-native :refer [render-root]]
   [reagent.core :as r]))

(def styles
  ^js (-> {:container
           {:flex            1
            :backgroundColor "#F5FCFF"}
           :card
           {:flex            1
            :borderRadius    4
            :borderWidth     2
            :borderColor     "#E8E8E8"
            :justifyContent  "center"
            :backgroundColor "white"}
           :text
           {:textAlign       "center"
            :fontSize        50
            :backgroundColor "transparent"}}
          (clj->js)
          (rn/StyleSheet.create)))

(defn root
  []
  (fn []
    [:> rn/View
     [:> Swiper {:cards           (array "do" "more" "of" "what" "makes" "you" "happy")
                 :renderCard      (fn [card]
                                    (r/as-element [:> rn/View {:style (.-card styles)}
                                                   [:> rn/Text {:style (.-text styles)} card]]))
                 :onSwiped        #(js/console.log %)
                 :onSwipedAll     #(js/console.log "onSwipedAll")
                 :cardIndex       0
                 :backgroundColor "#4FD0E9"
                 :stackSize       3}]
     [:> rn/Button {:onPress #(js/console.log "oulala")
                    :title   "Press me"}]]))

(defn start
  {:dev/after-load true}
  []
  (render-root "deckSwipeCLJS"  (r/as-element [root])))

(defn init []
  (start))

still produces that error

thheller 2022-01-24T17:31:37.028Z

and what about my suggestion? dunno what you changed. Swiper is still the same

FlavaDave 2022-01-24T17:32:27.028200Z

oh sorry i only saw the :refer part

FlavaDave 2022-01-24T17:34:51.028400Z

oh cool! it worked thanks!

FlavaDave 2022-01-24T17:36:33.028600Z

could you help me understand how that works? I have never seen :as work without being a namespace alias before

FlavaDave 2022-01-24T17:37:09.028800Z

never seen $default before either

thheller 2022-01-24T17:41:33.029Z

https://clojurescript.org/news/2021-04-06-release#_library_property_namespaces

thheller 2022-01-24T17:41:53.029200Z

$default is for default exports

thheller 2022-01-24T17:42:21.029400Z

["@ilterugur/react-native-deck-swiper-renewed" :rename {default Swiper}] would also work

thheller 2022-01-24T17:43:07.029600Z

:refer doesn't because the export is named default not Swiper. see the translation table here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

FlavaDave 2022-01-24T17:45:10.030200Z

Ohhhh I see now. Thanks so much!

Clojurians Log v2

cljsrn