Remove blur from android #20249 (#20308)

This commit is contained in:
flexsurfer 2024-06-07 14:28:28 +02:00 committed by GitHub
parent d43e8881ef
commit cedd4900d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 112 additions and 90 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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