Use static background screen for onboarding screens with dark overlay (#15666)

Author: Parveshdhull

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

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

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

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