Remove blur from android #20249 (#20308)

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]

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

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))

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

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]

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

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]

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

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]

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

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]

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]))
 

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]))
 

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)

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)))
+(def view
-
+  (if blur
-;; blur view is currently not working correctly on Android.
+    (reagent/adapt-react-class (.-BlurView blur))
-(def ios-view (if platform/ios? view rn/view))
+    rn/view))

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)

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

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)

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]
+  (:require
-            [react-native.blur :as blur]
+    [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}

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)

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

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/theme-colors colors/white colors/neutral-80 theme)
-                         colors/white-opa-70
-                         colors/neutral-95-opa-70
-                         theme)
                         :transparent)}))
 
 (defn sticky-header-title

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

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

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

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

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)})

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)

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)})

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

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

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}

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

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)

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)})

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
   []

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

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

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

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)

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

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}])