Enable scroll-view rendering optimization for array of children #5012

status-im · Aug 10, 2018 · e2daa89 · e2daa89
1 parent a4541c8
commit e2daa89
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/status_im/ui/screens/desktop/main/chat/styles.cljs b/src/status_im/ui/screens/desktop/main/chat/styles.cljs
@@ -66,8 +66,7 @@
   {:height          56
    :justify-content :center})
 
-(def messages-scrollview-inner
-  {:padding-vertical 46})
+(def messages-list-vertical-padding 46)
 
 (def photo-style
   {:border-radius 20

diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs
@@ -135,16 +135,19 @@
           current-public-key (re-frame/subscribe [:get-current-public-key])]
       [react/view {:style styles/messages-view}
        [react/scroll-view {:scrollEventThrottle    16
+                           :headerHeight styles/messages-list-vertical-padding
+                           :footerWidth styles/messages-list-vertical-padding
+                           :enableArrayScrollingOptimization true
                            :on-scroll              (fn [e]
                                                      (let [ne (.-nativeEvent e)
                                                            y (.-y (.-contentOffset ne))]
-                                                       (when (zero? y)
+                                                       (when (<= y 0)
                                                          (when @scroll-timer (js/clearTimeout @scroll-timer))
                                                          (reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:load-more-messages]) 300)))
                                                        (reset! scroll-height (+ y (.-height (.-layoutMeasurement ne))))))
                            :on-content-size-change #(.scrollToEnd @scroll-ref)
                            :ref                    #(reset! scroll-ref %)}
-        [react/view {:style styles/messages-scrollview-inner}
+        [react/view
          (doall
           (for [[index {:keys [from content message-id type value] :as message-obj}] (map-indexed vector (reverse @messages))]
             ^{:key (or message-id (str type value))}