status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Max Risuhin 2018-08-08 21:37:47 +03:00
parent a4541c8af3
commit e2daa89af1
No known key found for this signature in database
GPG Key ID: BF733F5ACA0B4448
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -66,8 +66,7 @@
{:height 56 {:height 56
:justify-content :center}) :justify-content :center})
(def messages-scrollview-inner (def messages-list-vertical-padding 46)
{:padding-vertical 46})
(def photo-style (def photo-style
{:border-radius 20 {:border-radius 20

7
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

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