# 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
status-im · Jan 31, 2023 · 91e7816 · 91e7816
1 parent 3692ad3
commit 91e7816
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 2 deletions.
diff --git a/src/react_native/reanimated.cljs b/src/react_native/reanimated.cljs
@@ -15,6 +15,7 @@
                              SlideOutUp
                              LinearTransition)]
             [reagent.core :as reagent]
+            [react-native.flat-list :as rn-flat-list]
             [utils.collection]))
 
 ;; Animations
@@ -27,6 +28,10 @@
 
 (def view (reagent/adapt-react-class (.-View reanimated)))
 (def image (reagent/adapt-react-class (.-Image reanimated)))
+(def reanimated-flat-list (reagent/adapt-react-class (.-FlatList reanimated)))
+(defn flat-list
+  [props]
+  [reanimated-flat-list (rn-flat-list/base-list-props props)])
 (def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
 
 (def linear-gradient (create-animated-component LinearGradient))
@@ -35,7 +40,6 @@
 ;; Hooks
 (def use-shared-value useSharedValue)
 (def use-animated-style useAnimatedStyle)
-
 ;; Animations
 (def with-timing withTiming)
 (def with-delay withDelay)

diff --git a/src/status_im2/common/animated_header_list/style.cljs b/src/status_im2/common/animated_header_list/style.cljs
@@ -0,0 +1,71 @@
+(ns status-im2.common.animated-header-list.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defn container-view
+  [view-height theme-color]
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   ;; height must be set, otherwise list will not scroll
+   :height   view-height})
+
+(defn button-container
+  [position]
+  (merge
+   {:width            32
+    :height           32
+    :border-radius    10
+    :justify-content  :center
+    :align-items      :center
+    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
+    :position         :absolute
+    :top              56
+    :z-index          3}
+   position))
+
+(defn blur-view
+  [animation]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translateY animation}]}
+   {:position :absolute
+    :top      0
+    :left     0
+    :right    0
+    :height   100
+    :z-index  2}))
+
+(defn entity-picture
+  [animation]
+  (reanimated/apply-animations-to-style
+   {:transform [{:scale animation}]}
+   {:width            80
+    :height           80
+    :border-radius    40
+    :position         :absolute
+    :bottom           0
+    :left             20
+    :justify-content  :center
+    :align-items      :center
+    :background-color (colors/theme-colors colors/white colors/neutral-95)
+    :overflow         :hidden}))
+
+(def header-bottom-part
+  {:position                :absolute
+   :bottom                  0
+   :height                  44
+   :left                    0
+   :right                   0
+   :background-color        (colors/theme-colors colors/white colors/neutral-95)
+   :border-top-right-radius 16
+   :border-top-left-radius  16})
+
+(defn title-comp
+  [animation]
+  (reanimated/apply-animations-to-style
+   {:opacity animation}
+   {:position :absolute
+    :top      56
+    :left     64
+    :z-index  3}))
diff --git a/src/status_im2/common/animated_header_list/test_screen.cljs b/src/status_im2/common/animated_header_list/test_screen.cljs
@@ -0,0 +1,69 @@
+(ns status-im2.common.animated-header-list.test-screen
+  (:require
+   [quo2.core :as quo]
+   [quo2.foundations.colors :as colors]
+   [react-native.core :as rn]
+   [react-native.fast-image :as fast-image]
+   [status-im2.common.animated-header-list.view :as animated-header-list]))
+
+;; THIS IS A TEMPORARY SCREEN. WILL REMOVE AFTER QA TESTING.
+
+(def data [0 1 2 3 4 5 6 7 8 9 10])
+
+(defn child
+  []
+  [rn/view
+   {:style {:height           100
+            :background-color colors/primary-50-opa-40
+            :margin           10
+            :justify-content  :center
+            :padding-left     10}}
+   [rn/text "This is some message!!!!!"]])
+
+
+(defn main-comp
+  []
+  [rn/flat-list
+   {:data      data
+    :render-fn child
+    :key-fn    (fn [item] (str item))}])
+
+(defn display-picture-comp
+  []
+  [fast-image/fast-image
+   {:style  {:width         72
+             :height        72
+             :border-radius 72}
+    :source {:uri
+             "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"}}])
+
+(defn title-comp
+  []
+  [rn/view
+   {:style {:flex-direction  :row
+            :justify-content :center
+            :align-items     :center}}
+   [fast-image/fast-image
+    {:source {:uri
+              "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"}
+     :style  {:width         32
+              :height        32
+              :border-radius 16
+              :margin-right  8}}]
+   [quo/text {:weight :semi-bold} "Alecia Keys"]])
+
+(def theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2))
+
+(def parameters
+  {:theme-color          theme-color
+   :cover-uri
+   "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:*"
+   :display-picture-comp display-picture-comp
+   :title-comp           title-comp
+   :main-comp            main-comp})
+
+(defn test-screen
+  []
+  [animated-header-list/animated-header-list parameters])
+
+
diff --git a/src/status_im2/common/animated_header_list/view.cljs b/src/status_im2/common/animated_header_list/view.cljs
@@ -0,0 +1,97 @@
+(ns status-im2.common.animated-header-list.view
+  (:require
+   [quo2.core :as quo]
+   [react-native.core :as rn]
+   [react-native.platform :as platform]
+   [react-native.reanimated :as reanimated]
+   [react-native.safe-area :as safe-area]
+   [reagent.core :as reagent]
+   [quo2.foundations.colors :as colors]
+   [status-im.ui.components.fast-image :as fast-image]
+   [status-im2.common.animated-header-list.style :as style]
+   [oops.core :as oops]
+   [utils.re-frame :as rf]))
+
+(def header-height 192)
+
+(def threshold (/ header-height 2))
+
+(defn scroll-handler
+  [event initial-y scroll-y opacity-value]
+  (let [current-y (- (oops/oget event "nativeEvent.contentOffset.y") initial-y)]
+    (reanimated/set-shared-value scroll-y current-y)
+    (reanimated/set-shared-value opacity-value
+                                 (reanimated/with-timing (if (> current-y threshold) 1 0)))))
+
+(defn header
+  [{:keys [theme-color display-picture-comp cover-uri]} top-inset scroll-y]
+  (let [input-range     [0 threshold]
+        output-range    [1 0.4]
+        scale-animation (reanimated/interpolate scroll-y
+                                                input-range
+                                                output-range
+                                                {:extrapolateLeft  "clamp"
+                                                 :extrapolateRight "clamp"})]
+    [rn/view
+     {:style {:height           header-height
+              :background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95))
+              :margin-top       (when platform/ios? (- top-inset))}}
+     (when cover-uri
+       [fast-image/fast-image
+        {:style  {:width  "100%"
+                  :height "100%"}
+         :source {:uri cover-uri}}])
+     [rn/view {:style style/header-bottom-part}]
+     [reanimated/view {:style (style/entity-picture scale-animation)}
+      [display-picture-comp]]]))
+
+(defn animated-header-list
+  [{:keys [title-comp theme-color main-comp] :as parameters}]
+  [safe-area/consumer
+   (fn [insets]
+     (let [window-height     (:height (rn/get-window))
+           status-bar-height (rn/status-bar-height)
+           bottom-inset      (:bottom insets)
+           ;; view height calculation is different because window height is different on iOS and Android:
+           ;; https://i.stack.imgur.com/LSyW5.png
+           view-height       (if platform/ios?
+                               (- window-height bottom-inset)
+                               (+ window-height status-bar-height))
+           input-range       [0 threshold]
+           output-range      [-100 0]
+           initial-y         (if platform/ios? (- (:top insets)) 0)]
+       [:f>
+        (fn []
+          (let [scroll-y            (reanimated/use-shared-value initial-y)
+                translate-animation (reanimated/interpolate scroll-y
+                                                            input-range
+                                                            output-range
+                                                            {:extrapolateLeft  "clamp"
+                                                             :extrapolateRight "clamp"})
+                opacity-value       (reanimated/use-shared-value 0)]
+            [rn/view {:style (style/container-view view-height theme-color)}
+             [rn/touchable-opacity
+              {:active-opacity 1
+               :on-press       #(rf/dispatch [:navigate-back])
+               :style          (style/button-container {:left 20})}
+              [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+             [rn/touchable-opacity
+              {:active-opacity 1
+               :style          (style/button-container {:right 20})}
+              [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+             [reanimated/view {:style (style/title-comp opacity-value)}
+              [title-comp]]
+             [reanimated/blur-view
+              {:blurAmount   32
+               :blurType     :light
+               :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
+               :style        (style/blur-view translate-animation)}]
+             [reanimated/flat-list
+              {:data [nil]
+               :render-fn main-comp
+               :key-fn (fn [i] (str i))
+               :header (reagent/as-element (header parameters (:top insets) scroll-y))
+               :scroll-event-throttle 8
+               :on-scroll (fn [event] (scroll-handler event initial-y scroll-y opacity-value))}]]))]))])
+
+
diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs
@@ -68,7 +68,9 @@
         [:<>
          [quo/discover-card
           {:title       (i18n/label :t/invite-friends-to-status)
-           :description (i18n/label :t/share-invite-link)}]
+           :description (i18n/label :t/share-invite-link)
+           ;; TEMPORARY. WILL REMOVE AFTER QA TESTING.
+           :on-press    #(rf/dispatch [:navigate-to :animated-header-list])}]
          [quo/tabs
           {:style          {:margin-left   20
                             :margin-bottom 20

diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs
@@ -10,6 +10,7 @@
             [status-im2.contexts.shell.view :as shell]
             [status-im2.contexts.syncing.view :as settings-syncing]
             [status-im2.contexts.chat.images-horizontal.view :as images-horizontal]
+            [status-im2.common.animated-header-list.test-screen :as test-screen]
             [status-im2.config :as config]
             [quo.design-system.colors :as colors]))
 
@@ -56,6 +57,11 @@
      :options   {:topBar {:visible false}}
      :component communities.discover/discover}
 
+    ;; THIS IS A TEMPORARY SCREEN. WILL REMOVE AFTER QA TESTING.
+    {:name      :animated-header-list
+     :options   {:topBar {:visible false}}
+     :component test-screen/test-screen}
+
     {:name      :community-overview
      :options   {:topBar {:visible false}}
      :component communities.overview/overview}