Remove blur from android #20249 (#20308)

2024-06-07 14:28:28 +02:00 · 2024-06-07 14:28:28 +02:00 · cedd4900d5
parent d43e8881ef
commit cedd4900d5
42 changed files with 112 additions and 90 deletions
--- a/src/quo/components/animated_header_flatlist/style.cljs
+++ b/src/quo/components/animated_header_flatlist/style.cljs
@ -1,6 +1,7 @@
 (ns quo.components.animated-header-flatlist.style
  (:require
    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]))

 (defn container-view
@ -28,7 +29,7 @@
    :right            right}))

 (defn blur-view
-  [animation]
+  [animation theme]
  (reanimated/apply-animations-to-style
   {:opacity animation}
   {:position         :absolute
@ -37,7 +38,9 @@
    :right            0
    :height           100
    :z-index          2
-    :overflow :hidden}))
+    :overflow         :hidden
+    :background-color (when platform/android?
+                        (colors/theme-colors colors/white colors/neutral-80 theme))}))

 (defn entity-picture
  [animation theme]
--- a/src/quo/components/animated_header_flatlist/view.cljs
+++ b/src/quo/components/animated_header_flatlist/view.cljs
@ -83,7 +83,7 @@
      {:blurAmount   32
       :blurType     :light
       :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
-       :style        (style/blur-view opacity-animation)}
+       :style        (style/blur-view opacity-animation theme)}
      [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
       [header-comp]]]
     [reanimated/flat-list
--- a/src/quo/components/blur/view.cljs
+++ b/src/quo/components/blur/view.cljs
@ -0,0 +1,20 @@
+(ns quo.components.blur.view
+  (:require [quo.foundations.colors :as colors]
+            [quo.theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [react-native.platform :as platform]))
+
+(defn- view-android
+  ([props] (view-android props nil))
+  ([{:keys [style]} child]
+   (let [theme (quo.theme/use-theme)]
+     [rn/view
+      {:style (assoc style
+                     :pointer-events :box-none
+                     :background-color
+                     (or (:background-color style)
+                         (colors/theme-colors colors/white colors/neutral-80 theme)))}
+      child])))
+
+(def view (if platform/ios? blur/view view-android))
--- a/src/quo/components/buttons/button/view.cljs
+++ b/src/quo/components/buttons/button/view.cljs
@ -1,12 +1,12 @@
 (ns quo.components.buttons.button.view
  (:require
+    [quo.components.blur.view :as blur]
    [quo.components.buttons.button.properties :as button-properties]
    [quo.components.buttons.button.style :as style]
    [quo.components.icon :as quo.icons]
    [quo.components.markdown.text :as text]
    [quo.foundations.customization-colors :as customization-colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]))

 (defn button
--- a/src/quo/components/drawers/drawer_buttons/view.cljs
+++ b/src/quo/components/drawers/drawer_buttons/view.cljs
@ -1,10 +1,10 @@
 (ns quo.components.drawers.drawer-buttons.view
  (:require
+    [quo.components.blur.view :as blur]
    [quo.components.drawers.drawer-buttons.style :as style]
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
--- a/src/quo/components/drawers/permission_context/style.cljs
+++ b/src/quo/components/drawers/permission_context/style.cljs
@ -1,12 +1,13 @@
 (ns quo.components.drawers.permission-context.style
  (:require
    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]
    [react-native.safe-area :as safe-area]))

 (def ^:private radius 20)

 (def blur-container
-  {:background-color :transparent
+  {:background-color (when platform/ios? :transparent)
   :position         :absolute
   :top              0
   :left             0
--- a/src/quo/components/drawers/permission_context/view.cljs
+++ b/src/quo/components/drawers/permission_context/view.cljs
@ -1,6 +1,7 @@
 (ns quo.components.drawers.permission-context.view
  (:require
    [clojure.string :as string]
+    [quo.components.blur.view :as blur]
    [quo.components.buttons.button.view :as button]
    [quo.components.drawers.permission-context.schema :as component-schema]
    [quo.components.drawers.permission-context.style :as style]
@ -10,7 +11,6 @@
    [quo.components.tags.token-tag.view :as token-tag]
    [quo.foundations.colors :as colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.shadow :as shadow]
--- a/src/quo/components/dropdowns/dropdown/view.cljs
+++ b/src/quo/components/dropdowns/dropdown/view.cljs
@ -1,12 +1,12 @@
 (ns quo.components.dropdowns.dropdown.view
  (:require
+    [quo.components.blur.view :as blur]
    [quo.components.dropdowns.dropdown.properties :as properties]
    [quo.components.dropdowns.dropdown.style :as style]
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
    [quo.foundations.customization-colors :as customization-colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]))

 (defn view
--- a/src/quo/components/notifications/notification/style.cljs
+++ b/src/quo/components/notifications/notification/style.cljs
@ -1,7 +1,8 @@
 (ns quo.components.notifications.notification.style
  (:require
    [quo.foundations.colors :as colors]
-    [quo.foundations.shadows :as shadows]))
+    [quo.foundations.shadows :as shadows]
+    [react-native.platform :as platform]))

 (def box-container
  {:margin-horizontal 8
@ -15,7 +16,7 @@
   :padding-vertical 8
   :padding-left     10
   :padding-right    8
-   :background-color :transparent})
+   :background-color (when platform/ios? :transparent)})

 (defn content-container
  [theme]
--- a/src/quo/components/notifications/notification/view.cljs
+++ b/src/quo/components/notifications/notification/view.cljs
@ -1,10 +1,10 @@
 (ns quo.components.notifications.notification.view
  (:require
    [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.blur.view :as blur]
    [quo.components.markdown.text :as text]
    [quo.components.notifications.notification.style :as style]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]))

 (defn header-container
--- a/src/quo/components/notifications/toast/style.cljs
+++ b/src/quo/components/notifications/toast/style.cljs
@ -1,7 +1,8 @@
 (ns quo.components.notifications.toast.style
  (:require
    [quo.foundations.colors :as colors]
-    [quo.foundations.shadows :as shadows]))
+    [quo.foundations.shadows :as shadows]
+    [react-native.platform :as platform]))

 (defn box-container
  [theme]
@ -17,7 +18,7 @@
   :padding-vertical 8
   :padding-left     10
   :padding-right    8
-   :background-color :transparent})
+   :background-color (when platform/ios? :transparent)})

 (defn content-container
  [theme]
--- a/src/quo/components/notifications/toast/view.cljs
+++ b/src/quo/components/notifications/toast/view.cljs
@ -1,12 +1,12 @@
 (ns quo.components.notifications.toast.view
  (:require
    [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.blur.view :as blur]
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
    [quo.components.notifications.count-down-circle :as count-down-circle]
    [quo.components.notifications.toast.style :as style]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [utils.i18n :as i18n]))

--- a/src/quo/components/overlay/view.cljs
+++ b/src/quo/components/overlay/view.cljs
@ -1,7 +1,7 @@
 (ns quo.components.overlay.view
  (:require
+    [quo.components.blur.view :as blur]
    [quo.components.overlay.style :as style]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.safe-area :as safe-area]))

--- a/src/quo/core.cljs
+++ b/src/quo/core.cljs
@ -13,6 +13,7 @@
    quo.components.avatars.user-avatar.view
    quo.components.avatars.wallet-user-avatar.view
    quo.components.banners.banner.view
+    quo.components.blur.view
    quo.components.browser.browser-input.view
    quo.components.buttons.button.view
    quo.components.buttons.composer-button.view
@ -218,6 +219,9 @@
 ;;;; Browser
 (def browser-input quo.components.browser.browser-input.view/view)

+;;;; Blur
+(def blur quo.components.blur.view/view)
+
 ;;;; Calendar
 (def calendar quo.components.calendar.calendar.view/view)
 (def calendar-day quo.components.calendar.calendar-day.view/view)
--- a/src/react_native/blur.cljs
+++ b/src/react_native/blur.cljs
@ -2,10 +2,9 @@
  (:require
    ["@react-native-community/blur" :as blur]
    [react-native.core :as rn]
-    [react-native.platform :as platform]
    [reagent.core :as reagent]))

-(def view (reagent/adapt-react-class (.-BlurView blur)))
-
-;; blur view is currently not working correctly on Android.
-(def ios-view (if platform/ios? view rn/view))
+(def view
+  (if blur
+    (reagent/adapt-react-class (.-BlurView blur))
+    rn/view))
--- a/src/react_native/reanimated.cljs
+++ b/src/react_native/reanimated.cljs
@ -23,6 +23,7 @@
                     runOnJS)]
    ["react-native-redash" :refer (withPause)]
    [react-native.flat-list :as rn-flat-list]
