fix ios blur blue overlay (#17015)

Author: Parveshdhull

src/quo2/foundations/colors.cljs

@@ -1,5 +1,6 @@
 (ns quo2.foundations.colors
   (:require [clojure.string :as string]
+            [react-native.platform :as platform]
             [quo2.theme :as theme]))
 
 (defn alpha
@@ -126,12 +127,13 @@
 (def neutral-5-opa-70-blur (alpha neutral-5 0.7))
 (def neutral-10-opa-10-blur (alpha neutral-10 0.1))
 (def neutral-10-opa-40-blur (alpha neutral-10 0.4))
-(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
+;; https://github.com/status-im/status-mobile/issues/14903
+(def neutral-80-opa-80-blur (if platform/android? (alpha "#192438" 0.8) "#1E2430CC"))
 (def neutral-90-opa-10-blur (alpha neutral-90 0.1))
 (def neutral-90-opa-40-blur (alpha neutral-90 0.4))
 (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
 (def neutral-95-opa-70-blur neutral-95-opa-70)
-(def neutral-100-opa-70-blur neutral-100-opa-70)
+(def neutral-100-opa-70-blur (if platform/android? neutral-100-opa-70 "#0D1014B3"))
 
 ;;;;Black
 

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -4,6 +4,7 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [oops.core :refer [oget]]
+            [react-native.platform :as platform]
             [status-im2.common.resources :as resources]
             [status-im.async-storage.core :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as shell.state]
@@ -88,10 +89,9 @@
      (when dark-overlay?
        [blur/view
         {:style         style/background-blur-overlay
-         :blur-amount   30
-         :blur-radius   25
+         :blur-amount   (if platform/android? 30 20)
+         :blur-radius   (if platform/android? 25 10)
          :blur-type     :transparent
          :overlay-color :transparent}])]))
 
 (defn view [dark-overlay?] [:f> f-view dark-overlay?])
-

src/status_im2/contexts/onboarding/common/overlay/view.cljs

@@ -3,6 +3,7 @@
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
+            [react-native.platform :as platform]
             [status-im2.contexts.onboarding.common.overlay.style :as style]
             [status-im2.constants :as constants]))
 
@@ -61,7 +62,7 @@
       :style          (style/blur-container opacity)}
      [blur/view
       {:blur-amount   @blur-amount
-       :blur-radius   25
+       :blur-radius   (if platform/android? 25 10)
        :blur-type     :transparent
        :overlay-color :transparent
        :style         style/blur-style}]]))

src/status_im2/contexts/shell/jump_to/components/bottom_tabs/style.cljs

@@ -27,10 +27,13 @@
    :flex                1
    :accessibility-label :bottom-tabs})
 
-(def bottom-tabs-blur-overlay
-  {:position         :absolute
-   :left             0
-   :right            0
-   :bottom           0
-   :height           (utils/bottom-tabs-extended-container-height)
-   :background-color colors/neutral-100-opa-70})
+(defn bottom-tabs-blur-overlay
+  [height]
+  (reanimated/apply-animations-to-style
+   {:height height}
+   {:position         :absolute
+    :left             0
+    :right            0
+    :bottom           0
+    :height           (utils/bottom-tabs-container-height)
+    :background-color colors/neutral-100-opa-70-blur}))

src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs

@@ -1,8 +1,8 @@
 (ns status-im2.contexts.shell.jump-to.components.bottom-tabs.view
   (:require [utils.re-frame :as rf]
             [react-native.core :as rn]
-            [react-native.blur :as blur]
             [react-native.gesture :as gesture]
+            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
             [status-im2.contexts.shell.jump-to.utils :as utils]
             [status-im2.contexts.shell.jump-to.state :as state]
@@ -14,8 +14,8 @@
 (defn blur-overlay-params
   [style]
   {:style         style
-   :blur-amount   30
-   :blur-radius   25
+   :blur-amount   (if platform/android? 30 20)
+   :blur-radius   (if platform/android? 25 10)
    :blur-type     :transparent
    :overlay-color :transparent})
 
@@ -53,13 +53,15 @@
                                            (gesture/number-of-taps 2)
                                            (gesture/on-start
                                             (fn [_event]
-                                              (rf/dispatch [:messages-home/select-tab :tab/recent]))))]
+                                              (rf/dispatch [:messages-home/select-tab :tab/recent]))))
+        bottom-tabs-blur-overlay-style (style/bottom-tabs-blur-overlay (:bottom-tabs-height
+                                                                        shared-values))]
     (utils/load-stack @state/selected-stack-id)
     (reanimated/set-shared-value (:pass-through? shared-values) pass-through?)
     [reanimated/view
      {:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))}
      (when pass-through?
-       [blur/view (blur-overlay-params style/bottom-tabs-blur-overlay)])
+       [reanimated/blur-view (blur-overlay-params bottom-tabs-blur-overlay-style)])
      [rn/view {:style (style/bottom-tabs)}
       [gesture/gesture-detector {:gesture communities-double-tab-gesture}
        [bottom-tab :i/communities :communities-stack shared-values notifications-data]]

src/status_im2/contexts/shell/jump_to/components/jump_to_screen/style.cljs

@@ -61,4 +61,4 @@
    :left             0
    :right            0
    :top              0
-   :background-color colors/neutral-100-opa-70})
+   :background-color colors/neutral-100-opa-70-blur})