test

reabstract reanimated
test updates rebase rebase rebase https://github.com/status-im/status-go/compare/551715f4...550de3bf rebase https://github.com/status-im/status-go/compare/551715f4...550de3bf fix: image actions drawer lint fix: image action drawer refactor lint lint updates updates updates updates updates feat: zoomable image updates updates feat: zoomable image lint re-order arguments updates refactor refactor refactor refactor update event name refactor rebase feat: landscape feat: landscape udpates updates updates updates updates updates updates updates updates updates rebase updates feat: landscape mode updates updates updates updates updates updates updates feat: landscape mode feat: landscape mode add todo fix tests fix tests refactor refactor refactor refactor refactor refactor refactor refactor rollback lint rollback refactor rebase refactor fix arg feat: more lightbox gestures updates updates updates updates updates updates updates updates updates lint refactor remove extra line updates updates comment
2023-03-10 10:26:11 +04:00 · 2023-03-07 10:30:04 +04:00
37 changed files with 624 additions and 647 deletions
@@ -1,6 +1,6 @@
 (ns quo2.components.animated-header-flatlist.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn container-view
  [view-height]
@@ -27,7 +27,7 @@
 (defn blur-view
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity animation}
   {:position :absolute
    :top      0
@@ -39,7 +39,7 @@
 (defn entity-picture
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:width  animation
    :height animation}
   {:transform        [{:scale 1}]
@@ -54,7 +54,7 @@
 (defn header-bottom-part
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:border-top-right-radius animation
    :border-top-left-radius  animation}
   {:position         :absolute
@@ -66,9 +66,9 @@
 (defn header-comp
  [y-animation opacity-animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   ;; here using `left` won't work on Android, so we are using `translateX`
-   {:transform [{:translateX (reanimated/use-shared-value 64)} {:translateY y-animation}]
+   {:transform [{:translateX (ra/use-val 64)} {:translateY y-animation}]
    :opacity   opacity-animation}
   {:position :absolute
    :z-index  3}))
@@ -3,7 +3,7 @@
    [quo2.core :as quo]
    [react-native.core :as rn]
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as ra]
    [react-native.safe-area :as safe-area]
    [react-native.fast-image :as fast-image]
    [reagent.core :as reagent]
@@ -18,16 +18,16 @@
 (defn interpolate
  [value input-range output-range]
-  (reanimated/interpolate value
+  (ra/interpolate value
-                          input-range
+                  input-range
-                          output-range
+                  output-range
-                          {:extrapolateLeft  "clamp"
+                  {:extrapolateLeft  "clamp"
-                           :extrapolateRight "clamp"}))
+                   :extrapolateRight "clamp"}))
 (defn scroll-handler
  [event initial-y scroll-y]
  (let [current-y (- (oops/oget event "nativeEvent.contentOffset.y") initial-y)]
-    (reanimated/set-shared-value scroll-y current-y)))
+    (ra/set-val scroll-y current-y)))
 (defn header
  [{:keys [theme-color display-picture-comp cover-uri title-comp]} top-inset scroll-y]
@@ -45,9 +45,9 @@
        {:style  {:width  "100%"
                  :height cover-height}
         :source {:uri cover-uri}}])
