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

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

src/status_im/communities/core.cljs

@@ -782,22 +782,22 @@
                                 :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]}
+(rf/defn mute-community-successfully
+  {:events [:community/mute-community-successful]}
   [_ community-id]
-  (log/debug "muted chat successfully" community-id))
-
+  (log/debug "muted community successfully" community-id))
 
 (rf/defn set-community-muted
   {:events [:community/set-muted]}
   [{:keys [db]} community-id muted?]
   {: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-successfully community-id
+                                               muted?])
+                    :on-success #(rf/dispatch [:community/mute-community-successfully community-id])}]})

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])]}]])))

src/status_im2/contexts/communities/discover/view.cljs

@@ -32,7 +32,7 @@
                              :tag-label (i18n/label :t/podcasts)
                              :resource  (resources/get-image :podcasts)}]}})
 
-(defn render-fn
+(defn community-list-item
   [community-item _ _ {:keys [width view-type]}]
   (let [item (merge community-item
                     (get mock-community-item-data :data))]
@@ -116,7 +116,7 @@
            :shows-horizontal-scroll-indicator false
            :separator                         [rn/view {:width 12}]
            :data                              communities
-           :render-fn                         render-fn
+           :render-fn                         community-list-item
            :render-data                       {:width     @view-size
                                                :view-type view-type}}])])))
 

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 community-list-item
+  [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                         community-list-item}])
 
 (defn render-communities-segments
   [selected-tab]

src/status_im2/contexts/communities/menus/community_options/view.cljs

@@ -45,7 +45,6 @@
   {:icon                (if muted? :i/muted :i/activity-center)
    :accessibility-label (if muted? :unmute-community :mute-community)
    :label               (i18n/label (if muted? :t/unmute-community :t/mute-community))
-   :sub-label           (when muted? (str "muted for 15 minutes"))
    :right-icon          :i/chevron-right
    :on-press            #(hide-sheet-and-dispatch [:community/set-muted id (not muted?)])})