Fork me on GitHub
#cljsrn
<
2021-02-27
>
zendevil.eth13:02:06

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 ""
                              ;;""
                              (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?

raspasov14:02:16

@ps look at the various options listed in the docs for FlatList I’ve typically used VirtualizedList directly (never tried FlatList) but perhaps this here can can give you some guidance for the relevant configs of the component to make it work:

zendevil.eth15:02:53

@raspasov I couldn’t find anything in the docs of flatlist that would fix the problem