fix ios blur blue overlay (#17015)

This commit is contained in:
Parvesh Monu 2023-08-21 16:02:17 +05:30 committed by GitHub
parent e4a2ac9cce
commit a45f353356
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 19 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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