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 (ns quo2.foundations.colors
(:require [clojure.string :as string] (:require [clojure.string :as string]
[react-native.platform :as platform]
[quo2.theme :as theme])) [quo2.theme :as theme]))
(defn alpha (defn alpha
@ -126,12 +127,13 @@
(def neutral-5-opa-70-blur (alpha neutral-5 0.7)) (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-10-blur (alpha neutral-10 0.1))
(def neutral-10-opa-40-blur (alpha neutral-10 0.4)) (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-10-blur (alpha neutral-90 0.1))
(def neutral-90-opa-40-blur (alpha neutral-90 0.4)) (def neutral-90-opa-40-blur (alpha neutral-90 0.4))
(def neutral-90-opa-70-blur (alpha neutral-90 0.7)) (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
(def neutral-95-opa-70-blur neutral-95-opa-70) (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 ;;;;Black

View File

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

View File

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

View File

@ -27,10 +27,13 @@
:flex 1 :flex 1
:accessibility-label :bottom-tabs}) :accessibility-label :bottom-tabs})
(def bottom-tabs-blur-overlay (defn bottom-tabs-blur-overlay
{:position :absolute [height]
:left 0 (reanimated/apply-animations-to-style
:right 0 {:height height}
:bottom 0 {:position :absolute
:height (utils/bottom-tabs-extended-container-height) :left 0
:background-color colors/neutral-100-opa-70}) :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 (ns status-im2.contexts.shell.jump-to.components.bottom-tabs.view
(:require [utils.re-frame :as rf] (:require [utils.re-frame :as rf]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.blur :as blur]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im2.contexts.shell.jump-to.utils :as utils] [status-im2.contexts.shell.jump-to.utils :as utils]
[status-im2.contexts.shell.jump-to.state :as state] [status-im2.contexts.shell.jump-to.state :as state]
@ -14,8 +14,8 @@
(defn blur-overlay-params (defn blur-overlay-params
[style] [style]
{:style style {:style style
:blur-amount 30 :blur-amount (if platform/android? 30 20)
:blur-radius 25 :blur-radius (if platform/android? 25 10)
:blur-type :transparent :blur-type :transparent
:overlay-color :transparent}) :overlay-color :transparent})
@ -53,13 +53,15 @@
(gesture/number-of-taps 2) (gesture/number-of-taps 2)
(gesture/on-start (gesture/on-start
(fn [_event] (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) (utils/load-stack @state/selected-stack-id)
(reanimated/set-shared-value (:pass-through? shared-values) pass-through?) (reanimated/set-shared-value (:pass-through? shared-values) pass-through?)
[reanimated/view [reanimated/view
{:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))} {:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))}
(when pass-through? (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)} [rn/view {:style (style/bottom-tabs)}
[gesture/gesture-detector {:gesture communities-double-tab-gesture} [gesture/gesture-detector {:gesture communities-double-tab-gesture}
[bottom-tab :i/communities :communities-stack shared-values notifications-data]] [bottom-tab :i/communities :communities-stack shared-values notifications-data]]

View File

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