+    [react-native.platform :as platform]
    [react-native.utils :as rn.utils]
    [reagent.core :as reagent]
    [utils.transforms :as transforms]
@ -60,7 +61,7 @@
 (def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
 (def linear-gradient (create-animated-component LinearGradient))
 (def fast-image (create-animated-component FastImage))
-(def blur-view (create-animated-component (.-BlurView blur)))
+(def blur-view (if platform/ios? (create-animated-component (.-BlurView blur)) view))

 ;; Hooks
 (def use-shared-value useSharedValue)
--- a/src/status_im/common/bottom_sheet/view.cljs
+++ b/src/status_im/common/bottom_sheet/view.cljs
@ -4,7 +4,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]
    [react-native.hooks :as hooks]
@ -134,7 +133,7 @@
                (style/sheet {:max-height sheet-max-height}))}
       (when shell?
         [rn/view {:style style/shell-bg-container}
-          [blur/ios-view
+          [quo/blur
           {:style         (style/shell-bg blur-background)
            :blur-radius   (or blur-radius 20)
            :blur-amount   32
--- a/src/status_im/common/emoji_picker/view.cljs
+++ b/src/status_im/common/emoji_picker/view.cljs
@ -5,7 +5,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]
    [react-native.platform :as platform]
@ -131,7 +130,7 @@
                     :scroll-ref      scroll-ref}))]
    (fn []
      [rn/view {:style style/category-container}
-       [blur/view
+       [quo/blur
        {:style         style/category-blur-container
         :blur-radius   (if platform/android? 20 10)
         :blur-amount   (if platform/ios? 20 10)
--- a/src/status_im/common/floating_button_page/floating_container/view.cljs
+++ b/src/status_im/common/floating_button_page/floating_container/view.cljs
@ -1,13 +1,14 @@
 (ns status-im.common.floating-button-page.floating-container.view
-  (:require [quo.theme :as quo.theme]
-            [react-native.blur :as blur]
+  (:require
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [status-im.common.floating-button-page.floating-container.style :as style]))

 (defn- blur-container
  [child]
  (let [theme (quo.theme/use-theme)]
-    [blur/view
+    [quo/blur
     {:blur-amount 12
      :blur-radius 12
      :blur-type   theme}
--- a/src/status_im/common/home/banner/view.cljs
+++ b/src/status_im/common/home/banner/view.cljs
@ -4,7 +4,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
@ -34,7 +33,7 @@
  (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)
        theme       (quo.theme/use-theme)]
    [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)}
-     [blur/view
+     [quo/blur
      {:style         style/fill-space
       :blur-amount   (if platform/ios? 20 10)
       :blur-type     (if (= theme :light) (if platform/ios? :light :xlight) :dark)
--- a/src/status_im/common/scan_qr_code/view.cljs
+++ b/src/status_im/common/scan_qr_code/view.cljs
@ -3,7 +3,6 @@
            [oops.core :as oops]
            [quo.core :as quo]
            [quo.foundations.colors :as colors]
-            [react-native.blur :as blur]
            [react-native.camera-kit :as camera-kit]
            [react-native.core :as rn]
            [react-native.hole-view :as hole-view]
@ -177,7 +176,7 @@
   [hole-view/hole-view
    {:style style/hole
     :holes [(assoc qr-view-finder :borderRadius 16)]}
-    [blur/view
+    [quo/blur
     {:style            style/absolute-fill
      :blur-amount      10
      :blur-type        :transparent
--- a/src/status_im/common/scroll_page/style.cljs
+++ b/src/status_im/common/scroll_page/style.cljs
@ -23,10 +23,7 @@
    :right            0
    :left             0
    :background-color (if platform/android?
-                        (colors/theme-colors
-                         colors/white-opa-70
-                         colors/neutral-95-opa-70
-                         theme)
+                        (colors/theme-colors colors/white colors/neutral-80 theme)
                        :transparent)}))

 (defn sticky-header-title
--- a/src/status_im/contexts/chat/messenger/composer/view.cljs
+++ b/src/status_im/contexts/chat/messenger/composer/view.cljs
@ -1,9 +1,9 @@
 (ns status-im.contexts.chat.messenger.composer.view
  (:require
    [clojure.string :as string]
+    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]
    [react-native.hooks :as hooks]
@ -168,7 +168,7 @@
    [rn/view (when platform/ios? {:style {:z-index 1}})
     [reanimated/view {:style (style/background opacity background-y window-height)}]
     [reanimated/view {:style (style/blur-container composer-default-height shared-values)}
-      [blur/view (style/blur-view theme)]]
+      [quo/blur (style/blur-view theme)]]
     [:f> sheet-component extra-params props state shared-values]]))

 (defn composer
--- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs
+++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs
@ -5,7 +5,6 @@
    [quo.foundations.colors :as colors]
    [quo.theme]
    [re-frame.db]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
@ -115,7 +114,7 @@
                                      messages.constants/pinned-banner-animation-start-position)))]
    [:<>
     [reanimated/view {:style (style/animated-background-view background-opacity navigation-view-height)}
-      [blur/view
+      [quo/blur
       {:style         {:flex 1}
        :blur-amount   20
        :blur-type     :transparent
--- a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs
+++ b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs
@ -2,7 +2,6 @@
  (:require
    [quo.core :as quo]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
    [status-im.contexts.chat.messenger.messages.pin.banner.style :as style]
@ -12,7 +11,7 @@
  [{:keys [chat-id banner-opacity top-offset]} latest-pin-text pins-count]
  (let [theme (quo.theme/use-theme)]
    [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)}
-     [blur/view
+     [quo/blur
      {:style       style/container
       :blur-radius (if platform/ios? 20 10)
       :blur-type   theme
--- a/src/status_im/contexts/communities/overview/view.cljs
+++ b/src/status_im/contexts/communities/overview/view.cljs
@ -4,7 +4,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.safe-area :as safe-area]
    [reagent.core :as reagent]
@ -271,7 +270,7 @@
  [_]
  (fn [{:keys [enabled label]}]
    (when enabled
-      [blur/view
+      [quo/blur
       {:style         style/blur-channel-header
        :blur-amount   20
        :blur-type     :transparent
--- a/src/status_im/contexts/onboarding/common/background/style.cljs
+++ b/src/status_im/contexts/onboarding/common/background/style.cljs
@ -1,6 +1,7 @@
 (ns status-im.contexts.onboarding.common.background.style
  (:require
-    [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]))

 (def background-container
  {:background-color colors/neutral-95
@ -18,4 +19,4 @@
   :top              0
   :bottom           0
   :right            0
-   :background-color colors/neutral-80-opa-80-blur})
+   :background-color (when platform/ios? colors/neutral-80-opa-80-blur)})
--- a/src/status_im/contexts/onboarding/common/background/view.cljs
+++ b/src/status_im/contexts/onboarding/common/background/view.cljs
@ -1,8 +1,8 @@
 (ns status-im.contexts.onboarding.common.background.view
  (:require
    [oops.core :refer [oget]]
+    [quo.core :as quo]
    [react-native.async-storage :as async-storage]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
@ -89,7 +89,7 @@
       :gesture           :swipeable
       :background        [background-image (* 4 window-width)]}]
     (when dark-overlay?
-       [blur/view
+       [quo/blur
        {:style         style/background-blur-overlay
         :blur-amount   (if platform/android? 30 20)
         :blur-radius   (if platform/android? 25 10)
--- a/src/status_im/contexts/onboarding/common/overlay/style.cljs
+++ b/src/status_im/contexts/onboarding/common/overlay/style.cljs
@ -1,6 +1,7 @@
 (ns status-im.contexts.onboarding.common.overlay.style
  (:require
    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]))

 (defn blur-container
@ -15,4 +16,4 @@

 (def blur-style
  {:flex             1
-   :background-color colors/neutral-80-opa-80-blur})
+   :background-color (when platform/ios? colors/neutral-80-opa-80-blur)})
--- a/src/status_im/contexts/onboarding/common/overlay/view.cljs
+++ b/src/status_im/contexts/onboarding/common/overlay/view.cljs
@ -1,6 +1,6 @@
 (ns status-im.contexts.onboarding.common.overlay.view
  (:require
-    [react-native.blur :as blur]
+    [quo.core :as quo]
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
@ -65,7 +65,7 @@
    [reanimated/view
     {:pointer-events :none
      :style          (style/blur-container opacity)}
-     [blur/view
+     [quo/blur
      {:blur-amount   @blur-amount
       :blur-radius   (if platform/android? 25 10)
       :blur-type     :transparent
--- a/src/status_im/contexts/onboarding/create_profile/view.cljs
+++ b/src/status_im/contexts/onboarding/create_profile/view.cljs
@ -4,7 +4,6 @@
    [oops.core :as oops]
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.hooks :as hooks]
    [react-native.platform :as platform]
@ -43,7 +42,7 @@
    [rn/view {:style {:margin-top :auto}}
     (cond
       (and (> @height 0) show-background?)
-       [blur/ios-view
+       [quo/blur
        (when keyboard-shown
          {:blur-amount      34
           :blur-type        :transparent
--- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
+++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
@ -1,7 +1,6 @@
 (ns status-im.contexts.preview.quo.gradient.gradient-cover
  (:require
    [quo.core :as quo]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im.common.resources :as resources]
@ -63,7 +62,7 @@
           [rn/image
            {:style  {:height 332}
             :source (resources/get-mock-image :dark-blur-bg)}])
-         [(if @blur? blur/view rn/view)
+         [(if @blur? quo/blur rn/view)
          {:style     {:height           332
                       :padding-vertical 40}
           :blur-type :dark}
--- a/src/status_im/contexts/preview/quo/preview.cljs
+++ b/src/status_im/contexts/preview/quo/preview.cljs
@ -6,7 +6,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.clipboard :as clipboard]
    [react-native.core :as rn]
    [react-native.safe-area :as safe-area]
@ -351,7 +350,7 @@
      [rn/image
       {:source (or image (resources/get-mock-image :dark-blur-bg))
        :style  {:height "100%" :width "100%"}}]
-      [blur/view
+      [quo/blur
       (merge {:style         {:position :absolute
                               :top      0
                               :bottom   0
--- a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs
+++ b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs
@ -8,7 +8,9 @@
 (defn bottom-tabs-container
  [pass-through? height]
  [{:height height}
-   {:background-color    (if pass-through? :transparent colors/neutral-100)
+   {:background-color    (if (and platform/ios? pass-through?)
+                           :transparent
+                           colors/neutral-100)
    :flex                1
    :align-items         :center
    :height              (utils/bottom-tabs-container-height)
--- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs
+++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs
@ -1,6 +1,7 @@
 (ns status-im.contexts.shell.jump-to.components.jump-to-screen.style
  (:require
    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]
    [status-im.contexts.shell.jump-to.utils :as utils]))

 ;;;; Placeholder
@ -63,4 +64,4 @@
   :left             0
   :right            0
   :top              0
-   :background-color colors/neutral-100-opa-70-blur})
+   :background-color (when platform/ios? colors/neutral-100-opa-70-blur)})
--- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs
+++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs
@ -3,7 +3,6 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]
    [react-native.safe-area :as safe-area]
@ -84,7 +83,7 @@
  (let [pass-through? (rf/sub [:shell/shell-pass-through?])]
    [rn/view {:style (style/top-nav-blur-overlay-container (+ 56 top) pass-through?)}
     (when pass-through?
-       [blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])]))
+       [quo/blur (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])]))

 (defn view
  []
--- a/src/status_im/contexts/syncing/scan_sync_code/view.cljs
+++ b/src/status_im/contexts/syncing/scan_sync_code/view.cljs
@ -4,7 +4,6 @@
    [oops.core :as oops]
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
-    [react-native.blur :as blur]
    [react-native.camera-kit :as camera-kit]
    [react-native.core :as rn]
    [react-native.hole-view :as hole-view]
@ -254,7 +253,7 @@
   [hole-view/hole-view
    {:style style/hole
     :holes [(assoc qr-view-finder :borderRadius 16)]}
-    [blur/view
+    [quo/blur
     {:style            style/absolute-fill
      :blur-amount      10
      :blur-type        :transparent
--- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs
+++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs
@ -4,7 +4,6 @@
    [native-module.core :as native-module]
    [quo.core :as quo]
    [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.style :as
@ -86,7 +85,7 @@
               :first-half? false}]])
          (when-not @revealed?
            [rn/view {:style style/blur-container}
-             [blur/view (style/blur theme)]])]
+             [quo/blur (style/blur theme)]])]
         (when-not @revealed?
           [rn/view
            {:style {:padding-horizontal 20
--- a/src/status_im/contexts/wallet/collectible/view.cljs
+++ b/src/status_im/contexts/wallet/collectible/view.cljs
@ -83,7 +83,9 @@
                       (colors/theme-colors colors/white-opa-50 colors/neutral-95-opa-70-blur theme))]
    [rn/view {:style style/animated-header}
     [reanimated/blur-view
-      {:style         {:flex 1}
+      {:style         {:flex             1
+                       :background-color (when platform/android?
+                                           (colors/theme-colors colors/white colors/neutral-80 theme))}
       :blur-type     :transparent
       :overlay-color :transparent
       :blur-amount   blur-amount
--- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs
+++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs
@ -3,7 +3,6 @@
            [quo.core :as quo]
            [quo.foundations.colors :as colors]
            quo.theme
-            [react-native.blur :as blur]
            [react-native.clipboard :as clipboard]
            [react-native.core :as rn]
            [react-native.gesture :as gesture]
@ -43,7 +42,7 @@
     {:on-layout #(reset! options-height (oops/oget % "nativeEvent.layout.height"))
      :style     (when show-account-selector? style/options-container)}
     (when show-account-selector?
-       [blur/view
+       [quo/blur
        {:style         (style/blur-container @options-height)
         :blur-radius   (if platform/android? 20 10)
         :blur-amount   (if platform/ios? 20 10)
--- a/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs
+++ b/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs
@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.sheets.network-preferences.style
-  (:require [quo.foundations.colors :as colors]))
+  (:require [quo.foundations.colors :as colors]
+            [react-native.platform :as platform]))

 (def blur
  {:position      :absolute
@ -7,7 +8,7 @@
   :left          0
   :right         0
   :bottom        0
-   :overlay-color colors/neutral-100-opa-70-blur})
+   :overlay-color (when platform/ios? colors/neutral-100-opa-70-blur)})

 (def data-item
  {:margin-horizontal 20
--- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs
+++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs
@ -1,8 +1,8 @@
 (ns status-im.contexts.wallet.sheets.network-preferences.view
-  (:require [quo.core :as quo]
+  (:require
+    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
-            [react-native.blur :as blur]
    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im.constants :as constants]
@ -64,7 +64,7 @@
        [:<>
         ;; quo/overlay isn't compatible with sheets
         (when blur?
-           [blur/view
+           [quo/blur
            {:style       style/blur
             :blur-amount 20
             :blur-radius 25}])