Fork me on GitHub
#cljsrn
<
2021-02-28
>
zendevil06:02:50

@raspasov the problem was with keyExtractor. I was using random-uuid wehereas I had to use a key that won’t change for each item

raspasov06:02:54

@ps awesome, glad it worked out 🙂 I knew it had to be on of the properties…

zendevil06:02:06

However, even low resolution images are taking long to show in the first place

raspasov06:02:02

What is “low resolution”? Are you loading from the web?

raspasov06:02:18

There’s ways to mitigate that with UI effects, have the image fade-in on load, etc

raspasov06:02:07

https://github.com/expo/react-native-fade-in-image (this lib solves a bunch of edge cases around images loading nicely)

raspasov06:02:34

Or you can use something like https://github.com/oblador/react-native-animatable (but you’d have to tinker more with it, but it’s more customizable)

raspasov06:02:06

For highest performance there’s this https://github.com/software-mansion/react-native-reanimated (esp the v2 version) but it’s harder to use from ClojureScript

zendevil06:02:23

I’m loading from aws cloudfront

zendevil06:02:47

which I think is a cached aws s3 bucket

zendevil06:02:32

@raspasov react-native-fade-in-image is awesome!

raspasov06:02:41

Works well? 🙂

raspasov06:02:18

;needs to return a key as string :keyExtractor (fn [[_ idx]] (str idx)) If I put a comment there, I probably struggled with it, lol

zendevil07:02:16

Is there a way to know how much progress have been made in sending a multipart request?

zendevil07:02:59

I have the following re-frame handler that sends a multipart request:

(reg-event-fx
 :upload-video
 (fn [cofx [_ navigation]]
   (let [body (js/FormData.)
         file (clj->js {:uri (-> cofx :db :uri) :name "movie.mov" :type "video/quicktime"})
         thumbnail (clj->js {:uri (-> cofx :db :thumbnail-uri) :name "thumbnail.png" :type "img/png"})]
     (prn "file is" file)
     (prn "uploader is " (-> cofx :db :_id))
     (.append body "video" file)
     (.append body "thumbnail" thumbnail)
     (.append body "title" (-> cofx :db :video-name))
     (.append body "uploader" (-> cofx :db :_id))
     {:db (->
           (assoc (:db cofx) :uploading-progress true)
           (assoc :upload-error false))
      :http-xhrio {:method :post
                   :uri (str server-uri "/api/upload-video")
                   :body body
                   :on-success [:upload-success navigation]
                   :on-failure [:upload-error navigation]
                   :format (json-request-format)
                   :response-format (raw-response-format) #_(edn/edn-response-format)}})))

zendevil07:02:59

it is sending a video and an image. I want to know how much progress has been made in the upload

naomarik12:02:34

Are people using krell or re-natal nowadays?

ribelo12:02:34

shadow-cljs

naomarik12:02:37

shadow-cljs for react native development?

naomarik12:02:36

had no idea it could do that, thanks!

pez13:02:52

I do think you can also use figwheel-main without re-natal these days.

raspasov13:02:21

I use figwheel-main

raspasov13:02:30

No re-natal needed these days, that’s correct

naomarik13:02:39

I love shadow-cljs, will try this out first. re-natal was such a headache back in the day.

raspasov13:02:04

Both should work pretty well (shadow-cljs and figwheel-main)

pez13:02:29

I am also in love with shadow-cljs. Just relaying that, because I need to. 😍

zendevil18:02:32

I’m adding a DateTimePicker into my app like so:

zendevil18:02:37

[:> DateTimePicker
    {:testId :dateTimePicker
     :value (Date. 1598051730000)
     :mode :date
     :is24Hour false
     :display :default
     }]

Daniel Schlaug13:03:29

Give js/Date a try.

zendevil18:02:16

But I’m getting the following error: