incomplete attempt at animation: broken

status-im · Oct 4, 2022 · 0b5ea8a · 0b5ea8a
1 parent 210c486
commit 0b5ea8a
Showing 1 changed file with 29 additions and 11 deletions.
diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs
@@ -4,6 +4,7 @@
             [quo.theme :as theme]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
+            [quo2.reanimated :as reanimated]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.avatars.icon-avatar :as icon-avatar]))
@@ -138,14 +139,31 @@
                     :style {:color (get-color :time)}}
          (:info content)])]]]])
 
-(defn system-message
-  [{:keys [type state] :as message}]
-  [rn/view {:flex-direction     :row
-            :flex               1
-            :border-radius      16
-            :padding-vertical   9
-            :padding-horizontal 11
-            :width              359
-            :height             52
-            :background-color   (get-color :bg state type)}
-   [sm-render message]])
+(defn system-message [{:keys [type state] :as message}]
+  [:f>
+   (fn []
+     (let [animated-color (reanimated/use-shared-value "red")]
+       (reanimated/animate-shared-value-with-delay animated-color "blue" 1000 :linear 1000)
+       [reanimated/view
+        {:style    (reanimated/apply-animations-to-style
+                    {:background-color animated-color}
+                    {:flex-direction     :row
+                     :flex               1
+                     :border-radius      16
+                     :padding-vertical   9
+                     :padding-horizontal 11
+                     :width              359
+                     :height             52
+                     :background-color   (get-color :bg state type)})}
+        [sm-render message]]))])
+
+;; (animate-shared-value-with-delay bg-color-anim new-color 1000 :linear 1000)
+
+;; (let [animated-color (reanimated/use-shared-value :red)]
+;;   (animate-shared-value-with-delay animated-color new-color 1000 :linear 1000)
+;;   [reanimated/view {:style (apply-animations-to-style
+;;           {:background-color animated-color]}
+;;             simple-style]
+
+;; :on-press #(animate-shared-value-with-delay bg-color-anim new-color 1000 :linear 1000)
+;; #(animation/switcher-touchable-on-press-in (:button-touchable-scale shared-values))