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?
Top comments (0)