cljsrn 2022-01-24 | Slack Archive

FlavaDave17:01:28

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)

FlavaDave17:01:00

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

thheller17:01:59

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

thheller17:01:41

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

FlavaDave17:01:27

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

thheller17:01:37

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

FlavaDave17:01:27

oh sorry i only saw the :refer part

FlavaDave17:01:51

oh cool! it worked thanks!

FlavaDave17:01:33

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

FlavaDave17:01:09

never seen $default before either

thheller17:01:33