Fork me on GitHub
#cljsrn
<
2019-05-11
>
lepistane18:05:44

Custom markers in react native maps has anyone been able to solve the problem of performance? I have around 300 markers as edgiest case and it causes major lag for the phone (android) I am planning on cutting this case to about max 30 markers but that many still give me performance issues. How do i go about fixing this?

(when @search-results
        (map (fn [item]
               ^{:key (:id item)}
               [marker {
                        :coordinate {:latitude (js/parseFloat (:lat item))
                                     :longitude (js/parseFloat (:long item))}
                        :title (str "Item: " (:name item))

                        }
                [view {:style {:align-items :center}}

                 [text {:number-of-lines 1
                        :style {:text-align-vertical :center
                                :text-align :center
                                :background-color :white
                                :font-weight :bold
                                :border-width 1
                                :border-color :black
                                :border-radius 20}} (str " " (:name item) " ")]
                 [image {:source item-pic
                         :style {:height 55
                                 :width 55
                                 :resize-mode :contain
                                 }}]
                 ]
                ])
             @search-results))

lepistane19:05:50

i just noticed that even 1 custom marker - app goes crazy but with 300 default pins - it works perfectly how can i fix this? edit: SOLVED tracks-view-changes needs to be false - for some reason when you make custom markers it keeps rerendering this is not an issue if you are using image property still not sure which way to go but i need custom markers 😄 so far it behaves ok