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

status-im · Mar 14, 2023 · e301359 · e301359
1 parent 7bd6613
commit e301359
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 36 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
@@ -796,22 +796,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-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
@@ -117,7 +117,7 @@
       [:<>
        [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
         logo 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
@@ -128,21 +128,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 logo])
-           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/discover/style.cljs b/src/status_im2/contexts/communities/discover/style.cljs
@@ -22,8 +22,10 @@
 
 (def featured-list-container
   {:flex-direction :row
-   :overflow       :hidden
-   :margin-bottom  24
+   :overflow       :hidden})
+
+(def flat-list-container
+  {:padding-bottom 24
    :margin-left    20
    :padding-right  20})
 

diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs
@@ -22,7 +22,7 @@
                              :group [{:id         1
                                       :token-icon (resources/get-mock-image :status-logo)}]}]}})
 
-(defn render-fn
+(defn community-list-item
   [community-item _ _ {:keys [width view-type]}]
   (let [item  (merge community-item
                      (get mock-community-item-data :data))
@@ -97,8 +97,8 @@
       [rn/view
        {:style     style/featured-list-container
         :on-layout #(swap! view-size
-                      (fn []
-                        (- (oops/oget % "nativeEvent.layout.width") 20)))}
+                           (fn []
+                             (- (oops/oget % "nativeEvent.layout.width") 20)))}
        (when-not (= @view-size 0)
          [rn/flat-list
           {:key-fn                            :id
@@ -107,9 +107,10 @@
            :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}}])])))
+                                               :view-type view-type}
+           :contentContainerStyle             style/flat-list-container}])])))
 
 (defn discover-communities-header
   [{:keys [featured-communities-count

diff --git a/src/status_im2/contexts/communities/menus/community_options/view.cljs b/src/status_im2/contexts/communities/menus/community_options/view.cljs
@@ -48,7 +48,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?)])})