fix(ios): button overlap (#18620)

src/status_im/common/scroll_page/view.cljs

@@ -4,6 +4,7 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.common.scroll-page.style :as style]
     [utils.re-frame :as rf]))
@@ -59,7 +60,7 @@
         [rn/view {:style {:margin-top 0}}
          top-nav]
         [quo/page-nav
-         (cond-> {:margin-top     44
+         (cond-> {:margin-top     (safe-area/get-top)
                   :type           :no-title
                   :background     (if (= 1 (reanimated/get-shared-value opacity-animation))
                                     :blur

src/status_im/contexts/communities/discover/style.cljs

@@ -1,13 +1,16 @@
 (ns status-im.contexts.communities.discover.style
   (:require
-    [react-native.platform :as platform]
     [status-im.contexts.shell.jump-to.constants :as jump-to.constants]))
 
-(def screen-title-container
-  {:height            56
+(def header-height 56)
+
+(defn screen-title-container
+  [safe-area-top]
+  {:height            header-height
    :padding-vertical  12
    :justify-content   :center
-   :margin-horizontal 20})
+   :margin-horizontal 20
+   :margin-top        (+ header-height safe-area-top)})
 
 (def featured-communities-header
   {:flex-direction  :row
@@ -40,7 +43,7 @@
   [fixed?]
   (merge
    {:padding-vertical 12
-    :height           56
+    :height           header-height
     :background-color :transparent}
    (when-not fixed?
      {:margin-top        12
@@ -60,15 +63,12 @@
   {:align-items     :center
    :justify-content :center})
 
-(def render-communities-container
-  {:margin-top (if platform/ios? 57 104)})
-
 (defn blur-tabs-header
-  []
+  [safe-area-top]
   {:padding-horizontal 20
    :position           :absolute
-   :top                (if platform/ios? 100 104)
-   :height             56
+   :top                (+ header-height safe-area-top)
+   :height             header-height
    :right              0
    :left               0
    :justify-content    :center

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

@@ -5,6 +5,7 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.common.scroll-page.view :as scroll-page]
     [status-im.contexts.communities.actions.community-options.view :as options]
@@ -33,7 +34,7 @@
 (defn screen-title
   []
   [rn/view
-   {:style style/screen-title-container}
+   {:style (style/screen-title-container (safe-area/get-top))}
    [quo/text
     {:accessibility-label :communities-screen-title
      :weight              :semi-bold
@@ -183,7 +184,6 @@
    view-type]
   (fn []
     [rn/view
-     {:style style/render-communities-container}
      [discover-communities-header
       {:selected-tab               selected-tab
        :view-type                  view-type
@@ -196,7 +196,7 @@
   (fn []
     (when (> @scroll-height 360)
       [rn/view
-       {:style (style/blur-tabs-header)}
+       {:style (style/blur-tabs-header (safe-area/get-top))}
        [discover-communities-segments selected-tab true]])))
 
 (defn discover-screen-content
@@ -209,6 +209,7 @@
       [scroll-page/scroll-page
        {:theme            theme
         :on-scroll        #(reset! scroll-height %)
+        :page-nav-props   {:background :blur}
         :navigate-back?   :true
         :height           (if (> @scroll-height 360)
                             208