Correct top bar offsets and positions on Android + correct blur as a bonus ✨ (#16148)

* Correct top bar offsets and positions on Android

* Style fixes

* Style fixes

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.chat.messages.navigation.style
   (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))
 
 (defonce ^:const navigation-bar-height 100)
@@ -17,33 +16,47 @@
     :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
    position))
 
-(defn blur-view
-  [status-bar-height]
+(def background-view
   {:position         :absolute
    :top              0
    :left             0
    :right            0
-   :height         (- navigation-bar-height
-                      (if platform/ios? 0 status-bar-height))
+   :height           navigation-bar-height
+   :background-color (colors/theme-colors colors/white-opa-70 :transparent)
+   :display          :flex
+   :flex-direction   :row
+   :overflow         :hidden})
+
+(defn animated-background-view
+  [enabled? animation]
+  (reanimated/apply-animations-to-style
+   (when enabled?
+     {:opacity animation})
+   background-view))
+
+(def blur-view
+  {:position       :absolute
+   :top            0
+   :left           0
+   :right          0
+   :height         navigation-bar-height
    :display        :flex
    :flex-direction :row
    :overflow       :hidden})
 
 (defn animated-blur-view
-  [enabled? animation status-bar-height]
+  [enabled? animation]
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   (blur-view status-bar-height)))
+   blur-view))
 
 (def navigation-view
-  {:z-index 4})
+  {:z-index 1})
 
-(defn header-container
-  [status-bar-height]
+(def header-container
   {:position       :absolute
-   :top            (- header-offset
-                      (if platform/ios? 0 status-bar-height))
+   :top            header-offset
    :left           0
    :right          0
    :padding-bottom 8
@@ -63,20 +76,18 @@
       :opacity   opacity-animation})
    header))
 
-(defn pinned-banner
-  [status-bar-height]
+(def pinned-banner
   {:position :absolute
    :left     0
    :right    0
-   :top      (- navigation-bar-height
-                (if platform/ios? 0 status-bar-height))})
+   :top      navigation-bar-height})
 
 (defn animated-pinned-banner
-  [enabled? animation status-bar-height]
+  [enabled? animation]
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   (pinned-banner status-bar-height)))
+   pinned-banner))
 
 (def header-content-container
   {:flex-direction :row

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -2,9 +2,10 @@
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [re-frame.db]
+            [react-native.blur :as blur]
             [react-native.core :as rn]
+            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
-            [react-native.safe-area :as safe-area]
             [status-im2.contexts.chat.messages.navigation.style :as style]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
             [status-im2.constants :as constants]
@@ -14,9 +15,7 @@
 
 (defn f-navigation-view
   [{:keys [scroll-y]}]
-  (let [insets                   (safe-area/get-insets)
-        status-bar-height        (:top insets)
-        {:keys [group-chat chat-id chat-name emoji
+  (let [{:keys [group-chat chat-id chat-name emoji
                 chat-type]
          :as   chat}             (rf/sub [:chats/current-chat-chat-view])
         all-loaded?              (rf/sub [:chats/all-loaded? chat-id])
@@ -52,14 +51,18 @@
                                                          {:extrapolateLeft  "clamp"
                                                           :extrapolateRight "clamp"})]
     [rn/view {:style style/navigation-view}
-     [reanimated/blur-view
-      {:blurAmount   32
-       :blurType     (colors/theme-colors :xlight :dark)
-       :overlayColor :transparent
-       :style        (style/animated-blur-view all-loaded? opacity-animation status-bar-height)}]
+     [reanimated/view
+      {:style (style/animated-background-view all-loaded? opacity-animation)}]
+
+     [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
+      [blur/view
+       {:blur-amount 20
+        :blur-type   (colors/theme-colors :light :dark)
+        :blur-radius (if platform/ios? 20 10)
+        :style       {:flex 1}}]]
 
      [rn/view
-      [rn/view {:style (style/header-container status-bar-height)}
+      [rn/view {:style style/header-container}
        [rn/touchable-opacity
         {:active-opacity      1
          :on-press            #(rf/dispatch [:navigate-back])
@@ -104,7 +107,7 @@
           [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])]
 
       [reanimated/view
-       {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation status-bar-height)}
+       {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation)}
        [pin.banner/banner chat-id]]]]))
 
 (defn navigation-view