From 4fefa629fc0c9081288c298fc2702f5f34c6b241 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Tue, 18 Apr 2023 16:25:33 +0530 Subject: [PATCH] Use static background screen for onboarding screens with dark overlay (#15666) --- .../onboarding/common/background/view.cljs | 23 ++++++------ .../onboarding/common/carousel/animation.cljs | 24 ++++++++----- .../onboarding/common/carousel/style.cljs | 36 +++++++++++-------- .../onboarding/common/carousel/view.cljs | 25 +++++++------ 4 files changed, 63 insertions(+), 45 deletions(-) diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index 571485a6be..94a2dbd09d 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -9,14 +9,15 @@ [dark-overlay?] [:f> (fn [] - (carousel.animation/initialize-animation) - [rn/view - {:style style/background-container} - [carousel/view dark-overlay?] - (when dark-overlay? - [blur/view - {:style style/background-blur-overlay - :blur-amount 30 - :blur-radius 25 - :blur-type :transparent - :overlay-color :transparent}])])]) + (let [animate? (not dark-overlay?)] + (when animate? (carousel.animation/initialize-animation)) + [rn/view + {:style style/background-container} + [carousel/view animate?] + (when dark-overlay? + [blur/view + {:style style/background-blur-overlay + :blur-amount 30 + :blur-radius 25 + :blur-type :transparent + :overlay-color :transparent}])]))]) diff --git a/src/status_im2/contexts/onboarding/common/carousel/animation.cljs b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs index 61535c2478..d007774edd 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/animation.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs @@ -35,16 +35,22 @@ (defn initialize-animation [] - (when-not @progress - (reset! progress (reanimated/use-shared-value 0)) - (reset! paused (reanimated/use-shared-value false)) - (animate-progress @progress @paused))) + (reset! progress (reanimated/use-shared-value 0)) + (reset! paused (reanimated/use-shared-value false)) + (animate-progress @progress @paused)) -;; Derived Values (defn carousel-left-position - [window-width] - (worklets.onboarding-carousel/carousel-left-position window-width @progress)) + [window-width animate?] + (if animate? + (worklets.onboarding-carousel/carousel-left-position window-width @progress) + (-> (or (reanimated/get-shared-value @progress) 0) + (quot -25) + (* window-width)))) (defn dynamic-progress-bar-width - [progress-bar-width] - (worklets.onboarding-carousel/dynamic-progress-bar-width progress-bar-width @progress)) + [progress-bar-width animate?] + (if animate? + (worklets.onboarding-carousel/dynamic-progress-bar-width progress-bar-width @progress) + (-> (or (reanimated/get-shared-value @progress) 0) + (* progress-bar-width) + (/ 100)))) diff --git a/src/status_im2/contexts/onboarding/common/carousel/style.cljs b/src/status_im2/contexts/onboarding/common/carousel/style.cljs index bd323ab9fb..966b376388 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/style.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/style.cljs @@ -48,12 +48,16 @@ :flex-direction :row}) (defn dynamic-progress-bar - [width] - (reanimated/apply-animations-to-style - {:width width} - {:height 2 - :border-radius 4 - :overflow :hidden})) + [width animate?] + (let [normal-style {:height 2 + :border-radius 4 + :overflow :hidden + :width width}] + (if animate? + (reanimated/apply-animations-to-style + {:width width} + normal-style) + normal-style))) (defn progress-bar-container [progress-bar-width status-bar-height] @@ -63,11 +67,15 @@ :top (+ 12 status-bar-height)}) (defn carousel-container - [left] - (reanimated/apply-animations-to-style - {:left left} - {:position :absolute - :right 0 - :top 0 - :bottom 0 - :flex-direction :row})) + [left animate?] + (let [normal-style {:position :absolute + :right 0 + :top 0 + :bottom 0 + :flex-direction :row + :left left}] + (if animate? + (reanimated/apply-animations-to-style + {:left left} + normal-style) + normal-style))) diff --git a/src/status_im2/contexts/onboarding/common/carousel/view.cljs b/src/status_im2/contexts/onboarding/common/carousel/view.cljs index 7f33370df8..636774e946 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/view.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/view.cljs @@ -54,30 +54,33 @@ [rn/view {:style (style/progress-bar-item static? true)}]]) (defn dynamic-progress-bar - [progress-bar-width] + [progress-bar-width animate?] [:f> (fn [] - (let [width (animation/dynamic-progress-bar-width progress-bar-width)] - [reanimated/view {:style (style/dynamic-progress-bar width)} + (let [width (animation/dynamic-progress-bar-width progress-bar-width animate?) + container-view (if animate? reanimated/view rn/view)] + [container-view {:style (style/dynamic-progress-bar width animate?)} [progress-bar {:static? false :progress-bar-width progress-bar-width}]]))]) (defn view - [] + [animate?] [:f> (fn [] (let [window-width (rf/sub [:dimensions/window-width]) view-id (rf/sub [:view-id]) status-bar-height (:status-bar-height @navigation/constants) progress-bar-width (- window-width 40) - carousel-left (animation/carousel-left-position window-width)] - (rn/use-effect - (fn [] - (reanimated/set-shared-value @animation/paused (not= view-id :intro))) - [view-id]) + carousel-left (animation/carousel-left-position window-width animate?) + container-view (if animate? reanimated/view rn/view)] + (when animate? + (rn/use-effect + (fn [] + (reanimated/set-shared-value @animation/paused (not= view-id :intro))) + [view-id])) [:<> - [reanimated/view {:style (style/carousel-container carousel-left)} + [container-view {:style (style/carousel-container carousel-left animate?)} (for [index (range 2)] ^{:key index} [content-view @@ -91,5 +94,5 @@ [progress-bar {:static? true :progress-bar-width progress-bar-width}] - [dynamic-progress-bar progress-bar-width]]]))]) + [dynamic-progress-bar progress-bar-width animate?]]]))])