status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-12 03:54:32 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Parvesh Monu 2023-04-18 16:25:33 +05:30 committed by GitHub
parent 41e2fffb87
commit 4fefa629fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/status_im2/contexts/onboarding/common/background/view.cljs
View File

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

24
src/status_im2/contexts/onboarding/common/carousel/animation.cljs
View File

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

36
src/status_im2/contexts/onboarding/common/carousel/style.cljs
View File

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

25
src/status_im2/contexts/onboarding/common/carousel/view.cljs
View File

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