diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index 9bf4a36401..9c526d1354 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/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 diff --git a/src/status_im/contexts/communities/discover/style.cljs b/src/status_im/contexts/communities/discover/style.cljs index 3bccc24e76..fe1701f395 100644 --- a/src/status_im/contexts/communities/discover/style.cljs +++ b/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 diff --git a/src/status_im/contexts/communities/discover/view.cljs b/src/status_im/contexts/communities/discover/view.cljs index 8a4e219409..7851ba83bf 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/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