Skip to content

Commit b1b8145

Browse files
OmarBasemOmarBasem
committed
# This is a combination of 7 commits.
# This is the 1st commit message: updates status-im/status-go@1d9d734...fc03393 # This is the commit message #2: updates # This is the commit message #3: test # This is the commit message #4: updates # This is the commit message #5: feat: animated-header-list status-im/status-go@1d9d734...fc03393 # This is the commit message #6: lint # This is the commit message #7: refactor
1 parent 55caf02 commit b1b8145

File tree

6 files changed

+251
-2
lines changed

6 files changed

+251
-2
lines changed

‎src/react_native/reanimated.cljs

+5-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
SlideOutUp
1616
LinearTransition)]
1717
[reagent.core :as reagent]
18+
[react-native.flat-list :as rn-flat-list]
1819
[utils.collection]))
1920

2021
;; Animations
@@ -27,6 +28,10 @@
2728

2829
(def view (reagent/adapt-react-class (.-View reanimated)))
2930
(def image (reagent/adapt-react-class (.-Image reanimated)))
31+
(def reanimated-flat-list (reagent/adapt-react-class (.-FlatList reanimated)))
32+
(defn flat-list
33+
[props]
34+
[reanimated-flat-list (rn-flat-list/base-list-props props)])
3035
(def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
3136

3237
(def linear-gradient (create-animated-component LinearGradient))
@@ -35,7 +40,6 @@
3540
;; Hooks
3641
(def use-shared-value useSharedValue)
3742
(def use-animated-style useAnimatedStyle)
38-
3943
;; Animations
4044
(def with-timing withTiming)
4145
(def with-delay withDelay)

‎src/status_im2/common/animated_header_list/style.cljs

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
(ns status-im2.common.animated-header-list.style
2+
(:require [quo2.foundations.colors :as colors]
3+
[react-native.reanimated :as reanimated]))
4+
5+
(defn container-view
6+
[view-height theme-color]
7+
{:position :absolute
8+
:top 0
9+
:left 0
10+
:right 0
11+
;; height must be set, otherwise list will not scroll
12+
:height view-height})
13+
14+
(defn button-container
15+
[position]
16+
(merge
17+
{:width 32
18+
:height 32
19+
:border-radius 10
20+
:justify-content :center
21+
:align-items :center
22+
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
23+
:position :absolute
24+
:top 56
25+
:z-index 3}
26+
position))
27+
28+
(defn blur-view
29+
[animation]
30+
(reanimated/apply-animations-to-style
31+
{:transform [{:translateY animation}]}
32+
{:position :absolute
33+
:top 0
34+
:left 0
35+
:right 0
36+
:height 100
37+
:z-index 2}))
38+
39+
(defn entity-picture
40+
[animation]
41+
(reanimated/apply-animations-to-style
42+
{:transform [{:scale animation}]}
43+
{:width 80
44+
:height 80
45+
:border-radius 40
46+
:position :absolute
47+
:bottom 0
48+
:left 20
49+
:justify-content :center
50+
:align-items :center
51+
:background-color (colors/theme-colors colors/white colors/neutral-95)
52+
:overflow :hidden}))
53+
54+
(def header-bottom-part
55+
{:position :absolute
56+
:bottom 0
57+
:height 44
58+
:left 0
59+
:right 0
60+
:background-color (colors/theme-colors colors/white colors/neutral-95)
61+
:border-top-right-radius 16
62+
:border-top-left-radius 16})
63+
64+
(defn title-comp
65+
[animation]
66+
(reanimated/apply-animations-to-style
67+
{:opacity animation}
68+
{:position :absolute
69+
:top 56
70+
:left 64
71+
:z-index 3}))

‎src/status_im2/common/animated_header_list/test_screen.cljs

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
(ns status-im2.common.animated-header-list.test-screen
2+
(:require
3+
[quo2.core :as quo]
4+
[quo2.foundations.colors :as colors]
5+
[react-native.core :as rn]
6+
[react-native.fast-image :as fast-image]
7+
[status-im2.common.animated-header-list.view :as animated-header-list]))
8+
9+
;; THIS IS A TEMPORARY SCREEN. WILL REMOVE AFTER QA TESTING.
10+
11+
(def data [0 1 2 3 4 5 6 7 8 9 10])
12+
13+
(defn child
14+
[]
15+
[rn/view
16+
{:style {:height 100
17+
:background-color colors/primary-50-opa-40
18+
:margin 10
19+
:justify-content :center
20+
:padding-left 10}}
21+
[rn/text "This is some message!!!!!"]])
22+
23+
24+
(defn main-comp
25+
[]
26+
[rn/flat-list
27+
{:data data
28+
:render-fn child
29+
:key-fn (fn [item] (str item))}])
30+
31+
(defn display-picture-comp
32+
[]
33+
[fast-image/fast-image
34+
{:style {:width 72
35+
:height 72
36+
:border-radius 72}
37+
:source {:uri
38+
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"}}])
39+
40+
(defn title-comp
41+
[]
42+
[rn/view
43+
{:style {:flex-direction :row
44+
:justify-content :center
45+
:align-items :center}}
46+
[fast-image/fast-image
47+
{:source {:uri
48+
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"}
49+
:style {:width 32
50+
:height 32
51+
:border-radius 16
52+
:margin-right 8}}]
53+
[quo/text {:weight :semi-bold} "Alecia Keys"]])
54+
55+
(def theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2))
56+
57+
(def parameters
58+
{:theme-color theme-color
59+
:cover-uri
60+
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/kitten-playing-with-toy-mouse-royalty-free-image-590055188-1542816918.jpg?crop=1.00xw:0.758xh;0,0.132xh&resize=480:*"
61+
:display-picture-comp display-picture-comp
62+
:title-comp title-comp
63+
:main-comp main-comp})
64+
65+
(defn test-screen
66+
[]
67+
[animated-header-list/animated-header-list parameters])
68+
69+

‎src/status_im2/common/animated_header_list/view.cljs

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
(ns status-im2.common.animated-header-list.view
2+
(:require
3+
[quo2.core :as quo]
4+
[react-native.core :as rn]
5+
[react-native.platform :as platform]
6+
[react-native.reanimated :as reanimated]
7+
[react-native.safe-area :as safe-area]
8+
[reagent.core :as reagent]
9+
[quo2.foundations.colors :as colors]
10+
[status-im.ui.components.fast-image :as fast-image]
11+
[status-im2.common.animated-header-list.style :as style]
12+
[oops.core :as oops]
13+
[utils.re-frame :as rf]))
14+
15+
(def header-height 192)
16+
17+
(def threshold (/ header-height 2))
18+
19+
(defn scroll-handler
20+
[event initial-y scroll-y opacity-value]
21+
(let [current-y (- (oops/oget event "nativeEvent.contentOffset.y") initial-y)]
22+
(reanimated/set-shared-value scroll-y current-y)
23+
(reanimated/set-shared-value opacity-value
24+
(reanimated/with-timing (if (> current-y threshold) 1 0)))))
25+
26+
(defn header
27+
[{:keys [theme-color display-picture-comp cover-uri]} top-inset scroll-y]
28+
(let [input-range [0 threshold]
29+
output-range [1 0.4]
30+
scale-animation (reanimated/interpolate scroll-y
31+
input-range
32+
output-range
33+
{:extrapolateLeft "clamp"
34+
:extrapolateRight "clamp"})]
35+
[rn/view
36+
{:style {:height header-height
37+
:background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95))
38+
:margin-top (when platform/ios? (- top-inset))}}
39+
(when cover-uri
40+
[fast-image/fast-image
41+
{:style {:width "100%"
42+
:height "100%"}
43+
:source {:uri cover-uri}}])
44+
[rn/view {:style style/header-bottom-part}]
45+
[reanimated/view {:style (style/entity-picture scale-animation)}
46+
[display-picture-comp]]]))
47+
48+
(defn animated-header-list
49+
[{:keys [title-comp theme-color main-comp] :as parameters}]
50+
[safe-area/consumer
51+
(fn [insets]
52+
(let [window-height (:height (rn/get-window))
53+
status-bar-height (rn/status-bar-height)
54+
bottom-inset (:bottom insets)
55+
;; view height calculation is different because window height is different on iOS and Android:
56+
;; https://i.stack.imgur.com/LSyW5.png
57+
view-height (if platform/ios?
58+
(- window-height bottom-inset)
59+
(+ window-height status-bar-height))
60+
input-range [0 threshold]
61+
output-range [-100 0]
62+
initial-y (if platform/ios? (- (:top insets)) 0)]
63+
[:f>
64+
(fn []
65+
(let [scroll-y (reanimated/use-shared-value initial-y)
66+
translate-animation (reanimated/interpolate scroll-y
67+
input-range
68+
output-range
69+
{:extrapolateLeft "clamp"
70+
:extrapolateRight "clamp"})
71+
opacity-value (reanimated/use-shared-value 0)]
72+
[rn/view {:style (style/container-view view-height theme-color)}
73+
[rn/touchable-opacity
74+
{:active-opacity 1
75+
:on-press #(rf/dispatch [:navigate-back])
76+
:style (style/button-container {:left 20})}
77+
[quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
78+
[rn/touchable-opacity
79+
{:active-opacity 1
80+
:style (style/button-container {:right 20})}
81+
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
82+
[reanimated/view {:style (style/title-comp opacity-value)}
83+
[title-comp]]
84+
[reanimated/blur-view
85+
{:blurAmount 32
86+
:blurType :light
87+
:overlayColor (if platform/ios? colors/white-opa-70 :transparent)
88+
:style (style/blur-view translate-animation)}]
89+
[reanimated/flat-list
90+
{:data [nil]
91+
:render-fn main-comp
92+
:key-fn (fn [i] (str i))
93+
:header (reagent/as-element (header parameters (:top insets) scroll-y))
94+
:scroll-event-throttle 8
95+
:on-scroll (fn [event] (scroll-handler event initial-y scroll-y opacity-value))}]]))]))])
96+
97+

‎src/status_im2/contexts/chat/home/view.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@
6868
[:<>
6969
[quo/discover-card
7070
{:title (i18n/label :t/invite-friends-to-status)
71-
:description (i18n/label :t/share-invite-link)}]
71+
:description (i18n/label :t/share-invite-link)
72+
;; TEMPORARY. WILL REMOVE AFTER QA TESTING.
73+
:on-press #(rf/dispatch [:navigate-to :animated-header-list])}]
7274
[quo/tabs
7375
{:style {:margin-left 20
7476
:margin-bottom 20

‎src/status_im2/navigation/screens.cljs

+6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
[status-im2.contexts.shell.view :as shell]
1010
[status-im2.contexts.syncing.view :as settings-syncing]
1111
[status-im2.contexts.chat.images-horizontal.view :as images-horizontal]
12+
[status-im2.common.animated-header-list.test-screen :as test-screen]
1213
[status-im2.config :as config]
1314
[quo.design-system.colors :as colors]))
1415

@@ -51,6 +52,11 @@
5152
:options {:topBar {:visible false}}
5253
:component communities.discover/discover}
5354

55+
;; THIS IS A TEMPORARY SCREEN. WILL REMOVE AFTER QA TESTING.
56+
{:name :animated-header-list
57+
:options {:topBar {:visible false}}
58+
:component test-screen/test-screen}
59+
5460
{:name :community-overview
5561
:options {:topBar {:visible false}}
5662
:component communities.overview/overview}

0 commit comments

Comments
 (0)