[#19351] fix: animate username in profile

status-im · Mar 22, 2024 · bcfb859 · bcfb859
1 parent a716f4e
commit bcfb859
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/quo/components/navigation/page_nav/style.cljs b/src/quo/components/navigation/page_nav/style.cljs
@@ -1,6 +1,7 @@
 (ns quo.components.navigation.page-nav.style
   (:require
-    [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]
+    [react-native.reanimated :as reanimated]))
 
 (defn container
   [margin-top]
@@ -21,6 +22,16 @@
    :justify-content   (if centered? :center :flex-start)
    :opacity           center-opacity})
 
+(defn center-content-container-animation
+  [{:keys [centered? center-opacity has-animations? translate-animation opacity-animation]}]
+  (if has-animations?
+    (reanimated/apply-animations-to-style
+     {:transform [{:translateY translate-animation}]
+      :opacity   opacity-animation}
+     (center-content-container centered? center-opacity))
+    (center-content-container centered? center-opacity)))
+
+
 (def right-actions-container
   {:flex-direction :row})
 

diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs
@@ -11,7 +11,8 @@
     [quo.components.markdown.text :as text]
     [quo.components.navigation.page-nav.style :as style]
     [quo.theme :as theme]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]))
 
 (def ^:private button-type
   {:white       :grey
@@ -85,14 +86,35 @@
      :else
      nil)])
 
+(defn interpolate
+  [value input-range output-range]
+  (reanimated/interpolate value
+                          input-range
+                          output-range
+                          {:extrapolateLeft  "clamp"
+                           :extrapolateRight "clamp"}))
+
+(def header-height 234)
+(def blur-view-height 55)
+(def threshold (- header-height blur-view-height))
+
 (defn- title-center
-  [{:keys [centered? title center-opacity]}]
-  [rn/view {:style (style/center-content-container centered? center-opacity)}
-   [text/text
-    {:weight          :medium
-     :size            :paragraph-1
-     :number-of-lines 1}
-    title]])
+  [{:keys [centered? title center-opacity scroll-y]}]
+  (let [translate-animation (when scroll-y
+                              (interpolate scroll-y [(* threshold 0.66) threshold] [25 0]))
+        opacity-animation   (when scroll-y
+                              (interpolate scroll-y [(* threshold 0.66) threshold] [0 1]))]
+    [reanimated/view
+     {:style (style/center-content-container-animation {:has-animations?     (not (nil? scroll-y))
+                                                        :centered?           centered?
+                                                        :center-opacity      center-opacity
+                                                        :translate-animation translate-animation
+                                                        :opacity-animation   opacity-animation})}
+     [text/text
+      {:weight          :medium
+       :size            :paragraph-1
+       :number-of-lines 1}
+      title]]))
 
 (defn- dropdown-center
   [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}]
@@ -295,6 +317,7 @@
   `:title`
     - title
     - text-align: `:center` or `:left`
+    - scroll-y: a shared value (optional)
    `:dropdown`
     - dropdown-on-press:  a callback
     - dropdown-selected?: a boolean

diff --git a/src/status_im/contexts/profile/settings/view.cljs b/src/status_im/contexts/profile/settings/view.cljs
@@ -9,6 +9,7 @@
             [status-im.contexts.profile.settings.header.view :as settings.header]
             [status-im.contexts.profile.settings.list-items :as settings.items]
             [status-im.contexts.profile.settings.style :as style]
+            [status-im.contexts.profile.utils :as profile.utils]
             [utils.debounce :as debounce]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -42,15 +43,21 @@
   (let [insets              (safe-area/get-insets)
         customization-color (rf/sub [:profile/customization-color])
         scroll-y            (reanimated/use-shared-value 0)
-        logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])]
+        logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])
+        profile             (rf/sub [:profile/profile])
+        full-name           (profile.utils/displayed-name profile)]
     [quo/overlay {:type :shell}
      [rn/view
       {:key   :header
        :style (style/navigation-wrapper {:customization-color customization-color
                                          :inset               (:top insets)
                                          :theme               theme})}
       [quo/page-nav
-       {:background :blur
+       {:title      full-name
+        :background :blur
+        :type       :title
+        :text-align :left
+        :scroll-y   scroll-y
         :icon-name  :i/close
         :on-press   #(rf/dispatch [:navigate-back])
         :right-side [{:icon-name :i/multi-profile :on-press #(rf/dispatch [:open-modal :sign-in])}