-     [reanimated/view {:style (style/header-bottom-part border-animation)}
+     [ra/view {:style (style/header-bottom-part border-animation)}
      [title-comp]]
-     [reanimated/view {:style (style/entity-picture size-animation)}
+     [ra/view {:style (style/entity-picture size-animation)}
      [display-picture-comp image-animation]]]))
 (defn animated-header-list
@@ -64,7 +64,7 @@
           initial-y         (if platform/ios? (- (:top insets)) 0)]
       [:f>
        (fn []
-          (let [scroll-y                (reanimated/use-shared-value initial-y)
+          (let [scroll-y                (ra/use-val initial-y)
                opacity-animation       (interpolate scroll-y
                                                     [(* threshold 0.33) (* threshold 0.66)]
                                                     [0 1])
@@ -80,14 +80,14 @@
              {:active-opacity 1
               :style          (style/button-container {:right 20})}
              [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
-             [reanimated/blur-view
+             [ra/blur-view
              {:blurAmount   32
               :blurType     :light
               :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
               :style        (style/blur-view opacity-animation)}
-              [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
+              [ra/view {:style (style/header-comp translate-animation title-opacity-animation)}
               [header-comp]]]
-             [reanimated/flat-list
+             [ra/flat-list
              {:data                  [nil]
               :render-fn             main-comp
               :key-fn                str
@@ -3,16 +3,16 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))
 (defn apply-anim
  [dd-height val]
-  (reanimated/animate-shared-value-with-delay dd-height
+  (ra/animate-delay dd-height
-                                              val
+                    val
-                                              300
+                    0
-                                              :easing1
+                    300
-                                              0))
+                    :easing1))
 (def sizes
  {:big    {:icon-size 20
@@ -141,7 +141,7 @@
  [:f>
   (fn []
     (let [open?     (reagent/atom false)
-           dd-height (reanimated/use-shared-value 0)]
+           dd-height (ra/use-val 0)]
       [rn/view {:style {:flex-grow 1}}
        [dropdown-comp
         {:items        items
@@ -155,8 +155,8 @@
          :default-item default-item
          :open?        open?
          :dd-height    dd-height}]
-        [reanimated/view
+        [ra/view
-         {:style (reanimated/apply-animations-to-style
+         {:style (ra/apply-animations-to-style
                  {:height dd-height}
                  {:height dd-height})}
         [items-comp
@@ -4,7 +4,7 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))
 (def header-height 56)
@@ -162,7 +162,7 @@
               border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
            height            (+ header-height status-bar-height)]
-        [reanimated/view
+        [ra/view
         {:style (header-wrapper-style {:height        height
                                        :background    background
                                        :border-bottom border-bottom})}
@@ -2,7 +2,7 @@
  (:require [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
            [react-native.masked-view :as masked-view]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))
 (def message-skeleton-height 54)
@@ -30,12 +30,12 @@
           author-width            (content-width :author)
           message-width           (content-width :message)
           {window-width :width}   (rn/use-window-dimensions)
-           translate-x             (reanimated/use-shared-value (- window-width))
+           translate-x             (ra/use-val (- window-width))
-           animated-gradient-style (reanimated/apply-animations-to-style
+           animated-gradient-style (ra/apply-animations-to-style
                                    {:transform [{:translateX translate-x}]}
                                    {:width  window-width
                                     :height "100%"})]
-       (reanimated/animate-shared-value-with-repeat translate-x window-width 1000 :linear (- 1) false)
+       (ra/animate-repeat translate-x window-width (- 1) false 1000 :linear)
       [masked-view/masked-view
        {:style       {:height message-skeleton-height}
         :maskElement (reagent/as-element
@@ -70,7 +70,7 @@
        [rn/view
         {:style {:flex             1
                  :background-color color}}
-         [reanimated/linear-gradient
+         [ra/linear-gradient
          {:colors [color color loading-color color color]
           :start  {:x 0 :y 0}
           :end    {:x 1 :y 0}
@@ -5,7 +5,7 @@
            [quo2.foundations.colors :as colors]
            [quo2.theme :as theme]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [utils.string :as utils]))
 (def themes-landed
@@ -176,20 +176,20 @@
  [{:keys [type style non-pressable? animate-landing? labels on-long-press] :as message}]
  [:f>
   (fn []
-     (let [sv-color (reanimated/use-shared-value
+     (let [sv-color (ra/use-val
                     (get-color :bg (if animate-landing? :landed :default) type))]
       (when animate-landing?
-         (reanimated/animate-shared-value-with-delay
+         (ra/animate-delay
          sv-color
          (get-color :bg :default type)
          1000
          0
-          :linear
+          :linear))
-          1000))
+       [ra/touchable-opacity
       [reanimated/touchable-opacity
        {:on-press      #(when-not non-pressable?
-                           (reanimated/set-shared-value sv-color (get-color :bg :pressed type)))
+                           (ra/set-val sv-color (get-color :bg :pressed type)))
         :on-long-press on-long-press
-         :style         (reanimated/apply-animations-to-style
+         :style         (ra/apply-animations-to-style
                         {:background-color sv-color}
                         (merge
                          {:flex-direction     :row
@@ -5,11 +5,11 @@
            [react-native.core :as rn]
            [react-native.platform :as platform]
            [react-native.hole-view :as hole-view]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn toggle-background-color
  [background-color press-out? pass-through?]
-  (reanimated/set-shared-value
+  (ra/set-val
   background-color
   (cond
     press-out?    "transparent"
@@ -31,14 +31,14 @@
           on-press pass-through? icon-color-anim accessibility-label test-ID]}]
  [:f>
   (fn []
-     (let [icon-animated-style       (reanimated/apply-animations-to-style
+     (let [icon-animated-style       (ra/apply-animations-to-style
                                      {:tint-color icon-color-anim}
                                      {:width       24
                                       :height      24
                                       :margin-left 33
                                       :margin-top  8})
-           background-color          (reanimated/use-shared-value "transparent")
+           background-color          (ra/use-val "transparent")
-           background-animated-style (reanimated/apply-animations-to-style
+           background-animated-style (ra/apply-animations-to-style
                                      {:background-color background-color}
                                      {:width         90
                                       :height        40
@@ -49,7 +49,7 @@
         :on-press-in         #(toggle-background-color background-color false pass-through?)
         :on-press-out        #(toggle-background-color background-color true pass-through?)
         :accessibility-label accessibility-label}
-        [reanimated/view {:style background-animated-style}
+        [ra/view {:style background-animated-style}
         ;; In android animations are not working for the animated components which are nested by
         ;; hole-view,
         ;; Interestingly this only happens when hole view and blur view are used together
@@ -69,10 +69,10 @@
                      :else
                      [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
-            [reanimated/image
+            [ra/image
             {:style  icon-animated-style
              :source (icons/icon-source (keyword (str icon 24)))}]]
-           [reanimated/image
+           [ra/image
            {:style  icon-animated-style
             :source (icons/icon-source (keyword (str icon 24)))}])
         (when new-notifications?
@@ -1,7 +1,7 @@
 (ns quo2.components.navigation.floating-shell-button
  (:require [quo2.components.buttons.dynamic-button :as dynamic-button]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn dynamic-button-view
  [type dynamic-buttons style]
@@ -28,12 +28,12 @@
                                   :margin-horizontal 12
                                   :pointer-events    :box-none}
                                  style)
-            animated-style (reanimated/apply-animations-to-style
+            animated-style (ra/apply-animations-to-style
                            (if opacity-anim
                              {:opacity opacity-anim}
                              {})
                            original-style)]
-        [reanimated/view {:style animated-style}
+        [ra/view {:style animated-style}
         ;; Left Section
         [rn/view {:style {:flex 1}}
          [dynamic-button-view :search dynamic-buttons
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear-with-delay
@@ -14,14 +14,14 @@
  [recording? ready-to-delete? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity                   (reanimated/use-shared-value 0)
+     (let [opacity                   (ra/use-val 0)
-           translate-x               (reanimated/use-shared-value 20)
+           translate-x               (ra/use-val 20)
-           scale                     (reanimated/use-shared-value 1)
+           scale                     (ra/use-val 1)
-           connector-opacity         (reanimated/use-shared-value 0)
+           connector-opacity         (ra/use-val 0)
-           connector-width           (reanimated/use-shared-value 24)
+           connector-width           (ra/use-val 24)
-           connector-height          (reanimated/use-shared-value 12)
+           connector-height          (ra/use-val 12)
-           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-first-half  (ra/use-val 8)
-           border-radius-second-half (reanimated/use-shared-value 8)
+           border-radius-second-half (ra/use-val 8)
           start-x-animation         (fn []
                                       (animate-linear-with-delay translate-x 12 50 133.33)
                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
@@ -73,14 +73,14 @@
                       (reset-x-animation)))
                   [@ready-to-delete?])
       [:<>
-        [reanimated/view {:style (style/delete-button-container opacity)}
+        [ra/view {:style (style/delete-button-container opacity)}
-         [reanimated/view
+         [ra/view
          {:style (style/delete-button-connector connector-opacity
                                                 connector-width
                                                 connector-height
                                                 border-radius-first-half
                                                 border-radius-second-half)}]]
-        [reanimated/view
+        [ra/view
         {:style          (style/delete-button scale translate-x opacity)
          :pointer-events :none}
         [icons/icon :i/delete
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear-with-delay
@@ -14,13 +14,13 @@
  [recording? ready-to-lock? locked?]
  [:f>
   (fn []
-     (let [translate-x-y             (reanimated/use-shared-value 20)
+     (let [translate-x-y             (ra/use-val 20)
-           opacity                   (reanimated/use-shared-value 0)
+           opacity                   (ra/use-val 0)
-           connector-opacity         (reanimated/use-shared-value 0)
+           connector-opacity         (ra/use-val 0)
-           width                     (reanimated/use-shared-value 24)
+           width                     (ra/use-val 24)
-           height                    (reanimated/use-shared-value 12)
+           height                    (ra/use-val 12)
-           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-first-half  (ra/use-val 8)
-           border-radius-second-half (reanimated/use-shared-value 8)
+           border-radius-second-half (ra/use-val 8)
           start-x-y-animation       (fn []
                                       (animate-linear-with-delay translate-x-y 8 50 116.66)
                                       (animate-easing-with-delay connector-opacity 1 0 80)
@@ -70,14 +70,14 @@
                       (reset-x-y-animation)))
                   [@locked?])
       [:<>
-        [reanimated/view {:style (style/lock-button-container opacity)}
+        [ra/view {:style (style/lock-button-container opacity)}
-         [reanimated/view
+         [ra/view
          {:style (style/lock-button-connector connector-opacity
                                               width
                                               height
                                               border-radius-first-half
                                               border-radius-second-half)}]]
-        [reanimated/view
+        [ra/view
         {:style          (style/lock-button translate-x-y opacity)
          :pointer-events :none}
         [icons/icon (if @ready-to-lock? :i/locked :i/unlocked)
@@ -3,7 +3,7 @@
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn :refer [use-effect]]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [quo2.components.buttons.button :as button]
            [quo2.components.record-audio.record-audio.helpers :refer [set-value]]))
@@ -11,7 +11,7 @@
  [recording? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity        (reanimated/use-shared-value 1)
+     (let [opacity        (ra/use-val 1)
           show-animation #(set-value opacity 1)
           hide-animation #(set-value opacity 0)]
       (use-effect (fn []
@@ -19,7 +19,7 @@
                       (hide-animation)
                       (show-animation)))
                   [@recording? @reviewing-audio?])
-       [reanimated/view {:style (style/record-button-container opacity)}
+       [ra/view {:style (style/record-button-container opacity)}
        [button/button
         {:type                :outline
          :size                32
@@ -3,7 +3,7 @@
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn :refer [use-effect]]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.audio-toolkit :as audio]
            [taoensso.timbre :as log]
            [cljs-bean.core :as bean]
@@ -37,7 +37,7 @@
    (fn [props]
      (let [{:keys [scale opacity color]} (bean/bean props)]
        (reagent/as-element
-         [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))
+         [ra/view {:style (style/animated-circle scale opacity color)}]))))))
 (defn record-button-big
  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
@@ -45,29 +45,29 @@
   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
  [:f>
   (fn []
-     (let [scale                (reanimated/use-shared-value 1)
+     (let [scale                (ra/use-val 1)
-           opacity              (reanimated/use-shared-value 0)
+           opacity              (ra/use-val 0)
           opacity-from         (if @ready-to-lock? opacity-from-lock opacity-from-default)
           animations           (map
                                 (fn [index]
                                   (let [ring-scale (ring-scale scale (* scale-padding index))]
                                     {:scale   ring-scale
-                                      :opacity (reanimated/interpolate ring-scale
+                                      :opacity (ra/interpolate ring-scale
-                                                                       [1 scale-to-each]
+                                                               [1 scale-to-each]
-                                                                       [opacity-from 0])}))
+                                                               [opacity-from 0])}))
                                 (range 0 5))
           rings-color          (cond
                                  @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
                                                                         colors/neutral-80)
                                  @ready-to-delete? colors/danger-50
                                  :else             colors/primary-50)
-           translate-y          (reanimated/use-shared-value 0)
+           translate-y          (ra/use-val 0)
-           translate-x          (reanimated/use-shared-value 0)
+           translate-x          (ra/use-val 0)
           button-color         colors/primary-50
           icon-color           (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
-           icon-opacity         (reanimated/use-shared-value 1)
+           icon-opacity         (ra/use-val 1)
-           red-overlay-opacity  (reanimated/use-shared-value 0)
+           red-overlay-opacity  (ra/use-val 0)
-           gray-overlay-opacity (reanimated/use-shared-value 0)
+           gray-overlay-opacity (ra/use-val 0)
           complete-animation   (fn []
                                  (cond
                                    (and @ready-to-lock? (not @record-button-is-animating?))
@@ -114,7 +114,7 @@
                                     signal-anim-duration)))
           stop-animation       (fn []
                                  (set-value opacity 0)
-                                  (reanimated/cancel-animation scale)
+                                  (ra/cancel-animation scale)
                                  (set-value scale 1)
                                  (when @clear-timeout (js/clearTimeout @clear-timeout)))
           start-y-animation    (fn []
@@ -190,7 +190,7 @@
                       (start-x-animation)
                       (reset-x-animation)))
                   [@ready-to-delete?])
-       [reanimated/view
+       [ra/view
        {:style          (style/record-button-big-container translate-x translate-y opacity)
         :pointer-events :none}
        [:<>
@@ -203,9 +203,9 @@
              :color   rings-color}])
          animations)]
        [rn/view {:style (style/record-button-big-body button-color)}
-         [reanimated/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}]
+         [ra/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}]
-         [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}]
+         [ra/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}]
-         [reanimated/view {:style (style/record-button-big-icon-container icon-opacity)}
+         [ra/view {:style (style/record-button-big-icon-container icon-opacity)}
          (if @locked?
            [rn/view {:style style/stop-icon}]
            [icons/icon :i/audio {:color icon-color}])]]]))])
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear
@@ -14,13 +14,13 @@
  [recording? ready-to-send? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity                   (reanimated/use-shared-value 0)
+     (let [opacity                   (ra/use-val 0)
-           translate-y               (reanimated/use-shared-value 20)
+           translate-y               (ra/use-val 20)
-           connector-opacity         (reanimated/use-shared-value 0)
+           connector-opacity         (ra/use-val 0)
-           width                     (reanimated/use-shared-value 12)
+           width                     (ra/use-val 12)
-           height                    (reanimated/use-shared-value 24)
+           height                    (ra/use-val 24)
-           border-radius-first-half  (reanimated/use-shared-value 16)
+           border-radius-first-half  (ra/use-val 16)
-           border-radius-second-half (reanimated/use-shared-value 8)
+           border-radius-second-half (ra/use-val 8)
           start-y-animation         (fn []
                                       (animate-linear-with-delay translate-y 12 50 133.33)
                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
@@ -74,14 +74,14 @@
                       @recording? (reset-y-animation)))
                   [@ready-to-send?])
       [:<>
-        [reanimated/view {:style (style/send-button-container opacity)}
+        [ra/view {:style (style/send-button-container opacity)}
-         [reanimated/view
+         [ra/view
          {:style (style/send-button-connector connector-opacity
                                               width
                                               height
                                               border-radius-first-half
                                               border-radius-second-half)}]]
-        [reanimated/view
+        [ra/view
         {:style          (style/send-button translate-y opacity)
          :pointer-events :none}
         [icons/icon :i/arrow-up
@@ -1,9 +1,9 @@
 (ns quo2.components.record-audio.record-audio.helpers
-  (:require [react-native.reanimated :as reanimated]))
+  (:require [react-native.reanimated :as ra]))
 (defn animate-linear
  [shared-value value duration]
-  (reanimated/animate-shared-value-with-timing
+  (ra/animate
   shared-value
   value
   duration
@@ -11,26 +11,26 @@
 (defn animate-linear-with-delay
  [shared-value value duration delay]
-  (reanimated/animate-shared-value-with-delay
+  (ra/animate-delay
   shared-value
   value
   delay
   duration
-   :linear
+   :linear))
   delay))
 (defn animate-linear-with-delay-loop
  [shared-value value duration delay]
-  (reanimated/animate-shared-value-with-delay-repeat
+  (ra/animate-delay-repeat
   shared-value
   value
   duration
   :linear
   delay
-   -1))
+   -1
   duration
   :linear))
 (defn animate-easing
  [shared-value value duration]
-  (reanimated/animate-shared-value-with-timing
+  (ra/animate
   shared-value
   value
   duration
@@ -38,13 +38,13 @@
 (defn animate-easing-with-delay
  [shared-value value duration delay]
-  (reanimated/animate-shared-value-with-delay
+  (ra/animate-delay
   shared-value
   value
   delay
   duration
-   :easing1
+   :easing1))
   delay))
 (defn set-value
  [shared-value value]
-  (reanimated/set-shared-value shared-value value))
+  (ra/set-val shared-value value))
@@ -1,10 +1,10 @@
 (ns quo2.components.record-audio.record-audio.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn animated-circle
  [scale opacity color]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:scale scale}]
    :opacity   opacity}
   {:width           56
@@ -19,7 +19,7 @@
 (defn record-button-big-container
  [translate-x translate-y opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateY translate-y}
                {:translateX translate-x}]
    :opacity   opacity}
@@ -44,7 +44,7 @@
 (defn record-button-big-red-overlay
  [red-overlay-opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity red-overlay-opacity}
   {:position         :absolute
    :top              0
@@ -55,7 +55,7 @@
 (defn record-button-big-gray-overlay
  [gray-overlay-opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity gray-overlay-opacity}
   {:position         :absolute
    :top              0
@@ -66,7 +66,7 @@
 (defn record-button-big-icon-container
  [icon-opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity icon-opacity}
   {}))
@@ -78,7 +78,7 @@
 (defn send-button-container
  [opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity opacity}
   {:justify-content :center
    :align-items     :center
@@ -90,7 +90,7 @@
 (defn send-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -106,7 +106,7 @@
 (defn send-button
  [translate-y opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateY translate-y}]
    :opacity   opacity}
   {:justify-content  :center
@@ -125,7 +125,7 @@
 (defn lock-button-container
  [opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity opacity}
   {:transform       [{:rotate "45deg"}]
    :justify-content :center
@@ -138,7 +138,7 @@
 (defn lock-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -154,7 +154,7 @@
 (defn lock-button
  [translate-x-y opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateX translate-x-y}
                {:translateY translate-x-y}]
    :opacity   opacity}
@@ -172,7 +172,7 @@
 (defn delete-button-container
  [opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity opacity}
   {:justify-content :center
    :align-items     :center
@@ -184,7 +184,7 @@
 (defn delete-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -200,7 +200,7 @@
 (defn delete-button
  [scale translate-x opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateX translate-x}
                {:scale scale}]
    :opacity   opacity}
@@ -217,7 +217,7 @@
 (defn record-button-container
  [opacity]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity opacity}
   {:margin-bottom 32
    :margin-right  32}))
@@ -20,12 +20,13 @@
            [react-native.flat-list :as rn-flat-list]
            [utils.collection]))
-;; Animations
+;;; Constants
-(def slide-in-up-animation SlideInUp)
+(def ^:const default-duration 300)
 (def slide-out-up-animation SlideOutUp)
 (def linear-transition LinearTransition)
-;; Animated Components
+;;; Worklets
 (def worklet-factory (js/require "../src/js/worklet_factory.js"))
 ;;; Animated Components
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))
 (def view (reagent/adapt-react-class (.-View reanimated)))
@@ -34,18 +35,22 @@
 (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))
 (def fast-image (create-animated-component FastImage))
 (def blur-view (create-animated-component (.-BlurView blur)))
-;; Hooks
+;;; Easings
-(def use-shared-value useSharedValue)
+(def in-out (.-inOut ^js Easing))
-(def use-animated-style useAnimatedStyle)
+(def bezier (.-bezier ^js Easing))
 (def easings
  {:default (in-out (.-quad ^js Easing))
   :linear  (bezier 0 0 1 1)
   :easing1 (bezier 0.25 0.1 0.25 1)
   :easing2 (bezier 0 0.3 0.6 0.9)
   :easing3 (bezier 0.3 0.3 0.3 0.9)})
-;; Animations
+;;; Animations
 (def with-timing withTiming)
 (def with-delay withDelay)
 (def with-spring withSpring)
@@ -53,112 +58,103 @@
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
 (def cancel-animation cancelAnimation)
 (defn with-repeat-timing
  [val reps reverse? duration easing]
  (with-repeat
   (with-timing val
                (clj->js {:duration duration
                          :easing   (get easings easing)}))
   reps
   reverse?))
 ;; Easings
 (def bezier (.-bezier ^js Easing))
-(def in-out
+;;; Hooks and Helpers
-  (.-inOut ^js Easing))
+(def use-val useSharedValue)
-
+(defn get-val
 (def easings
  {:linear  (bezier 0 0 1 1)
   :easing1 (bezier 0.25 0.1 0.25 1)
   :easing2 (bezier 0 0.3 0.6 0.9)
   :easing3 (bezier 0.3 0.3 0.3 0.9)})
 ;; Helper functions
 (defn get-shared-value
  [anim]
  (when anim
    (.-value anim)))
-
+(defn set-val
 (defn set-shared-value
  [anim val]
  (when (and anim (some? val))
    (set! (.-value anim) val)))
-;; Worklets
+;;; Executing animation functions
-(def worklet-factory (js/require "../src/js/worklet_factory.js"))
+(defn animate
  ([animation value]
   (animate animation value default-duration :default))
  ([animation value duration]
   (animate animation value duration :default))
  ([animation value duration easing]
   (set-val animation
            (with-timing value
                         (clj->js {:duration duration
                                   :easing   (get easings easing)})))))
 (defn animate-spring
  [animation val {:keys [damping mass stiffness]}]
  (set-val animation
           (with-spring val
                        (clj->js {:damping   damping
                                  :mass      mass
                                  :stiffness stiffness}))))
 (defn animate-decay
  ([animation velocity]
   (animate-decay animation velocity []))
  ([animation velocity clamp]
   (set-val animation
            (with-decay (clj->js {:velocity velocity
                                  :clamp    clamp})))))
 (defn animate-delay
  ([animation val delay]
   (animate-delay animation val delay default-duration :default))
  ([animation val delay duration]
   (animate-delay animation val delay duration :default))
  ([animation val delay duration easing]
   (set-val animation
            (with-delay delay
                        (with-timing val
                                     (clj->js {:duration duration
                                               :easing   (get easings easing)}))))))
 (defn animate-repeat
  ([animation val reps]
   (animate-repeat animation val reps false default-duration :default))
  ([animation val reps reverse?]
   (animate-repeat animation val reps reverse? default-duration :default))
  ([animation val reps reverse? duration]
   (animate-repeat animation val reps reverse? duration :default))
  ([animation val reps reverse? duration easing]
   (set-val animation (with-repeat-timing val reps reverse? duration easing))))
 (defn animate-delay-repeat
  ([animation val duration easing delay reps]
   (animate-delay-repeat animation val duration easing delay reps false))
  ([animation val duration easing delay reps reverse?]
   (set-val animation (with-delay delay (with-repeat-timing val reps reverse? duration easing)))))
 (defn interpolate
-  ([shared-value input-range output-range]
+  ([val input-range output-range]
-   (interpolate shared-value input-range output-range nil))
+   (interpolate val input-range output-range nil))
-  ([shared-value input-range output-range extrapolation]
+  ([val input-range output-range extrapolation]
   (.interpolateValue ^js worklet-factory
-                      shared-value
+                      val
                      (clj->js input-range)
                      (clj->js output-range)
                      (clj->js extrapolation))))
-;;;; Component Animations
+
 ;;; Styling
 (def use-animated-style useAnimatedStyle)
 (defn apply-animations-to-style
  [animations style]
  (use-animated-style
   (.applyAnimationsToStyle ^js worklet-factory (clj->js animations) (clj->js style))))
 ;; Animators
 (defn animate-shared-value-with-timing
  [anim val duration easing]
  (set-shared-value anim
                    (with-timing val
                                 (js-obj "duration" duration
                                         "easing"   (get easings easing)))))
-(defn animate-shared-value-with-delay
+;;; Built-in Animations
-  [anim val duration easing delay]
+(def slide-in-up-animation SlideInUp)
-  (set-shared-value anim
+(def slide-out-up-animation SlideOutUp)
-                    (with-delay delay
+(def linear-transition LinearTransition)
                                (with-timing val
                                             (js-obj "duration" duration
                                                     "easing"   (get easings easing))))))
 (defn animate-shared-value-with-delay-default-easing
  [anim val duration delay]
  (set-shared-value anim
                    (with-delay delay
                                (with-timing val
                                             (js-obj "duration" duration
                                                     "easing"   (in-out (.-quad ^js Easing)))))))
 (defn animate-shared-value-with-repeat
  [anim val duration easing number-of-repetitions reverse?]
  (set-shared-value anim
                    (with-repeat (with-timing val
                                              (js-obj "duration" duration
                                                      "easing"   (get easings easing)))
                                 number-of-repetitions
                                 reverse?)))
 (defn animate-shared-value-with-delay-repeat
  ([anim val duration easing delay number-of-repetitions]
   (animate-shared-value-with-delay-repeat anim val duration easing delay number-of-repetitions false))
  ([anim val duration easing delay number-of-repetitions reverse?]
   (set-shared-value anim
                     (with-delay delay
                                 (with-repeat
                                  (with-timing val
                                               #js
                                                {:duration duration
                                                 :easing   (get easings easing)})
                                  number-of-repetitions
                                  reverse?)))))
 (defn animate-shared-value-with-spring
  [anim val {:keys [mass stiffness damping]}]
  (set-shared-value anim
                    (with-spring val
                                 (js-obj "mass"      mass
                                         "damping"   damping
                                         "stiffness" stiffness))))
 (defn animate-shared-value-with-decay
  [anim velocity clamp]
  (set-shared-value anim
                    (with-decay (clj->js {:velocity velocity
                                          :clamp    clamp}))))
 (defn with-timing-duration
  [val duration]
  (with-timing val
               (clj->js {:duration duration
                         :easing   (in-out (.-quad ^js Easing))})))
@@ -4,7 +4,7 @@
            [quo2.core :as quo]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [status-im.ui2.screens.chat.pin-limit-popover.style :as style]
            [utils.re-frame :as rf]))
@@ -16,17 +16,17 @@
   (fn []
     (let [width                 (rf/sub [:dimensions/window-width])
           show-pin-limit-modal? (rf/sub [:chats/pin-modal chat-id])
-           opacity-animation     (reanimated/use-shared-value 0)
+           opacity-animation     (ra/use-val 0)
-           z-index-animation     (reanimated/use-shared-value -1)]
+           z-index-animation     (ra/use-val -1)]
       (react/effect!
        #(do
-           (reanimated/set-shared-value opacity-animation
+           (ra/set-val opacity-animation
-                                        (reanimated/with-timing (if show-pin-limit-modal? 1 0)))
+                       (ra/with-timing (if show-pin-limit-modal? 1 0)))
-           (reanimated/set-shared-value z-index-animation
+           (ra/set-val z-index-animation
-                                        (reanimated/with-timing (if show-pin-limit-modal? 10 -1)))))
+                       (ra/with-timing (if show-pin-limit-modal? 10 -1)))))
       (when show-pin-limit-modal?
-         [reanimated/view
+         [ra/view
-          {:style               (reanimated/apply-animations-to-style
+          {:style               (ra/apply-animations-to-style
                                 {:opacity opacity-animation
                                  :z-index z-index-animation}
                                 (style/pin-popover width))
@@ -8,7 +8,7 @@
            [react-native.gesture :as gesture]
            [react-native.hooks :as hooks]
            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.safe-area :as safe-area]
            [reagent.core :as reagent]))
@@ -18,7 +18,7 @@
 (defn with-animation
  [value & [options callback]]
-  (reanimated/with-spring
+  (ra/with-spring
   value
   (clj->js (merge {:mass      2
                    :stiffness 500
@@ -45,12 +45,12 @@
                 max-pan-down (if @expanded?
                                bg-height-expanded
                                bg-height)]
-             (reanimated/set-shared-value pan-y
+             (ra/set-val pan-y
-                                          (max
+                         (max
-                                           (min
+                          (min
-                                            (.-translationY evt)
+                           (.-translationY evt)
-                                            max-pan-down)
+                           max-pan-down)
-                                           max-pan-up))))))
+                          max-pan-up))))))
      (gesture/on-end
       (fn [_]
         (reset! gesture-running? false)
@@ -127,8 +127,8 @@
                {:keys [keyboard-shown]} (hooks/use-keyboard)
                bg-height-expanded (- window-height (:top insets))
                bg-height (max (min @content-height bg-height-expanded) 109)
-                bottom-sheet-dy (reanimated/use-shared-value 0)
+                bottom-sheet-dy (ra/use-val 0)
-                pan-y (reanimated/use-shared-value 0)
+                pan-y (ra/use-val 0)
                translate-y (.useTranslateY ^js bottom-sheet-js window-height bottom-sheet-dy pan-y)
                bg-opacity
                (.useBackgroundOpacity ^js bottom-sheet-js translate-y bg-height window-height)
@@ -136,11 +136,11 @@
                                    (let [height (oget evt "nativeEvent" "layout" "height")]
                                      (reset! content-height height)))
                on-expanded (fn []
-                              (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
+                              (ra/set-val bottom-sheet-dy bg-height-expanded)
-                              (reanimated/set-shared-value pan-y 0))
+                              (ra/set-val pan-y 0))
                on-collapsed (fn []
-                               (reanimated/set-shared-value bottom-sheet-dy bg-height)
+                               (ra/set-val bottom-sheet-dy bg-height)
-                               (reanimated/set-shared-value pan-y 0))
+                               (ra/set-val pan-y 0))
                bottom-sheet-gesture (get-bottom-sheet-gesture
                                      pan-y
                                      translate-y
@@ -185,38 +185,38 @@
                                  @show-bottom-sheet?
                                  (if @expanded?
                                    (do
-                                      (reanimated/set-shared-value
+                                      (ra/set-val
                                       bottom-sheet-dy
                                       (with-animation (+ bg-height-expanded (.-value pan-y))))
                                      ;; Workaround for
-                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; https://github.com/software-mansion/react-native-ra/issues/1758#issue-817145741
                                      ;; withTiming/withSpring callback not working
                                      ;; on-expanded should be called as a callback of
                                      ;; with-animation instead, once this issue has been resolved
                                      (timer/set-timeout on-expanded animation-delay))
                                    (do
-                                      (reanimated/set-shared-value
+                                      (ra/set-val
                                       bottom-sheet-dy
                                       (with-animation (+ bg-height (.-value pan-y))))
                                      ;; Workaround for
-                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; https://github.com/software-mansion/react-native-ra/issues/1758#issue-817145741
                                      ;; withTiming/withSpring callback not working
                                      ;; on-collapsed should be called as a callback of
                                      ;; with-animation instead, once this issue has been resolved
                                      (timer/set-timeout on-collapsed animation-delay)))
                                  (= @show-bottom-sheet? false)
-                                  (reanimated/set-shared-value bottom-sheet-dy (with-animation 0)))))
+                                  (ra/set-val bottom-sheet-dy (with-animation 0)))))
                           [@show-bottom-sheet? @expanded? @gesture-running?])
            [:<>
             [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)}
-              [reanimated/view
+              [ra/view
-               {:style (reanimated/apply-animations-to-style
+               {:style (ra/apply-animations-to-style
                        {:opacity bg-opacity}
                        styles/backdrop)}]]
-             (cond->> [reanimated/view
+             (cond->> [ra/view
-                       {:style (reanimated/apply-animations-to-style
+                       {:style (ra/apply-animations-to-style
                                {:transform [{:translateY translate-y}]}
                                {:width  window-width
                                 :height window-height})}
@@ -1,7 +1,7 @@
 (ns status-im2.common.scroll-page.style
  (:require [quo2.foundations.colors :as colors]
            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn image-slider
  [size]
@@ -13,7 +13,7 @@
 (defn blur-slider
  [animation height]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateY animation}]}
   {:z-index          5
    :position         :absolute
@@ -39,7 +39,7 @@
 (defn sticky-header-title
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity animation}
   {:position       :absolute
    :flex-direction :row
@@ -57,7 +57,7 @@
 (defn display-picture-container
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:scale animation}]}
   {:border-radius    50
    :border-width     1
@@ -7,7 +7,7 @@
            [reagent.core :as reagent]
            [status-im2.common.scroll-page.style :as style]
            [utils.re-frame :as rf]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))
 (defn icon-color
  []
@@ -38,23 +38,23 @@
   navigate-back?]
  (let [input-range         (if platform/ios? [-47 10] [0 10])
        output-range        (if platform/ios? [-208 0] [-208 -45])
-        y                   (reanimated/use-shared-value scroll-height)
+        y                   (ra/use-val scroll-height)
-        translate-animation (reanimated/interpolate y
+        translate-animation (ra/interpolate y
-                                                    input-range
+                                            input-range
-                                                    output-range
+                                            output-range
-                                                    {:extrapolateLeft  "clamp"
+                                            {:extrapolateLeft  "clamp"
-                                                     :extrapolateRight "clamp"})
+                                             :extrapolateRight "clamp"})
-        opacity-animation   (reanimated/use-shared-value 0)
+        opacity-animation   (ra/use-val 0)
        threshold           (if platform/ios? 30 170)]
    (rn/use-effect
     #(do
-        (reanimated/set-shared-value y scroll-height)
+        (ra/set-val y scroll-height)
-        (reanimated/set-shared-value opacity-animation
+        (ra/set-val opacity-animation
-                                     (reanimated/with-timing (if (>= scroll-height threshold) 1 0)
+                    (ra/with-timing (if (>= scroll-height threshold) 1 0)
-                                                             (clj->js {:duration 300}))))
+                                    (clj->js {:duration 300}))))
     [scroll-height])
    [:<>
-     [reanimated/blur-view
+     [ra/blur-view
      {:blur-amount   20
       :blur-type     :transparent
       :overlay-color :transparent
@@ -66,7 +66,7 @@
               :left     0
               :right    0}}
      (when logo
-        [reanimated/view
+        [ra/view
         {:style (style/sticky-header-title opacity-animation)}
         [rn/image
          {:source logo
@@ -101,17 +101,17 @@
 (defn display-picture
  [scroll-height cover]
  (let [input-range (if platform/ios? [-67 10] [0 150])
-        y           (reanimated/use-shared-value scroll-height)
+        y           (ra/use-val scroll-height)
-        animation   (reanimated/interpolate y
+        animation   (ra/interpolate y
-                                            input-range
+                                    input-range
-                                            [1.2 0.5]
+                                    [1.2 0.5]
-                                            {:extrapolateLeft  "clamp"
+                                    {:extrapolateLeft  "clamp"
-                                             :extrapolateRight "clamp"})]
+                                     :extrapolateRight "clamp"})]
    (rn/use-effect #(do
-                      (reanimated/set-shared-value y scroll-height)
+                      (ra/set-val y scroll-height)
                      js/undefined)
                   [scroll-height])
-    [reanimated/view
+    [ra/view
     {:style (style/display-picture-container animation)}
     [rn/image
      {:source cover
@@ -2,26 +2,26 @@
  (:require [quo2.core :as quo]
            [react-native.core :as rn]
            [react-native.gesture :as gesture]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]
            [status-im.utils.utils :as utils.utils]
            [status-im2.common.toasts.style :as style]
            [utils.re-frame :as rf]))
 ;; (def ^:private slide-out-up-animation
-;;   (-> ^js reanimated/slide-out-up-animation
+;;   (-> ^js ra/slide-out-up-animation
 ;;       .springify
 ;;       (.damping 20)
 ;;       (.stiffness 300)))
 ;; (def ^:private slide-in-up-animation
-;;   (-> ^js reanimated/slide-in-up-animation
+;;   (-> ^js ra/slide-in-up-animation
 ;;       .springify
 ;;       (.damping 20)
 ;;       (.stiffness 300)))
 ;; (def ^:private linear-transition
-;;   (-> ^js reanimated/linear-transition
+;;   (-> ^js ra/linear-transition
 ;;       .springify
 ;;       (.damping 20)
 ;;       (.stiffness 300)))
@@ -44,7 +44,7 @@
               on-dismissed #((or (rf/sub [:toasts/toast-cursor id :on-dismissed]) identity) id)
               create-timer (fn []
                              (reset! timer (utils.utils/set-timeout close! duration)))
-               translate-y (reanimated/use-shared-value 0)
+               translate-y (ra/use-val 0)
               pan
               (->
                 (gesture/gesture-pan)
@@ -56,38 +56,38 @@
                      (cond
                        ;; reset translate y on pan down
                        (> evt-translation-y 100)
-                        (reanimated/animate-shared-value-with-spring translate-y
+                        (ra/animate-spring translate-y
-                                                                     0
+                                           0
-                                                                     {:mass      1
+                                           {:mass      1
-                                                                      :damping   20
+                                            :damping   20
-                                                                      :stiffness 300})
+                                            :stiffness 300})
                        ;; dismiss on pan up
                        (< evt-translation-y -30)
-                        (do (reanimated/animate-shared-value-with-spring
+                        (do (ra/animate-spring
                             translate-y
                             -500
                             {:mass 1 :damping 20 :stiffness 300})
                            (reset! dismissed-locally? true)
                            (close!))
                        :else
-                        (reanimated/set-shared-value translate-y
+                        (ra/set-val translate-y
-                                                     evt-translation-y)))))
+                                    evt-translation-y)))))
                 (gesture/on-end (fn [_]
                                   (when-not @dismissed-locally?
-                                     (reanimated/set-shared-value translate-y 0)
+                                     (ra/set-val translate-y 0)
                                     (create-timer)))))]
           ;; create auto dismiss timer, clear timer when unmount or duration changed
           (rn/use-effect (fn [] (create-timer) clear-timer) [duration])
           (rn/use-unmount on-dismissed)
           [gesture/gesture-detector {:gesture pan}
-            [reanimated/view
+            [ra/view
             {;; TODO: this will eanble layout animation at runtime and causing flicker on android
              ;; we need to resolve this and re-enable layout animation
              ;; issue at https://github.com/status-im/status-mobile/issues/14752
              ;; :entering slide-in-up-animation
              ;; :exiting  slide-out-up-animation
-              ;; :layout   reanimated/linear-transition
+              ;; :layout   ra/linear-transition
-              :style (reanimated/apply-animations-to-style
+              :style (ra/apply-animations-to-style
                      {:transform [{:translateY translate-y}]}
                      style/each-toast-container)}
             [toast id]]]))])))
@@ -2,10 +2,9 @@
  (:require
    [react-native.core :as rn]
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as ra]
    [status-im2.contexts.chat.lightbox.style :as style]
-    [utils.re-frame :as rf]
+    [utils.re-frame :as rf]))
    [status-im2.contexts.chat.lightbox.common :as common]))
 (def small-image-size 40)
@@ -25,10 +24,10 @@
  [:f>
   (fn []
     (let [size                    (if (= @scroll-index index) focused-image-size small-image-size)
-           size-value              (common/use-val size)
+           size-value              (ra/use-val size)
           {:keys [scroll-index-lock? small-list-ref
                   flat-list-ref]} atoms]
-       (common/set-val-timing size-value size)
+       (ra/animate size-value size)
       [rn/touchable-opacity
        {:active-opacity 1
         :on-press       (fn []
@@ -44,11 +43,11 @@
                                              #js {:animated true :index index}))
                            (if platform/ios? 50 150))
                           (rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)]))}
-        [reanimated/fast-image
+        [ra/fast-image
         {:source {:uri (:image (:content item))}
-          :style  (reanimated/apply-animations-to-style {:width  size-value
+          :style  (ra/apply-animations-to-style {:width  size-value
-                                                         :height size-value}
+                                                 :height size-value}
-                                                        {:border-radius 10})}]]))])
+                                                {:border-radius 10})}]]))])
 (defn bottom-view
  [messages index scroll-index insets animations item-width atoms]
@@ -56,7 +55,7 @@
   (fn []
     (let [text               (get-in (first messages) [:content :text])
           padding-horizontal (- (/ item-width 2) (/ focused-image-size 2))]
-       [reanimated/linear-gradient
+       [ra/linear-gradient
        {:colors [:black :transparent]
         :start  {:x 0 :y 1}
         :end    {:x 0 :y 0}
@@ -1,14 +0,0 @@
 (ns status-im2.contexts.chat.lightbox.common
  (:require [react-native.reanimated :as reanimated]))
 (def top-view-height 56)
 ;; TODO: Abstract Reanimated methods in a better way, issue:
 ;; https://github.com/status-im/status-mobile/issues/15176
 (defn set-val-timing
  [animation value]
  (reanimated/set-shared-value animation (reanimated/with-timing value)))
 (defn use-val
  [value]
  (reanimated/use-shared-value value))
@@ -1,8 +1,7 @@
 (ns status-im2.contexts.chat.lightbox.style
  (:require [quo2.foundations.colors :as colors]
            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]))
            [status-im2.contexts.chat.lightbox.common :as common]))
 ;;;; MAIN-VIEW
 (def container-view
@@ -13,7 +12,7 @@
  [top-inset {:keys [opacity rotate top-view-y top-view-x top-view-width top-view-bg top-layout]}
   window-width
   bg-color]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   (if platform/ios?
     {:transform        [{:translateY top-layout}
                         {:rotate rotate}
@@ -27,7 +26,8 @@
   {:position           :absolute
    :padding-horizontal 20
    :top                (if platform/ios? top-inset 0)
-    :height             common/top-view-height
+    ;; height defined in top_view.cljs, but can't import due to circular dependency
    :height             56
    :z-index            4
    :flex-direction     :row
    :justify-content    :space-between
@@ -49,7 +49,7 @@
 ;;;; BOTTOM-VIEW
 (defn gradient-container
  [insets {:keys [opacity bottom-layout]}]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateY bottom-layout}]
    :opacity   opacity}
   {:position       :absolute
@@ -5,38 +5,39 @@
    [react-native.core :as rn]
    [react-native.orientation :as orientation]
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as ra]
    [status-im2.contexts.chat.lightbox.common :as common]
    [status-im2.contexts.chat.lightbox.style :as style]
    [utils.datetime :as datetime]
    [utils.re-frame :as rf]))
 (def ^:const top-view-height 56)
 (defn animate-rotation
  [result screen-width screen-height insets-atom
   {:keys [rotate top-view-y top-view-x top-view-width top-view-bg]}]
-  (let [top-x (+ (/ common/top-view-height 2) (:top insets-atom))]
+  (let [top-x (+ (/ top-view-height 2) (:top insets-atom))]
    (cond
      (= result orientation/landscape-left)
      (do
-        (common/set-val-timing rotate "90deg")
+        (ra/animate rotate "90deg")
-        (common/set-val-timing top-view-y 60)
+        (ra/animate top-view-y 60)
-        (common/set-val-timing top-view-x (- (/ screen-height 2) top-x))
+        (ra/animate top-view-x (- (/ screen-height 2) top-x))
-        (common/set-val-timing top-view-width screen-height)
+        (ra/animate top-view-width screen-height)
-        (common/set-val-timing top-view-bg colors/neutral-100-opa-70))
+        (ra/animate top-view-bg colors/neutral-100-opa-70))
      (= result orientation/landscape-right)
      (do
-        (common/set-val-timing rotate "-90deg")
+        (ra/animate rotate "-90deg")
-        (common/set-val-timing top-view-y (- (- screen-width) 4))
+        (ra/animate top-view-y (- (- screen-width) 4))
-        (common/set-val-timing top-view-x (+ (/ screen-height -2) top-x))
+        (ra/animate top-view-x (+ (/ screen-height -2) top-x))
-        (common/set-val-timing top-view-width screen-height)
+        (ra/animate top-view-width screen-height)
-        (common/set-val-timing top-view-bg colors/neutral-100-opa-70))
+        (ra/animate top-view-bg colors/neutral-100-opa-70))
      (= result orientation/portrait)
      (do
-        (common/set-val-timing rotate "0deg")
+        (ra/animate rotate "0deg")
-        (common/set-val-timing top-view-y 0)
+        (ra/animate top-view-y 0)
-        (common/set-val-timing top-view-x 0)
+        (ra/animate top-view-x 0)
-        (common/set-val-timing top-view-width screen-width)
+        (ra/animate top-view-width screen-width)
-        (common/set-val-timing top-view-bg colors/neutral-100-opa-0)))))
+        (ra/animate top-view-bg colors/neutral-100-opa-0)))))
 (defn top-view
  [{:keys [from timestamp]} insets index animations landscape? screen-width]
@@ -44,14 +45,14 @@
   (fn []
     (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))
           bg-color     (if landscape? colors/neutral-100-opa-70 colors/neutral-100-opa-0)]
-       [reanimated/view
+       [ra/view
        {:style (style/top-view-container (:top insets) animations screen-width bg-color)}
        [rn/view
         {:style {:flex-direction :row
                  :align-items    :center}}
         [rn/touchable-opacity
          {:on-press (fn []
-                       (common/set-val-timing (:opacity animations) 0)
+                       (ra/animate (:opacity animations) 0)
                       (rf/dispatch (if platform/ios?
                                      [:chat.ui/exit-lightbox-signal @index]
                                      [:navigate-back])))
@@ -5,8 +5,7 @@
    [react-native.core :as rn]
    [react-native.orientation :as orientation]
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as ra]
    [status-im2.contexts.chat.lightbox.common :as common]
    [utils.re-frame :as rf]
    [react-native.safe-area :as safe-area]
    [reagent.core :as reagent]
@@ -20,18 +19,18 @@
 (defn toggle-opacity
  [opacity-value border-value transparent? index {:keys [small-list-ref]}]
-  (let [opacity (reanimated/get-shared-value opacity-value)]
+  (let [opacity (ra/get-val opacity-value)]
    (if (= opacity 1)
      (do
-        (common/set-val-timing opacity-value 0)
+        (ra/animate opacity-value 0)
        (js/setTimeout #(reset! transparent? (not @transparent?)) 400))
      (do
        (reset! transparent? (not @transparent?))
-        (reanimated/animate-shared-value-with-delay-default-easing opacity-value 1 300 50)
+        (ra/animate-delay opacity-value 1 50)
        (js/setTimeout #(when @small-list-ref
                          (.scrollToIndex ^js @small-list-ref #js {:animated false :index index}))
                       100)))
-    (common/set-val-timing border-value (if (= opacity 1) 0 12))))
+    (ra/animate border-value (if (= opacity 1) 0 12))))
 (defn handle-orientation
  [result index window animations {:keys [flat-list-ref insets-atom]}]
@@ -103,18 +102,19 @@
           scroll-index             (reagent/atom index)
           transparent?             (reagent/atom false)
           window                   (rf/sub [:dimensions/window])
-           animations               {:border         (common/use-val (if platform/ios? 0 12))
+           animations               {:border         (ra/use-val (if platform/ios? 0 12))
-                                     :opacity        (common/use-val 0)
+                                     :opacity        (ra/use-val 0)
-                                     :rotate         (common/use-val "0deg")
+                                     :rotate         (ra/use-val "0deg")
-                                     :top-layout     (common/use-val -10)
+                                     :top-layout     (ra/use-val -10)
-                                     :bottom-layout  (common/use-val 10)
+                                     :bottom-layout  (ra/use-val 10)
-                                     :top-view-y     (common/use-val 0)
+                                     :top-view-y     (ra/use-val 0)
-                                     :top-view-x     (common/use-val 0)
+                                     :top-view-x     (ra/use-val 0)
-                                     :top-view-width (common/use-val (:width window))
+                                     :top-view-width (ra/use-val (:width window))
-                                     :top-view-bg    (common/use-val colors/neutral-100-opa-0)}
+                                     :top-view-bg    (ra/use-val colors/neutral-100-opa-0)}
           callback                 (fn [e]
                                      (on-viewable-items-changed e scroll-index atoms))]
       (println "aims" (ra/get-val (:opacity animations)))
       (reset! data messages)
       (orientation/use-device-orientation-change
        (fn [result]
@@ -131,10 +131,10 @@
                          (.scrollToIndex ^js @(:flat-list-ref atoms)
                                          #js {:animated false :index index}))
                        (js/setTimeout (fn []
-                                         (common/set-val-timing (:opacity animations) 1)
+                                         (ra/animate (:opacity animations) 1)
-                                         (common/set-val-timing (:top-layout animations) 0)
+                                         (ra/animate (:top-layout animations) 0)
-                                         (common/set-val-timing (:bottom-layout animations) 0)
+                                         (ra/animate (:bottom-layout animations) 0)
-                                         (common/set-val-timing (:border animations) 12))
+                                         (ra/animate (:border animations) 12))
                                       (if platform/ios? 250 100))
                        (js/setTimeout #(reset! (:scroll-index-lock? atoms) false) 300)
                        (fn []
@@ -1,13 +1,13 @@
 (ns status-im2.contexts.chat.lightbox.zoomable-image.style
  (:require
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]))
+    [react-native.reanimated :as ra]))
 (defn container
  [{:keys [width height]}
   {:keys [pan-x pan-y pinch-x pinch-y scale]}
   set-full-height?]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform [{:translateX pan-x}
                {:translateY pan-y}
                {:translateX pinch-x}
@@ -22,7 +22,7 @@
  [{:keys [image-width image-height]}
   {:keys [rotate rotate-scale]}
   border-radius]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:transform     [{:rotate rotate}
                    {:scale rotate-scale}]
    :border-radius border-radius}
@@ -3,10 +3,96 @@
    [clojure.string :as string]
    [react-native.orientation :as orientation]
    [react-native.platform :as platform]
    [react-native.reanimated :as ra]
    [status-im2.contexts.chat.lightbox.zoomable-image.constants :as c]
    [utils.re-frame :as rf]))
 ;;; Helpers
 (defn center-x
  [{:keys [pinch-x pinch-x-start pan-x pan-x-start]} exit?]
  (let [duration (if exit? 100 c/default-duration)]
    (ra/animate pinch-x c/init-offset duration)
    (ra/set-val pinch-x-start c/init-offset)
    (ra/animate pan-x c/init-offset duration)
    (ra/set-val pan-x-start c/init-offset)))
 (defn center-y
  [{:keys [pinch-y pinch-y-start pan-y pan-y-start]} exit?]
  (let [duration (if exit? 100 c/default-duration)]
    (ra/animate pinch-y c/init-offset duration)
    (ra/set-val pinch-y-start c/init-offset)
    (ra/animate pan-y c/init-offset duration)
    (ra/set-val pan-y-start c/init-offset)))
 (defn reset-values
  [exit? animations {:keys [focal-x focal-y]}]
  (center-x animations exit?)
  (center-y animations exit?)
  (reset! focal-x nil)
  (reset! focal-y nil))
 (defn rescale-image
  [value
   exit?
   {:keys [x-threshold-scale y-threshold-scale]}
   {:keys [scale saved-scale] :as animations}
   {:keys [pan-x-enabled? pan-y-enabled?] :as props}]
  (ra/animate scale value (if exit? 100 c/default-duration))
  (ra/set-val saved-scale value)
  (when (= value c/min-scale)
    (reset-values exit? animations props))
  (reset! pan-x-enabled? (> value x-threshold-scale))
  (reset! pan-y-enabled? (> value y-threshold-scale))
  (when platform/android?
    (rf/dispatch [:chat.ui/lightbox-scale value])))
 ;;; Handlers
 (defn handle-orientation-change
  [curr-orientation
   focused?
   {:keys [landscape-scale-val x-threshold-scale y-threshold-scale]}
   {:keys [rotate rotate-scale scale] :as animations}
   {:keys [pan-x-enabled? pan-y-enabled?]}]
  (let [duration (when focused? c/default-duration)]
    (cond
      (= curr-orientation orientation/landscape-left)
      (do
        (ra/animate rotate "90deg" duration)
        (ra/animate rotate-scale landscape-scale-val duration))
      (= curr-orientation orientation/landscape-right)
      (do
        (ra/animate rotate "-90deg" duration)
        (ra/animate rotate-scale landscape-scale-val duration))
      (= curr-orientation orientation/portrait)
      (do
        (ra/animate rotate c/init-rotation duration)
        (ra/animate rotate-scale c/min-scale duration)))
    (center-x animations false)
    (center-y animations false)
    (reset! pan-x-enabled? (> (ra/get-val scale) x-threshold-scale))
    (reset! pan-y-enabled? (> (ra/get-val scale) y-threshold-scale))))
 (defn handle-exit-lightbox-signal
  "On ios, when attempting to navigate back while zoomed in, the shared-element transition animation
   doesn't execute properly, so we need to zoom out first"
  [exit-lightbox-signal index scale rescale set-full-height?]
  (when (= exit-lightbox-signal index)
    (reset! set-full-height? false)
    (if (> scale c/min-scale)
      (do
        (rescale c/min-scale true)
        (js/setTimeout #(rf/dispatch [:navigate-back]) 70))
      (rf/dispatch [:navigate-back]))
    (js/setTimeout #(rf/dispatch [:chat.ui/exit-lightbox-signal nil]) 500)))
 (defn handle-zoom-out-signal
  "Zooms out when pressing on another photo from the small bottom list"
  [zoom-out-signal index scale rescale]
  (when (and (= zoom-out-signal index) (> scale c/min-scale))
    (rescale c/min-scale true)))
 ;;; Dimensions
 (defn get-dimensions
  "Calculates all required dimensions. Dimensions calculations are different on iOS and Android because landscape
   mode is implemented differently.On Android, we just need to resize the content, and the OS takes care of the
@@ -39,25 +125,6 @@
     :y-threshold-scale   (/ screen-height (min screen-height container-height))
     :landscape-scale-val (/ portrait-image-width portrait-image-height)}))
 (defn handle-exit-lightbox-signal
  "On ios, when attempting to navigate back while zoomed in, the shared-element transition animation
   doesn't execute properly, so we need to zoom out first"
  [exit-lightbox-signal index scale rescale set-full-height?]
  (when (= exit-lightbox-signal index)
    (reset! set-full-height? false)
    (if (> scale c/min-scale)
      (do
        (rescale c/min-scale true)
        (js/setTimeout #(rf/dispatch [:navigate-back]) 70))
      (rf/dispatch [:navigate-back]))
    (js/setTimeout #(rf/dispatch [:chat.ui/exit-lightbox-signal nil]) 500)))
 (defn handle-zoom-out-signal
  "Zooms out when pressing on another photo from the small bottom list"
  [zoom-out-signal index scale rescale]
  (when (and (= zoom-out-signal index) (> scale c/min-scale))
    (rescale c/min-scale true)))
 ;;; MATH
 (defn get-max-offset
@@ -12,98 +12,6 @@
    [status-im2.contexts.chat.lightbox.zoomable-image.style :as style]
    [status-im2.contexts.chat.lightbox.zoomable-image.utils :as utils]))
 ;;;; Some aliases for reanimated methods, as they are used 10s of times in this file
 ;; TODO: Abstract Reanimated methods in a better way, issue:
 ;; https://github.com/status-im/status-mobile/issues/15176
 (defn get-val
  [animation]
  (reanimated/get-shared-value animation))
 (defn set-val
  [animation value]
  (reanimated/set-shared-value animation value))
 (defn use-val
  [value]
  (reanimated/use-shared-value value))
 (defn timing
  ([value]
   (timing value c/default-duration))
  ([value duration]
   (if (= duration nil)
     value
     (reanimated/with-timing-duration value duration))))
 (defn set-val-decay
  [animation velocity bounds]
  (reanimated/animate-shared-value-with-decay animation (* velocity c/velocity-factor) bounds))
 ;;;; Helpers
 (defn center-x
  [{:keys [pinch-x pinch-x-start pan-x pan-x-start]} exit?]
  (let [duration (if exit? 100 c/default-duration)]
    (set-val pinch-x (timing c/init-offset duration))
    (set-val pinch-x-start c/init-offset)
    (set-val pan-x (timing c/init-offset duration))
    (set-val pan-x-start c/init-offset)))
 (defn center-y
  [{:keys [pinch-y pinch-y-start pan-y pan-y-start]} exit?]
  (let [duration (if exit? 100 c/default-duration)]
    (set-val pinch-y (timing c/init-offset duration))
    (set-val pinch-y-start c/init-offset)
    (set-val pan-y (timing c/init-offset duration))
    (set-val pan-y-start c/init-offset)))
 (defn reset-values
  [exit? animations {:keys [focal-x focal-y]}]
  (center-x animations exit?)
  (center-y animations exit?)
  (reset! focal-x nil)
  (reset! focal-y nil))
 (defn rescale-image
  [value
   exit?
   {:keys [x-threshold-scale y-threshold-scale]}
   {:keys [scale saved-scale] :as animations}
   {:keys [pan-x-enabled? pan-y-enabled?] :as props}]
  (set-val scale (timing value (if exit? 100 c/default-duration)))
  (set-val saved-scale value)
  (when (= value c/min-scale)
    (reset-values exit? animations props))
  (reset! pan-x-enabled? (> value x-threshold-scale))
  (reset! pan-y-enabled? (> value y-threshold-scale))
  (when platform/android?
    (rf/dispatch [:chat.ui/lightbox-scale value])))
 (defn handle-orientation-change
  [curr-orientation
   focused?
   {:keys [landscape-scale-val x-threshold-scale y-threshold-scale]}
   {:keys [rotate rotate-scale scale] :as animations}
   {:keys [pan-x-enabled? pan-y-enabled?]}]
  (let [duration (when focused? c/default-duration)]
    (cond
      (= curr-orientation orientation/landscape-left)
      (do
        (set-val rotate (timing "90deg" duration))
        (set-val rotate-scale (timing landscape-scale-val duration)))
      (= curr-orientation orientation/landscape-right)
      (do
        (set-val rotate (timing "-90deg" duration))
        (set-val rotate-scale (timing landscape-scale-val duration)))
      (= curr-orientation orientation/portrait)
      (do
        (set-val rotate (timing c/init-rotation duration))
        (set-val rotate-scale (timing c/min-scale duration))))
    (center-x animations false)
    (center-y animations false)
    (reset! pan-x-enabled? (> (get-val scale) x-threshold-scale))
    (reset! pan-y-enabled? (> (get-val scale) y-threshold-scale))))
 ;;;; Gestures
 (defn tap-gesture
  [on-tap]
  (->
@@ -119,15 +27,15 @@
    (gesture/number-of-taps 2)
    (gesture/on-start
     (fn [e]
-       (if (= (get-val scale) c/min-scale)
+       (if (= (reanimated/get-shared-value scale) c/min-scale)
         (let [translate-x (utils/get-double-tap-offset width screen-width (oget e "x"))
               translate-y (utils/get-double-tap-offset height screen-height (oget e "y"))]
           (when (> c/double-tap-scale x-threshold-scale)
-             (set-val pan-x (timing translate-x))
+             (reanimated/set-shared-value pan-x (reanimated/with-timing translate-x))
-             (set-val pan-x-start translate-x))
+             (reanimated/set-shared-value pan-x-start translate-x))
           (when (> c/double-tap-scale y-threshold-scale)
-             (set-val pan-y (timing translate-y))
+             (reanimated/set-shared-value pan-y (reanimated/with-timing translate-y))
-             (set-val pan-y-start translate-y))
+             (reanimated/set-shared-value pan-y-start translate-y))
           (rescale c/double-tap-scale))
         (rescale c/min-scale))))))
@@ -137,30 +45,30 @@
   {:keys [saved-scale scale pinch-x pinch-y pinch-x-start pinch-y-start pan-y pan-y-start pan-x
           pan-x-start]}
   {:keys [pan-x-enabled? pan-y-enabled?]}]
-  (let [curr-offset-y (+ (get-val pan-y) (get-val pinch-y))
+  (let [curr-offset-y (+ (reanimated/get-shared-value pan-y) (reanimated/get-shared-value pinch-y))
-        max-offset-y  (utils/get-max-offset height screen-height (get-val scale))
+        max-offset-y  (utils/get-max-offset height screen-height (reanimated/get-shared-value scale))
        max-offset-y  (if (neg? curr-offset-y) (- max-offset-y) max-offset-y)
-        curr-offset-x (+ (get-val pan-x) (get-val pinch-x))
+        curr-offset-x (+ (reanimated/get-shared-value pan-x) (reanimated/get-shared-value pinch-x))
-        max-offset-x  (utils/get-max-offset width screen-width (get-val scale))
+        max-offset-x  (utils/get-max-offset width screen-width (reanimated/get-shared-value scale))
        max-offset-x  (if (neg? curr-offset-x) (- max-offset-x) max-offset-x)]
-    (when (and (> (get-val scale) y-threshold-scale)
+    (when (and (> (reanimated/get-shared-value scale) y-threshold-scale)
-               (< (get-val scale) c/max-scale)
+               (< (reanimated/get-shared-value scale) c/max-scale)
               (> (Math/abs curr-offset-y) (Math/abs max-offset-y)))
-      (set-val pinch-y (timing c/init-offset))
+      (reanimated/set-shared-value pinch-y (reanimated/with-timing c/init-offset))
-      (set-val pinch-y-start c/init-offset)
+      (reanimated/set-shared-value pinch-y-start c/init-offset)
-      (set-val pan-y (timing max-offset-y))
+      (reanimated/set-shared-value pan-y (reanimated/with-timing max-offset-y))
-      (set-val pan-y-start max-offset-y))
+      (reanimated/set-shared-value pan-y-start max-offset-y))
-    (when (and (> (get-val scale) x-threshold-scale)
+    (when (and (> (reanimated/get-shared-value scale) x-threshold-scale)
-               (< (get-val scale) c/max-scale)
+               (< (reanimated/get-shared-value scale) c/max-scale)
               (> (Math/abs curr-offset-x) (Math/abs max-offset-x)))
-      (set-val pinch-x (timing c/init-offset))
+      (reanimated/set-shared-value pinch-x (reanimated/with-timing c/init-offset))
-      (set-val pinch-x-start c/init-offset)
+      (reanimated/set-shared-value pinch-x-start c/init-offset)
-      (set-val pan-x (timing max-offset-x))
+      (reanimated/set-shared-value pan-x (reanimated/with-timing max-offset-x))
-      (set-val pan-x-start max-offset-x))
+      (reanimated/set-shared-value pan-x-start max-offset-x))
-    (reset! pan-x-enabled? (> (get-val scale) x-threshold-scale))
+    (reset! pan-x-enabled? (> (reanimated/get-shared-value scale) x-threshold-scale))
-    (reset! pan-y-enabled? (> (get-val scale) y-threshold-scale))
+    (reset! pan-y-enabled? (> (reanimated/get-shared-value scale) y-threshold-scale))
    (when platform/android?
-      (rf/dispatch [:chat.ui/lightbox-scale (get-val saved-scale)]))))
+      (rf/dispatch [:chat.ui/lightbox-scale (reanimated/get-shared-value saved-scale)]))))
 (defn pinch-gesture
  [{:keys [width height screen-height screen-width x-threshold-scale y-threshold-scale] :as dimensions}
@@ -178,41 +86,49 @@
                        (when platform/android?
                          (reset! focal-x (utils/get-focal (oget e "focalX") width screen-width))
                          (reset! focal-y (utils/get-focal (oget e "focalY") height screen-height)))))
-    (gesture/on-update (fn [e]
+    (gesture/on-update
-                         (let [new-scale   (* (oget e "scale") (get-val saved-scale))
+     (fn [e]
-                               scale-diff  (utils/get-scale-diff new-scale (get-val saved-scale))
+       (let [new-scale   (* (oget e "scale") (reanimated/get-shared-value saved-scale))
-                               new-pinch-x (utils/get-pinch-position scale-diff screen-width @focal-x)
+             scale-diff  (utils/get-scale-diff new-scale (reanimated/get-shared-value saved-scale))
-                               new-pinch-y (utils/get-pinch-position scale-diff screen-height @focal-y)]
+             new-pinch-x (utils/get-pinch-position scale-diff screen-width @focal-x)
-                           (when (and (>= new-scale c/max-scale) (= (get-val pinch-x-max) js/Infinity))
+             new-pinch-y (utils/get-pinch-position scale-diff screen-height @focal-y)]
-                             (set-val pinch-x-max (get-val pinch-x))
+         (when (and (>= new-scale c/max-scale)
-                             (set-val pinch-y-max (get-val pinch-y)))
+                    (= (reanimated/get-shared-value pinch-x-max) js/Infinity))
-                           (set-val pinch-x (+ new-pinch-x (get-val pinch-x-start)))
+           (reanimated/set-shared-value pinch-x-max (reanimated/get-shared-value pinch-x))
-                           (set-val pinch-y (+ new-pinch-y (get-val pinch-y-start)))
+           (reanimated/set-shared-value pinch-y-max (reanimated/get-shared-value pinch-y)))
-                           (set-val scale new-scale))))
+         (reanimated/set-shared-value pinch-x
                                      (+ new-pinch-x (reanimated/get-shared-value pinch-x-start)))
         (reanimated/set-shared-value pinch-y
                                      (+ new-pinch-y (reanimated/get-shared-value pinch-y-start)))
         (reanimated/set-shared-value scale new-scale))))
    (gesture/on-end
     (fn []
       (cond
-         (< (get-val scale) c/min-scale)
+         (< (reanimated/get-shared-value scale) c/min-scale)
         (rescale c/min-scale)
-         (> (get-val scale) c/max-scale)
+         (> (reanimated/get-shared-value scale) c/max-scale)
         (do
-           (set-val pinch-x (timing (get-val pinch-x-max)))
+           (reanimated/set-shared-value pinch-x
-           (set-val pinch-x-start (get-val pinch-x-max))
+                                        (reanimated/with-timing (reanimated/get-shared-value
-           (set-val pinch-x-max js/Infinity)
+                                                                 pinch-x-max)))
-           (set-val pinch-y (timing (get-val pinch-y-max)))
+           (reanimated/set-shared-value pinch-x-start (reanimated/get-shared-value pinch-x-max))
-           (set-val pinch-y-start (get-val pinch-y-max))
+           (reanimated/set-shared-value pinch-x-max js/Infinity)
-           (set-val pinch-y-max js/Infinity)
+           (reanimated/set-shared-value pinch-y
-           (set-val scale (timing c/max-scale))
+                                        (reanimated/with-timing (reanimated/get-shared-value
-           (set-val saved-scale c/max-scale))
+                                                                 pinch-y-max)))
           (reanimated/set-shared-value pinch-y-start (reanimated/get-shared-value pinch-y-max))
           (reanimated/set-shared-value pinch-y-max js/Infinity)
           (reanimated/set-shared-value scale (reanimated/with-timing c/max-scale))
           (reanimated/set-shared-value saved-scale c/max-scale))
         :else
         (do
-           (set-val saved-scale (get-val scale))
+           (reanimated/set-shared-value saved-scale (reanimated/get-shared-value scale))
-           (set-val pinch-x-start (get-val pinch-x))
+           (reanimated/set-shared-value pinch-x-start (reanimated/get-shared-value pinch-x))
-           (set-val pinch-y-start (get-val pinch-y))
+           (reanimated/set-shared-value pinch-y-start (reanimated/get-shared-value pinch-y))
-           (when (< (get-val scale) x-threshold-scale)
+           (when (< (reanimated/get-shared-value scale) x-threshold-scale)
-             (center-x animations false))
+             (utils/center-x animations false))
-           (when (< (get-val scale) y-threshold-scale)
+           (when (< (reanimated/get-shared-value scale) y-threshold-scale)
-             (center-y animations false))))
+             (utils/center-y animations false))))
       (finalize-pinch dimensions animations props)))))
 (defn pan-x-gesture
@@ -225,27 +141,33 @@
    (gesture/enabled @pan-x-enabled?)
    (gesture/average-touches false)
    (gesture/on-update (fn [e]
-                         (set-val pan-x (+ (get-val pan-x-start) (oget e "translationX")))))
+                         (reanimated/set-shared-value pan-x
                                                      (+ (reanimated/get-shared-value pan-x-start)
                                                         (oget e "translationX")))))
    (gesture/on-end
     (fn [e]
-       (let [curr-offset (+ (get-val pan-x) (get-val pinch-x-start))
+       (let [curr-offset (+ (reanimated/get-shared-value pan-x)
-             max-offset  (utils/get-max-offset width screen-width (get-val scale))
+                            (reanimated/get-shared-value pinch-x-start))
-             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)]
+             max-offset  (utils/get-max-offset width screen-width (reanimated/get-shared-value scale))
             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
             velocity    (* (oget e "velocityX") c/velocity-factor)]
         (cond
-           (< (get-val scale) x-threshold-scale)
+           (< (reanimated/get-shared-value scale) x-threshold-scale)
           (rescale c/min-scale)
           (> (Math/abs curr-offset) (Math/abs max-offset))
           (do
-             (set-val pan-x (timing max-offset))
+             (reanimated/set-shared-value pan-x (reanimated/with-timing max-offset))
-             (set-val pan-x-start max-offset)
+             (reanimated/set-shared-value pan-x-start max-offset)
-             (set-val pinch-x (timing c/init-offset))
+             (reanimated/set-shared-value pinch-x (reanimated/with-timing c/init-offset))
-             (set-val pinch-x-start c/init-offset))
+             (reanimated/set-shared-value pinch-x-start c/init-offset))
           :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (get-val pinch-x-start))
+           (let [lower-bound (- (- (Math/abs max-offset)) (reanimated/get-shared-value pinch-x-start))
-                 upper-bound (- (Math/abs max-offset) (get-val pinch-x-start))]
+                 upper-bound (- (Math/abs max-offset) (reanimated/get-shared-value pinch-x-start))]
-             (set-val pan-x-start (get-val pan-x))
+             (reanimated/set-shared-value pan-x-start (reanimated/get-shared-value pan-x))
-             (set-val-decay pan-x (oget e "velocityX") [lower-bound upper-bound])
+             (reanimated/animate-shared-value-with-decay pan-x velocity [lower-bound upper-bound])
-             (set-val-decay pan-x-start (oget e "velocityX") [lower-bound upper-bound]))))))))
+             (reanimated/animate-shared-value-with-decay pan-x-start
                                                         velocity
                                                         [lower-bound upper-bound]))))))))
 (defn pan-y-gesture
@@ -258,30 +180,34 @@
    (gesture/enabled @pan-y-enabled?)
    (gesture/average-touches false)
    (gesture/on-update (fn [e]
-                         (set-val pan-y (+ (get-val pan-y-start) (oget e "translationY")))))
+                         (reanimated/set-shared-value pan-y
                                                      (+ (reanimated/get-shared-value pan-y-start)
                                                         (oget e "translationY")))))
    (gesture/on-end
     (fn [e]
-       (let [curr-offset (+ (get-val pan-y) (get-val pinch-y-start))
+       (let [curr-offset (+ (reanimated/get-shared-value pan-y)
-             max-offset  (utils/get-max-offset height screen-height (get-val scale))
+                            (reanimated/get-shared-value pinch-y-start))
-             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)]
+             max-offset  (utils/get-max-offset height screen-height (reanimated/get-shared-value scale))
             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
             velocity    (* (oget e "velocityY") c/velocity-factor)]
         (cond
-           (< (get-val scale) y-threshold-scale)
+           (< (reanimated/get-shared-value scale) y-threshold-scale)
           (rescale c/min-scale)
           (> (Math/abs curr-offset) (Math/abs max-offset))
           (do
-             (set-val pan-y (timing max-offset))
+             (reanimated/set-shared-value pan-y (reanimated/with-timing max-offset))
-             (set-val pan-y-start max-offset)
+             (reanimated/set-shared-value pan-y-start max-offset)
-             (set-val pinch-y (timing c/init-offset))
+             (reanimated/set-shared-value pinch-y (reanimated/with-timing c/init-offset))
-             (set-val pinch-y-start c/init-offset))
+             (reanimated/set-shared-value pinch-y-start c/init-offset))
           :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (get-val pinch-y-start))
+           (let [lower-bound (- (- (Math/abs max-offset)) (reanimated/get-shared-value pinch-y-start))
-                 upper-bound (- (Math/abs max-offset) (get-val pinch-y-start))]
+                 upper-bound (- (Math/abs max-offset) (reanimated/get-shared-value pinch-y-start))]
-             (set-val pan-y-start (get-val pan-y))
+             (reanimated/set-shared-value pan-y-start (reanimated/get-shared-value pan-y))
-             (set-val-decay pan-y (oget e "velocityY") [lower-bound upper-bound])
+             (reanimated/animate-shared-value-with-decay pan-y velocity [lower-bound upper-bound])
-             (set-val-decay pan-y-start (oget e "velocityY") [lower-bound upper-bound]))))))))
+             (reanimated/animate-shared-value-with-decay pan-y-start
                                                         velocity
                                                         [lower-bound upper-bound]))))))))
 ;;;; Finally, the component
 (defn zoomable-image
  [{:keys [image-width image-height content message-id]} index border-radius on-tap]
  (let [set-full-height? (reagent/atom false)]
@@ -294,37 +220,40 @@
             curr-orientation     (or (rf/sub [:lightbox/orientation]) orientation/portrait)
             focused?             (= shared-element-id message-id)
             dimensions           (utils/get-dimensions image-width image-height curr-orientation)
-             animations           {:scale         (use-val initial-scale)
+             animations           {:scale         (reanimated/use-shared-value initial-scale)
-                                   :saved-scale   (use-val initial-scale)
+                                   :saved-scale   (reanimated/use-shared-value initial-scale)
-                                   :pan-x-start   (use-val c/init-offset)
+                                   :pan-x-start   (reanimated/use-shared-value c/init-offset)
-                                   :pan-x         (use-val c/init-offset)
+                                   :pan-x         (reanimated/use-shared-value c/init-offset)
-                                   :pan-y-start   (use-val c/init-offset)
+                                   :pan-y-start   (reanimated/use-shared-value c/init-offset)
-                                   :pan-y         (use-val c/init-offset)
+                                   :pan-y         (reanimated/use-shared-value c/init-offset)
-                                   :pinch-x-start (use-val c/init-offset)
+                                   :pinch-x-start (reanimated/use-shared-value c/init-offset)
-                                   :pinch-x       (use-val c/init-offset)
+                                   :pinch-x       (reanimated/use-shared-value c/init-offset)
-                                   :pinch-y-start (use-val c/init-offset)
+                                   :pinch-y-start (reanimated/use-shared-value c/init-offset)
-                                   :pinch-y       (use-val c/init-offset)
+                                   :pinch-y       (reanimated/use-shared-value c/init-offset)
-                                   :pinch-x-max   (use-val js/Infinity)
+                                   :pinch-x-max   (reanimated/use-shared-value js/Infinity)
-                                   :pinch-y-max   (use-val js/Infinity)
+                                   :pinch-y-max   (reanimated/use-shared-value js/Infinity)
-                                   :rotate        (use-val c/init-rotation)
+                                   :rotate        (reanimated/use-shared-value c/init-rotation)
-                                   :rotate-scale  (use-val c/min-scale)}
+                                   :rotate-scale  (reanimated/use-shared-value c/min-scale)}
             props                {:pan-x-enabled? (reagent/atom false)
                                   :pan-y-enabled? (reagent/atom false)
                                   :focal-x        (reagent/atom nil)
                                   :focal-y        (reagent/atom nil)}
             rescale              (fn [value exit?]
-                                    (rescale-image value exit? dimensions animations props))]
+                                    (utils/rescale-image value exit? dimensions animations props))]
         (rn/use-effect-once (fn []
                               (js/setTimeout #(reset! set-full-height? true) 500)
                               js/undefined))
         (when platform/ios?
-           (handle-orientation-change curr-orientation focused? dimensions animations props)
+           (utils/handle-orientation-change curr-orientation focused? dimensions animations props)
           (utils/handle-exit-lightbox-signal exit-lightbox-signal
                                              index
-                                              (get-val (:scale animations))
+                                              (reanimated/get-shared-value (:scale animations))
                                              rescale
                                              set-full-height?))
-         (utils/handle-zoom-out-signal zoom-out-signal index (get-val (:scale animations)) rescale)
+         (utils/handle-zoom-out-signal zoom-out-signal
                                       index
                                       (reanimated/get-shared-value (:scale animations))
                                       rescale)
         [:f>
          (fn []
            (let [tap               (tap-gesture on-tap)
@@ -336,10 +265,9 @@
                                     (gesture/simultaneous pinch pan-x pan-y)
                                     (gesture/exclusive double-tap tap))]
              [gesture/gesture-detector {:gesture composed-gestures}
-               [reanimated/view
+               [ra/view
                {:style (style/container dimensions animations @set-full-height?)}
-                [reanimated/fast-image
+                [ra/fast-image
                 {:source    {:uri (:image content)}
                  :native-ID (when focused? :shared-element)
                  :style     (style/image dimensions animations border-radius)}]]]))]))]))
@@ -1,7 +1,7 @@
 (ns status-im2.contexts.chat.messages.composer.mentions.view
  (:require [utils.re-frame :as rf]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [status-im2.common.contact-list-item.view :as contact-list-item]))
 (defn mention-item
@@ -13,13 +13,13 @@
  [{:keys [refs suggestions max-y]} insets]
  [:f>
   (fn []
-     (let [translate-y (reanimated/use-shared-value 0)]
+     (let [translate-y (ra/use-val 0)]
       (rn/use-effect
        (fn []
-          (reanimated/set-shared-value translate-y
+          (ra/set-val translate-y
-                                       (reanimated/with-timing (if (seq suggestions) 0 200)))))
+                      (ra/with-timing (if (seq suggestions) 0 200)))))
-       [reanimated/view
+       [ra/view
-        {:style (reanimated/apply-animations-to-style
+        {:style (ra/apply-animations-to-style
                 {:transform [{:translateY translate-y}]}
                 {:bottom     (or (:bottom insets) 0)
                  :position   :absolute
@@ -4,7 +4,7 @@
            [react-native.core :as rn]
            [react-native.hooks :as hooks]
            [react-native.gesture :as gesture]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.background-timer :as background-timer]
            [utils.re-frame :as rf]
            [status-im2.contexts.chat.messages.composer.style :as style]
@@ -43,7 +43,7 @@
        (gesture/on-start
         (fn [_]
           (if keyboard-shown
-             (swap! gesture-values assoc :pan-y (reanimated/get-shared-value translate-y))
+             (swap! gesture-values assoc :pan-y (ra/get-val translate-y))
             (input/input-focus text-input-ref))))
        (gesture/on-update
         (fn [evt]
@@ -51,7 +51,7 @@
             (let [tY (oget evt "translationY")]
               (swap! gesture-values assoc :dy (- tY (:pdy @gesture-values)))
               (swap! gesture-values assoc :pdy tY)
-               (reanimated/set-shared-value
+               (ra/set-val
                translate-y
                (max (min (+ tY (:pan-y @gesture-values)) (- min-y)) (- max-y)))))))
        (gesture/on-end
@@ -129,12 +129,12 @@
   :bg-bottom         bg-bottom
   :window-height     window-height
   :set-bg-opacity    (fn [value]
-                        (reanimated/set-shared-value bg-bottom (if (= value 1) 0 (- window-height)))
+                        (ra/set-val bg-bottom (if (= value 1) 0 (- window-height)))
-                        (reanimated/set-shared-value bg-opacity (reanimated/with-timing value)))
+                        (ra/set-val bg-opacity (ra/with-timing value)))
   :set-translate-y   (fn [value]
-                        (reanimated/set-shared-value translate-y (reanimated/with-timing value)))
+                        (ra/set-val translate-y (ra/with-timing value)))
   :set-parent-height (fn [value]
-                        (reanimated/set-shared-value parent-height (reanimated/with-timing value)))})
+                        (ra/set-val parent-height (ra/with-timing value)))})
 ;; IMPORTANT! PLEASE READ BEFORE MAKING CHANGES
@@ -165,9 +165,9 @@
               {window-height :height} (rn/use-window-dimensions)
               {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
-               translate-y (reanimated/use-shared-value 0)
+               translate-y (ra/use-val 0)
-               bg-opacity (reanimated/use-shared-value 0)
+               bg-opacity (ra/use-val 0)
-               bg-bottom (reanimated/use-shared-value (- window-height))
+               bg-bottom (ra/use-val (- window-height))
               suggestions? (and (seq suggestions)
                                 keyboard-shown
@@ -190,7 +190,7 @@
                             (when (or edit reply) 38)
                             (when (seq images) 80))))
-               parent-height (reanimated/use-shared-value min-y)
+               parent-height (ra/use-val min-y)
               max-parent-height (Math/abs (- max-y 110 (:bottom insets)))
               params
@@ -201,14 +201,14 @@
               input-content-change (get-input-content-change params)
               bottom-sheet-gesture (get-bottom-sheet-gesture params)]
           (effect! params)
-           [reanimated/view
+           [ra/view
-            {:style (reanimated/apply-animations-to-style
+            {:style (ra/apply-animations-to-style
                     {:height parent-height}
                     {})}
            ;;;;input
            [gesture/gesture-detector {:gesture bottom-sheet-gesture}
-             [reanimated/view
+             [ra/view
-              {:style (reanimated/apply-animations-to-style
+              {:style (ra/apply-animations-to-style
                       {:transform [{:translateY translate-y}]}
                       (style/input-bottom-sheet window-height))}
              [rn/view {:style (style/bottom-sheet-handle)}]
@@ -225,8 +225,8 @@
              [mentions/mentions params insets]
              [controls/view send-ref params insets chat-id images #(clean-and-minimize params)])
            ;;;;black background
-            [reanimated/view
+            [ra/view
-             {:style (reanimated/apply-animations-to-style
+             {:style (ra/apply-animations-to-style
                      {:opacity   bg-opacity
                       :transform [{:translateY bg-bottom}]}
                      (style/bottom-sheet-background window-height))}]]))])))
@@ -4,7 +4,7 @@
    [quo2.foundations.colors :as colors]
    [react-native.core :as rn]
    [react-native.fast-image :as fast-image]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as ra]
    [quo2.components.animated-header-flatlist.view :as animated-header-list]))
 (def data [0 1 2 3 4 5 6 7 8 9 10])
@@ -38,8 +38,8 @@
  [animation]
  [:f>
   (fn []
-     [reanimated/fast-image
+     [ra/fast-image
-      {:style (reanimated/apply-animations-to-style
+      {:style (ra/apply-animations-to-style
               {:width  animation
                :height animation}
               {:border-radius 72})
@@ -2,7 +2,7 @@
  (:require [quo2.components.navigation.bottom-nav-tab :as quo2]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]
            [status-im2.contexts.quo-preview.preview :as preview]))
@@ -56,8 +56,8 @@
        pass-through? (reagent/cursor state [:pass-through?])]
    [:f>
     (fn []
-       (let [icon-color-anim (reanimated/use-shared-value colors/white)]
+       (let [icon-color-anim (ra/use-val colors/white)]
-         (reanimated/set-shared-value
+         (ra/set-val
          icon-color-anim
          (get-icon-color @selected? @pass-through?))
         [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
@@ -2,7 +2,7 @@
  (:require [quo2.components.navigation.floating-shell-button :as quo2]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]
            [utils.i18n :as i18n]
            [status-im2.contexts.quo-preview.preview :as preview]))
@@ -56,7 +56,7 @@
          {:padding-vertical 60
           :align-items      :center}
          [quo2/floating-shell-button (mock-data @state)
-           nil (reanimated/use-shared-value 1)]]]])]))
+           nil (ra/use-val 1)]]]])]))
 (defn preview-floating-shell-button
  []
@@ -1,7 +1,7 @@
 (ns status-im2.contexts.shell.animation
  (:require [quo2.foundations.colors :as colors]
            [utils.re-frame :as rf]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]
            [status-im.async-storage.core :as async-storage] ;;TODO remove when not used anymore
            [status-im2.contexts.shell.constants :as shell.constants]))
@@ -71,12 +71,12 @@
 ;; Shared Values
 (defn calculate-shared-values
  []
-  (let [selected-stack-id-sv    (reanimated/use-shared-value
+  (let [selected-stack-id-sv    (ra/use-val
                                 ;; passing keywords or nil is not working with reanimated
                                 (name (or @selected-stack-id :communities-stack)))
-        pass-through-sv         (reanimated/use-shared-value false)
+        pass-through-sv         (ra/use-val false)
-        home-stack-state-sv     (reanimated/use-shared-value @home-stack-state)
+        home-stack-state-sv     (ra/use-val @home-stack-state)
-        animate-home-stack-left (reanimated/use-shared-value (not (home-stack-open?)))
+        animate-home-stack-left (ra/use-val (not (home-stack-open?)))
        home-stack-position     (calculate-home-stack-position)]
    (reset! shared-values-atom
      (reduce
@@ -153,10 +153,10 @@
  (let [home-stack-state-value (if animate?
                                 shell.constants/open-with-animation
                                 shell.constants/open-without-animation)]
-    (reanimated/set-shared-value
+    (ra/set-val
     (:selected-stack-id @shared-values-atom)
     (name stack-id))
-    (reanimated/set-shared-value
+    (ra/set-val
     (:home-stack-state @shared-values-atom)
     home-stack-state-value)
    (reset! home-stack-state home-stack-state-value)
@@ -168,8 +168,8 @@
 (defn change-tab
  [stack-id]
-  (reanimated/set-shared-value (:animate-home-stack-left @shared-values-atom) false)
+  (ra/set-val (:animate-home-stack-left @shared-values-atom) false)
-  (reanimated/set-shared-value (:selected-stack-id @shared-values-atom) (name stack-id))
+  (ra/set-val (:selected-stack-id @shared-values-atom) (name stack-id))
  (reset! selected-stack-id stack-id)
  (async-storage/set-item! :selected-stack-id stack-id))
@@ -189,10 +189,10 @@
  (let [home-stack-state-value (if animate?
                                 shell.constants/close-with-animation
                                 shell.constants/close-without-animation)]
-    (reanimated/set-shared-value
+    (ra/set-val
     (:animate-home-stack-left @shared-values-atom)
     true)
-    (reanimated/set-shared-value
+    (ra/set-val
     (:home-stack-state @shared-values-atom)
     home-stack-state-value)
    (reset! home-stack-state home-stack-state-value)
@@ -2,7 +2,7 @@
  (:require [utils.re-frame :as rf]
            [react-native.core :as rn]
            [react-native.blur :as blur]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [status-im2.contexts.shell.style :as style]
            [status-im2.contexts.shell.animation :as animation]
            [status-im2.contexts.shell.constants :as shell.constants]
@@ -36,12 +36,12 @@
           pass-through?      (rf/sub [:shell/shell-pass-through?])
           shared-values      @animation/shared-values-atom
           original-style     (style/bottom-tabs-container pass-through?)
-           animated-style     (reanimated/apply-animations-to-style
+           animated-style     (ra/apply-animations-to-style
                               {:height (:bottom-tabs-height shared-values)}
                               original-style)]
       (animation/load-stack @animation/selected-stack-id)
-       (reanimated/set-shared-value (:pass-through? shared-values) pass-through?)
+       (ra/set-val (:pass-through? shared-values) pass-through?)
-       [reanimated/view {:style animated-style}
+       [ra/view {:style animated-style}
        (when pass-through?
          [blur/view (blur-overlay-params style/bottom-tabs-blur-overlay)])
        [rn/view {:style (style/bottom-tabs)}
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.shell.home-stack
  (:require [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [react-native.safe-area :as safe-area]
            [status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
            [status-im2.contexts.chat.home.view :as chat] ;; TODO move to status-im2
@@ -23,8 +23,8 @@
  (when (load-stack? stack-id)
    [:f>
     (fn []
-       [reanimated/view
+       [ra/view
-        {:style (reanimated/apply-animations-to-style
+        {:style (ra/apply-animations-to-style
                 {:opacity        (get shared-values
                                       (get shell.constants/stacks-opacity-keywords stack-id))
                  :pointer-events (get shared-values
@@ -49,14 +49,14 @@
      (fn []
        (let [shared-values             @animation/shared-values-atom
              home-stack-original-style (styles/home-stack @animation/screen-height)
-              home-stack-animated-style (reanimated/apply-animations-to-style
+              home-stack-animated-style (ra/apply-animations-to-style
                                         {:top            (:home-stack-top shared-values)
                                          :left           (:home-stack-left shared-values)
                                          :opacity        (:home-stack-opacity shared-values)
                                          :pointer-events (:home-stack-pointer shared-values)
                                          :transform      [{:scale (:home-stack-scale shared-values)}]}
                                         home-stack-original-style)]
-          [reanimated/view {:style home-stack-animated-style}
+          [ra/view {:style home-stack-animated-style}
           [rn/view {:margin-top (:top insets) :flex 1}
            [stack-view :communities-stack shared-values]
            [stack-view :chats-stack shared-values]