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

[#17140] fix: AC tabs are flickering while scrolling them (#17145)

This commit is contained in:
Mohsen Ghafouri 2023-08-31 16:46:53 +03:00 committed by GitHub
parent ebd38295c6
commit 62030497e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/quo2/components/tabs/tabs/view.cljs
View File

@ -21,7 +21,7 @@
;; Truncate to avoid unnecessary rendering. ;; Truncate to avoid unnecessary rendering.
(if (> fade-percentage 0.99) (if (> fade-percentage 0.99)
0.99 0.99
(utils.number/naive-round fade-percentage 2)))) max-fade-percentage)))
(defn- masked-view-wrapper (defn- masked-view-wrapper
[{:keys [fade-end-percentage fade-end?]} & children] [{:keys [fade-end-percentage fade-end?]} & children]
@ -59,8 +59,10 @@
(when on-scroll (when on-scroll
(on-scroll e))) (on-scroll e)))
(defn- render-tab (defn- tab-view
[{:keys [active-tab-id [{:keys [id label notification-dot? accessibility-label]}
index _
{:keys [active-tab-id
blur? blur?
customization-color customization-color
flat-list-ref flat-list-ref
@ -68,9 +70,8 @@
on-change on-change
scroll-on-press? scroll-on-press?
size size
style]} style
{:keys [id label notification-dot? accessibility-label]} ]}]
index]
[rn/view [rn/view
{:style (style/tab {:size size {:style (style/tab {:size size
:default-tab-size default-tab-size :default-tab-size default-tab-size
@ -166,7 +167,6 @@
;; just one about this topic: ;; just one about this topic:
;; https://github.com/facebook/react-native/issues/31218 ;; https://github.com/facebook/react-native/issues/31218
:content-container-style {:padding-top (dec unread-count-offset)} :content-container-style {:padding-top (dec unread-count-offset)}
:extra-data (str @active-tab-id)
:horizontal true :horizontal true
:scroll-event-throttle 64 :scroll-event-throttle 64
:shows-horizontal-scroll-indicator false :shows-horizontal-scroll-indicator false
@ -178,20 +178,20 @@
:fade-end? fade-end? :fade-end? fade-end?
:fading fading :fading fading
:on-scroll on-scroll}) :on-scroll on-scroll})
:render-fn (partial render-tab :render-fn tab-view
{:active-tab-id active-tab-id :render-data {:active-tab-id active-tab-id
:blur? blur? :blur? blur?
:customization-color customization-color :customization-color customization-color
:flat-list-ref flat-list-ref :flat-list-ref flat-list-ref
:number-of-items (count data) :number-of-items (count data)
:on-change on-change :on-change on-change
:scroll-on-press? scroll-on-press? :scroll-on-press? scroll-on-press?
:size size :size size
:style style})})]]] :style style}})]]]
[rn/view (merge style {:flex-direction :row}) [rn/view (merge style {:flex-direction :row})
(map-indexed (fn [index item] (map-indexed (fn [index item]
^{:key (:id item)} ^{:key (:id item)}
[render-tab [tab-view item index nil
{:active-tab-id active-tab-id {:active-tab-id active-tab-id
:blur? blur? :blur? blur?
:customization-color customization-color :customization-color customization-color
@ -199,6 +199,5 @@
:on-change on-change :on-change on-change
:size size :size size
:style style} :style style}
item ])
index])
data)])))) data)]))))