Update community home scrolling to support sticky header and tabs (#14929)

* communities home sticky tabs

* Communities home screen scroll behaviours

* refactored scroll-page component

src/quo2/components/navigation/page_nav.cljs

@@ -224,7 +224,8 @@
       {:style {:flex           1
                :flex-direction :row
                :align-items    :center}}
-      [left-section-view left-section put-middle-section-on-left?]
+      (when left-section
+        [left-section-view left-section put-middle-section-on-left?])
       (when put-middle-section-on-left?
         [mid-section-view
          (assoc mid-section-props

src/status_im2/common/home/style.cljs

@@ -5,8 +5,8 @@
    :align-items        :center
    :height             56
    :padding-vertical   12
-   :margin-bottom      8
+   :padding-horizontal 20
-   :padding-horizontal 20})
+   :background-color   :transparent})
 
 (def title-column-text
   {:accessibility-label :communities-screen-title

src/status_im2/common/scroll_page/view.cljs

@@ -36,7 +36,7 @@
    top-nav
    title-colum
    navigate-back?]
-  (let [input-range         (if platform/ios? [-47 10] [0 150])
+  (let [input-range         (if platform/ios? [-47 10] [0 92])
         output-range        (if platform/ios? [-208 0] [-208 -45])
         y                   (reanimated/use-shared-value scroll-height)
         translate-animation (reanimated/interpolate y
@@ -128,9 +128,8 @@
        sticky-header
        children]
       [:<>
-       [:f> scroll-page-header @scroll-height height name
+       [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
-        page-nav-right-section-buttons cover-image sticky-header top-nav title-colum
+        cover-image sticky-header top-nav title-colum navigate-back?]
-        navigate-back?]
        [rn/scroll-view
         {:content-container-style         (style/scroll-view-container
                                            (diff-with-max-min @scroll-height 16 0))

src/status_im2/contexts/communities/home/style.cljs

@@ -0,0 +1,29 @@
+(ns status-im2.contexts.communities.home.style
+  (:require [react-native.platform :as platform]))
+
+(defn community-segments
+  [padding-top]
+  {:padding-bottom     12
+   :padding-top        padding-top
+   :padding-horizontal 20
+   :background-color   :transparent})
+
+(defn home-communities-container
+  [background-color]
+  {:flex             1
+   :background-color background-color
+   :position         :absolute
+   :top              (if platform/ios? -44 0)
+   :bottom           0
+   :left             0
+   :right            0})
+
+(def blur-tabs-header
+  {:flex             1
+   :position         :absolute
+   :top              112
+   :height           52
+   :left             0
+   :right            0
+   :justify-content  :center
+   :background-color :transparent})

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

@@ -1,37 +1,19 @@
 (ns status-im2.contexts.communities.home.view
   (:require [utils.i18n :as i18n]
             [quo2.core :as quo]
-            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
+            [react-native.core :as rn]
             [status-im2.common.home.view :as common.home]
+            [status-im2.common.scroll-page.view :as scroll-page]
             [status-im2.contexts.communities.menus.community-options.view :as options]
+            [status-im2.contexts.communities.home.style :as style]
             [utils.re-frame :as rf]))
 
-(defn render-fn
+(defn community-segments
-  [id]
+  [selected-tab padding-top]
-  (let [community-item (rf/sub [:communities/home-item id])]
-    [quo/communities-membership-list-item
-     {:on-press      #(rf/dispatch [:navigate-to :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-item])}])}
-     community-item]))
-
-(defn get-item-layout-js
-  [_ index]
-  #js {:length 64 :offset (* 64 index) :index index})
-
-(defn home-community-segments
-  [selected-tab]
   [rn/view
-   {:style {:padding-bottom     12
+   {:style (style/community-segments padding-top)}
-            :padding-top        16
-            :margin-top         8
-            :height             60
-            :padding-horizontal 20}}
    [quo/tabs
     {:size           32
      :on-change      #(reset! selected-tab %)
@@ -41,17 +23,25 @@
                       {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]}]])
 
 (defn communities-list
-  [community-ids]
+  [communities-ids]
-  [rn/flat-list
+  [rn/view
-   {:key-fn                            identity
+   (map-indexed
-    :get-item-layout                   get-item-layout-js
+    (fn [index id]
-    :keyboard-should-persist-taps      :always
+      (let [community (rf/sub [:communities/home-item id])]
-    :shows-horizontal-scroll-indicator false
+        ^{:key index}
-    :data                              community-ids
+        [quo/communities-membership-list-item
-    :render-fn                         render-fn
+         {:on-press      #(rf/dispatch [:navigate-to :community-overview id])
-    :content-container-style           {:padding-bottom 30}}])
+          :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)])
 
-(defn segments-community-lists
+
+(defn render-communities-segments
   [selected-tab]
   (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement])
         tab                     @selected-tab]
@@ -74,20 +64,70 @@
          :icon :i/info}
         (i18n/label :t/error)])]))
 
-(defn home
+(defn communities-header
-  []
+  [selected-tab padding-top]
-  (let [selected-tab (reagent/atom :joined)]
-    (fn []
   [:<>
-       [common.home/top-nav {:type :default :hide-search true}]
+   [rn/view {:style {:padding-vertical 8}}
-       [common.home/title-column
-        {:label               (i18n/label :t/communities)
-         :handler             #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}])
-         :accessibility-label :new-chat-button}]
     [quo/discover-card
      {:on-press            #(rf/dispatch [:navigate-to :discover-communities])
       :title               (i18n/label :t/discover)
       :description         (i18n/label :t/whats-trending)
-         :accessibility-label :communities-home-discover-card}]
+      :accessibility-label :communities-home-discover-card}]]
-       [home-community-segments selected-tab]
+   [community-segments selected-tab padding-top]])
-       [segments-community-lists selected-tab]])))
+
+(defn home-page-comunity-lists
+  [{:keys [selected-tab padding-top]}]
+  (fn []
+    [rn/view {:style {:flex 1}}
+     [communities-header selected-tab padding-top]
+     [render-communities-segments selected-tab]]))
+
+(defn home-sticky-header
+  [{:keys [selected-tab scroll-height padding-top]}]
+  (fn []
+    (when (> @scroll-height 80)
+      [rn/view
+       {:style style/blur-tabs-header}
+       [community-segments selected-tab padding-top]])))
+
+(defn communities-screen-content
+  []
+  (let [scroll-height (reagent/atom 0)
+        selected-tab  (reagent/atom :joined)]
+    (fn []
+      [scroll-page/scroll-page
+       {:name             (i18n/label :t/communities)
+        :on-scroll        #(reset! scroll-height %)
+        :top-nav          (fn []
+                            [common.home/top-nav
+                             {:type        :default
+                              :hide-search true
+                              :style       {:background-color :transparent}}])
+        :title-colum      (fn []
+                            [common.home/title-column
+                             {:label               (i18n/label :t/communities)
+                              :handler             #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}])
+                              :accessibility-label :new-chat-button}])
+        :background-color (colors/theme-colors
+                           colors/white
+                           colors/neutral-95)
+        :navigate-back?   :false
+        :height           (if (> @scroll-height 80)
+                            208
+                            156)}
+       [home-sticky-header
+        {:selected-tab  selected-tab
+         :scroll-height scroll-height
+         :padding-top   8}]
+       [home-page-comunity-lists
+        {:selected-tab selected-tab
+         :padding-top  16
+         :height       60}]])))
+
+(defn home
+  []
+  [rn/view
+   {:style (style/home-communities-container (colors/theme-colors
+                                              colors/white
+                                              colors/neutral-95))}
+   [communities-screen-content]])