refactored scroll-page component to use flatlist instead of scroll view

status-im · Feb 23, 2023 · c170d8d · c170d8d
1 parent 78defbf
commit c170d8d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 41 deletions.
diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs
@@ -5,8 +5,7 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [status-im.utils.platform :as platform]))
+            [react-native.core :as rn]))
 
 (def ^:private centrify-style
   {:display         :flex

diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs
@@ -782,13 +782,13 @@
                                 :role-id      role-id})]})
 
 (rf/defn mute-chat-failed
-  {:events [:mute-community-failed]}
+  {:events [:community/mute-community-failed]}
   [{:keys [db]} community-id muted? error]
   (log/error "mute community failed" community-id error)
   {:db (assoc-in db [:communities community-id :muted] (not muted?))})
 
 (rf/defn mute-chat-toggled-successfully
-  {:events [:mute-community-successful]}
+  {:events [:community/mute-community-successful]}
   [_ community-id]
   (log/debug "muted chat successfully" community-id))
 
@@ -799,5 +799,5 @@
   {:db            (assoc-in db [:communities community-id :muted] muted?)
    :json-rpc/call [{:method     "wakuext_setCommunityMuted"
                     :params     [community-id muted?]
-                    :on-error   #(rf/dispatch [:mute-community-failed community-id muted? %])
-                    :on-success #(rf/dispatch [:mute-community-successful community-id])}]})
+                    :on-error   #(rf/dispatch [:community/mute-community-failed community-id muted? %])
+                    :on-success #(rf/dispatch [:community/mute-community-successful community-id])}]})
diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs
@@ -134,7 +134,7 @@
       [:<>
        [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
         cover-image sticky-header top-nav title-colum navigate-back?]
-       [rn/scroll-view
+       [rn/flat-list
         {:content-container-style         (style/scroll-view-container
                                            (diff-with-max-min @scroll-height 16 0))
          :shows-vertical-scroll-indicator false
@@ -145,21 +145,19 @@
                                                                     event
                                                                     "nativeEvent.contentOffset.y")))
                                             (when on-scroll
-                                              (on-scroll @scroll-height)))}
-        (when cover-image
-          [rn/view {:style {:height 151}}
-           [rn/image
-            {:source cover-image
-             ;; Using negative margin-bottom as a workaround because on Android,
-             ;; ScrollView clips its children despite setting overflow: 'visible'.
-             ;; Related issue: https://github.com/facebook/react-native/issues/31218
-             :style  {:margin-bottom -16
-                      :flex          1}}]])
-        (when children
-          [rn/view
-           {:flex             1
-            :border-radius    (diff-with-max-min @scroll-height 16 0)
-            :background-color background-color}
-           (when cover-image
-             [:f> display-picture @scroll-height cover-image])
-           children])]])))
+                                              (on-scroll @scroll-height)))
+         :header                          [rn/view {:style {:flex 1}}
+                                           (when cover-image
+                                             [rn/view {:style {:height 151}}
+                                              [rn/image
+                                               {:source cover-image
+                                                :style  {:overflow :visible
+                                                         :flex     1}}]])
+                                           (when children
+                                             [rn/view
+                                              {:flex             1
+                                               :border-radius    (diff-with-max-min @scroll-height 16 0)
+                                               :background-color background-color}
+                                              (when cover-image
+                                                [:f> display-picture @scroll-height cover-image])
+                                              children])]}]])))
diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs
@@ -22,24 +22,28 @@
                       {:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
                       {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]}]])
 
+(defn render-fn
+  [id]
+  (let [community (rf/sub [:communities/home-item id])]
+    [quo/communities-membership-list-item
+     {:on-press      #(rf/dispatch [:navigate-to-nav2 :community-overview id])
+      :on-long-press #(rf/dispatch
+                       [:bottom-sheet/show-sheet
+                        {:content       (fn []
+                                          [options/community-options-bottom-sheet id])
+                         :selected-item (fn []
+                                          [quo/communities-membership-list-item {} community])}])}
+     community]))
+
 (defn communities-list
   [communities-ids]
-  [rn/view
-   (map-indexed
-    (fn [index id]
-      (let [community (rf/sub [:communities/home-item id])]
-        ^{:key index}
-        [quo/communities-membership-list-item
-         {:on-press      #(rf/dispatch [:navigate-to-nav2 :community-overview id])
-          :on-long-press #(rf/dispatch
-                           [:bottom-sheet/show-sheet
-                            {:content       (fn []
-                                              [options/community-options-bottom-sheet id])
-                             :selected-item (fn []
-                                              [quo/communities-membership-list-item {} community])}])}
-         community]))
-    communities-ids)])
-
+  [rn/flat-list
+   {:key-fn                            :id
+    :keyboard-should-persist-taps      :always
+    :shows-horizontal-scroll-indicator false
+    :separator                         [rn/view {:width 12}]
+    :data                              communities-ids
+    :render-fn                         render-fn}])
 
 (defn render-communities-segments
   [selected-tab]