[#19351] fix: reviewer feedbacks, use animated style js

src/js/worklets/profile_header.js

@@ -0,0 +1,13 @@
+import { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+export function profileHeaderAnimation(scrollY, threshold, topBarHeight) {
+  return useAnimatedStyle(() => {
+    const opacity = scrollY.value < threshold ? withTiming(0) : withTiming(1);
+    const translateY = scrollY.value < threshold ? withTiming(topBarHeight) : withTiming(0);
+
+    return {
+      opacity: opacity,
+      transform: [{ translateY: translateY }],
+    };
+  });
+}

src/quo/components/navigation/page_nav/style.cljs

@@ -1,7 +1,6 @@
 (ns quo.components.navigation.page-nav.style
   (:require
-    [quo.foundations.colors :as colors]
-    [react-native.reanimated :as reanimated]))
+    [quo.foundations.colors :as colors]))
 
 (defn container
   [margin-top]
@@ -22,16 +21,6 @@
    :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 [{:translate-y translate-animation}]
-      :opacity   opacity-animation}
-     (center-content-container centered? center-opacity))
-    (center-content-container centered? center-opacity)))
-
-
 (def right-actions-container
   {:flex-direction :row})
 

src/quo/components/navigation/page_nav/view.cljs

@@ -13,7 +13,7 @@
     [quo.theme :as theme]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
-    [utils.worklets.header :as header-worklet]))
+    [utils.worklets.profile-header :as header-worklet]))
 
 (def ^:private button-type
   {:white       :grey
@@ -93,18 +93,13 @@
 
 (defn- title-center
   [{:keys [centered? title center-opacity scroll-y]}]
-  (let [translate-animation (when scroll-y
-                              (header-worklet/header-content-position scroll-y
-                                                                      threshold
-                                                                      page-nav-height))
-        opacity-animation   (when scroll-y
-                              (header-worklet/header-content-opacity scroll-y threshold))]
+  (let [animated-style (when scroll-y
+                         (header-worklet/profile-header-animation scroll-y
+                                                                  threshold
+                                                                  page-nav-height))]
     [reanimated/view
-     {:style (style/center-content-container-animation {:has-animations?     (some? scroll-y)
-                                                        :centered?           centered?
-                                                        :center-opacity      center-opacity
-                                                        :translate-animation translate-animation
-                                                        :opacity-animation   opacity-animation})}
+     {:style [(style/center-content-container centered? center-opacity)
+              animated-style]}
      [text/text
       {:weight          :medium
        :size            :paragraph-1

src/utils/worklets/profile_header.cljs

@@ -0,0 +1,10 @@
+(ns utils.worklets.profile-header)
+
+(def ^:private worklets (js/require "../src/js/worklets/profile_header.js"))
+
+(defn profile-header-animation
+  [scroll-y threshold top-bar-height]
+  (.profileHeaderAnimation ^js worklets
+                           scroll-y
+                           threshold
+                           top-bar-height))