React-native on Clojure - Get the ScrollView by id and scrollTo a view inside the ScrollView

Question

I have a map with a list of markers. I have also a list of views (containing the details of marked items) inside a ScrollView below the map.

When I click on a marker inside map, I need to scroll down to a particular view inside the ScrollView.

Here is my Code.

(defn render-link [ctx art]
  (let [{:keys [dimensions]} (get-dimensions)
        route (current-route> ctx)
        name (:name art)
        photos ((:photos art))
        campus ((:campus art))
        thumbnail ((:thumbnail art))
        art-selector (if thumbnail thumbnail (first photos))
        photo-url (str "https:" (image-url (when (seq photos) (get-in art-selector [:file :url])) :1x1))]
    [touchable-highlight {:key (:id art)
                          :on-press #(navigate-replace! (assoc route :active-id (:id art)))}
     [view {:style {:width (:width dimensions)
                    :background-color (:lightest-gray colors)
                    :height 60
                    :flex-direction "row"
                    :justify-content "center"
                    :flex-wrap "nowrap"
                    :border-bottom-width 1
                    :border-bottom-color (:semi-gray colors)}}
      [image {:source {:uri photo-url}
              :resize-mode "cover"
              :style {:width 60}}]
      (if (= (:id art) (:active-id route))
        [view {:style {:width 4
                       :border-left-width 4
                       :border-left-color (:red colors)}}]
        [view {:style {:width 4
                       :border-left-width 4
                       :border-left-color (:lightest-gray colors)}}])
      [view {:style {:flex 1
                     :align-items "center"
                     :flex-direction "row"
                     :padding-horizontal 12}}
       [view {:style {:flex 1
                      :flex-direction "column"
                      :justify-content "center"}}
        [text {:number-of-lines 1
               :style {:color (:gray colors)
                       :font-size 18 
                       :font-weight "500"}} (str/trim name)]
        [text {:number-of-lines 1
               :style {:color (:gray colors)}} (:name campus)]]
       [view {:style {:flex-direction "row"}}
        [touchable-highlight {:underlay-color "transparent"
                              :on-press #(navigate-go! {:key "add-to-list" :id (:id art)})}
         [image {:source img-add-existing
                 :resize-mode "contain"
                 :style {:margin-horizontal 12
                         :width 30
                         :height 30}}]]
        [touchable-highlight {:underlay-color "transparent"
                              :on-press #(navigate-go! {:key "routing" :id (:id art)})}
         [image {:source img-location
                 :resize-mode "contain"
                 :style {:margin-horizontal 12
                         :width 30
                         :height 30}}]]]]]]))

(defn render [ctx]
  (let [{:keys [top-padding
                dimensions]} (get-dimensions)
        nearby (sub> ctx :nearby-art-pieces)
        route (current-route> ctx)
        list-is-expanded? (r/atom false)]
    (fn []
      [view {:style {:flex 1
                     :width (:width dimensions)
                     :margin-top top-padding}}
       [(ui/component ctx :top-bar)] 
      (when (sub> ctx :show-map?)
         [view {:style {:flex 1}}
          [(ui/component ctx :map) {:style {:width (:width dimensions)
                                            :flex 1}}
           (when-let [user-location (select-keys (:coords (sub> ctx :geolocation)) [:latitude :longitude])]
             [user-marker {:coordinate user-location}])
           (doall
            (map (fn [art]
                   (when-let [location (set/rename-keys (:geoLocation art) {:lat :latitude :lon :longitude})] 
                     (if (= (:id art) (:active-id (current-route> ctx)))
                       [active-marker {:key (:id art)
                                       :coordinate location}]
                       [marker {:key (:id art)
                                :coordinate location
                                :on-press #(navigate-replace! (assoc route 
                                :active-id (:id art))}]))) nearby))]])
       [view {:style {:height (if (= false @list-is-expanded?) 80 (+ 20 (* 60 (min (max 1 (count nearby)) 4))))
                      :width (:width dimensions)
                      :margin-bottom 60}}
        [touchable-highlight {:on-press #(swap! list-is-expanded? not)}
         [view {:style {:height 20
                        :width (:width dimensions)
                        :background-color (:gray colors)}}]]
        [scroll-view {:id "art-list-view"}
         (doall (map (fn [art]
                       (render-link ctx art)) nearby))]]
       [(ui/component ctx :tab-bar)]
       [(ui/component ctx :sidebar)]])))

On the on-press of the marker, I need to scroll down the ScrollView with id "art-list-view".

Can anyone please help?

Answer 1

I could fix this by using the animated-scroll-view and with the below code:

[marker {:key (:id art)
                                :coordinate location
                                :on-press (fn []
                                  (when-let [s @scroll-atom]
                                   (navigate-replace! (assoc route :active-id (:id art)))
                                   (ocall s "_component.scrollTo" #js {:x 0 :y (* index 60) :animated false})))}]

ListView:

[animated-scroll-view {:id "art-list-view"
                                :ref #(reset! scroll-atom %)}
         (doall (map (fn [art]
                       (render-link ctx art)) nearby))]]