Images disappear upon scrolling flatlist

zendevil — Sun, 28 Feb 2021 05:10:14 +0000

I'm using clojurescript for react native. The code essentially compiles to javascript. I have a flat-list like so:

[flat-list {:refreshControl
                  (r/as-element
                   [refresh-control {:refreshing @(subscribe [:refreshing])
                                     :onRefresh #(dispatch [:load-videos])}])
                  :data (reverse @(subscribe [:videos]))
                  :renderItem (fn [item]
                                (r/as-element
                                 [video-press (get (js->clj item) "item")
                                                        navigation]))
                  :keyExtractor (fn [item] (str (random-uuid)))}]

where video-press is the following:

(defn video-press [video navigation]
  (js/console.log "video is" video)
  (js/console.log "thumbnail is " (get video "thumbnail"))
  [pressable {:key (random-uuid)
              :style {:borderWidth 1
                      :borderColor :gray
                      :height 300
                      :margin 1
                      :marginTop 3
                      :marginBottom 3
                      }
              :onPress #(doall
                         (.navigate navigation :Video)
                         (dispatch [:show-info video]))}
   [image {:source {:uri (str "https://d211alragp6msc.cloudfront.net/"
                              ;;"https://d1i5nt38vlltuu.cloudfront.net/"
                              (get video "thumbnail"))}
           #_{:uri (get video "photo")} :style {:height "80%" :width "100%"
                                                :resizeMode :contain}}]
   [view {:style {:flex 1 :flexDirection :column}}
    [text {:style {:fontWeight :bold}} (get video "title")]
    [view {:style {:flex 1 :flexDirection :row}}
     [image {:source {:uri (get video "photo")}
             :style
             {:height 40
              :width 40
              :borderRadius 1000}}]
     [text {:style {:margin 5}} (get video "name")]]]
   #_[:> Text {:style {:fontSize 20}} (get video "name")]
   #_[:> Text (get video "description")]]
  )

However, upon scrolling the flatlist, I’m seeing the images disappear. Moreover, the images take a long time to show as well. How do I fix this?

DEV Community: zendevil

Images disappear upon scrolling flatlist