parent
4d7b1baace
commit
26eeb43569
|
@ -17,6 +17,10 @@
|
|||
[scroll-shared-value]
|
||||
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp))
|
||||
|
||||
(defn- animated-card-translation-y-reverse
|
||||
[scroll-shared-value]
|
||||
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
|
||||
|
||||
(defn banner-card-blur-layer
|
||||
[scroll-shared-value]
|
||||
(reanimated/apply-animations-to-style
|
||||
|
@ -30,13 +34,15 @@
|
|||
:height (+ (safe-area/get-top) 244)}))
|
||||
|
||||
(defn banner-card-hiding-layer
|
||||
[]
|
||||
[scroll-shared-value]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
|
||||
{:z-index 2
|
||||
:position :absolute
|
||||
:top 0
|
||||
:right 0
|
||||
:left 0
|
||||
:padding-top (safe-area/get-top)})
|
||||
:padding-top (safe-area/get-top)}))
|
||||
|
||||
(def animated-banner-card-container {:overflow :hidden})
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
(oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
|
||||
|
||||
(defn- banner-card-blur-layer
|
||||
[scroll-shared-value]
|
||||
[scroll-shared-value child]
|
||||
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
|
||||
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
|
||||
[blur/view
|
||||
|
@ -33,12 +33,13 @@
|
|||
:blur-type (theme/theme-value (if platform/ios? :light :xlight) :dark)
|
||||
:overlay-color (if open-sheet?
|
||||
(colors/theme-colors colors/white colors/neutral-95-opa-70)
|
||||
(theme/theme-value nil colors/neutral-95-opa-70))}]]))
|
||||
(theme/theme-value nil colors/neutral-95-opa-70))}
|
||||
child]]))
|
||||
|
||||
(defn- banner-card-hiding-layer
|
||||
[{:keys [title-props card-props scroll-shared-value]}]
|
||||
(let [customization-color (rf/sub [:profile/customization-color])]
|
||||
[rn/view {:style (style/banner-card-hiding-layer)}
|
||||
[reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
|
||||
[common.home/top-nav {:type :grey}]
|
||||
[common.home/title-column (assoc title-props :customization-color customization-color)]
|
||||
[rn/view {:style style/animated-banner-card-container}
|
||||
|
@ -65,8 +66,8 @@
|
|||
(defn animated-banner
|
||||
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
|
||||
[:<>
|
||||
[:f> banner-card-blur-layer scroll-shared-value]
|
||||
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
|
||||
[:f> banner-card-blur-layer scroll-shared-value
|
||||
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
|
||||
[:f> banner-card-tabs-layer
|
||||
{:scroll-shared-value scroll-shared-value
|
||||
:selected-tab selected-tab
|
||||
|
|
Loading…
Reference in New Issue