Fork me on GitHub
#cljsrn
<
2023-12-27
>
Mohamad Taan10:12:21

Hey guys! Anyone here could help me with react-native-reanimated v2 specifically the useAnimatedStyle hook. I saw in previous threads that some people where discussing the following error: ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function on the UI thread. Any idea the reason behind it (Is it something with the project setup or something that is cljs specific), and how to handle it? Thanks!!

Shako Farhad18:01:36

You can't do this from cljs. I recommend to create a short javascript or typescript file with a function that does what you want. Example: typescript:

export function animatedStyle(sharedVal, backgroundColor, animFn, animFnConfig) {
    const offset = sharedVal;

    const animatedStyles = useAnimatedStyle(() => {
        return {
            height: animFn(offset.value, animFnConfig),
            position: "absolute",
            bottom: 0,
            width: `100%`,
            backgroundColor: backgroundColor,
        };
    });
    return (
        animatedStyles
    );
}
cljs: (def animated-style (.-animatedStyle (js/require "../typescript/views/reanimated.tsx"))) You can define shared-values and set animation functions etc from cljs when calling this animated-style function
(defn test-use-animated-style []
  (let [start-time (t/instant "2022-05-11T23:30:00Z")
        end-time (t/>> start-time (t/new-duration 1 :minutes))
        duration (t/duration
                   {:tick/beginning start-time
                    :tick/end end-time})
        offset (anim/use-shared-value 0)
        animated-style (animated-style offset (get-color :primary) anim/with-timing
                                 #js{:duration (t/millis duration)
                                     :easing   (:linear anim/easing)})]
   [anim/view
       {:style animated-style}]))

Shako Farhad18:01:44

This anim library that I am calling is just a utility wrapper around reanimated:

(ns suru.utils.animation
  (:require [reagent.core :as r]
            [cljs.pprint :refer [pprint]]
            ["react-native-reanimated" :as re-animated :refer [FadeIn FadeOut
                                                               FadeInUp FadeInDown
                                                               FadeOutUp FadeOutDown
                                                               SlideInUp SlideInDown
                                                               SlideOutUp SlideOutDown
                                                               SlideInLeft SlideInRight
                                                               SlideOutLeft SlideOutRight
                                                               ZoomIn ZoomOut
                                                               useSharedValue
                                                               useDerivedValue
                                                               withSpring
                                                               withTiming
                                                               withRepeat
                                                               useAnimatedStyle
                                                               Easing
                                                               Keyframe]]
            [suru.utils.style :as styles]))

(def view (r/adapt-react-class (.-View re-animated/default)))

(def use-shared-value useSharedValue)
(def use-derived-value useDerivedValue)
(def with-spring withSpring)
(def with-timing withTiming)
(def with-repeat withRepeat)
(def use-animated-style useAnimatedStyle)

(def linear-easing (.-linear Easing))
(def ease-easing (.-ease Easing))
(def quad-easing (.-quad Easing))
(def cubic-easing (.-cubic Easing))
(def poly-easing (.-poly Easing))
(def sin-easing (.-sin Easing))
(def circle-easing (.-circle Easing))
(def exp-easing (.-exp Easing))
(def elastic-easing (.-elastic Easing))
(def back-easing (.-back Easing))
(def bounce-easing (.-bounce Easing))
(def bezier-easing (.-bezier Easing))
(def bezier-fn-easing (.-bezierFn Easing))
(def in-easing (.-in Easing))
(def out-easing (.-out Easing))
(def in-out-easing (.-inOut Easing))

(def easing
  {:linear    (.-linear Easing)
   :ease      (.-ease Easing)
   :quad      (.-quad Easing)
   :cubic     (.-cubic Easing)
   :poly      (.-poly Easing)
   :sin       (.-sin Easing)
   :circle    (.-circle Easing)
   :exp       (.-exp Easing)
   :elastic   (.-elastic Easing)
   :back      (.-back Easing)
   :bounce    (.-bounce Easing)
   :bezier    (.-bezier Easing)
   :bezier-fn (.-bezierFn Easing)
   :in        (.-in Easing)
   :out       (.-out Easing)
   :in-out    (.-inOut Easing)})

(def fade-in FadeIn)
(def fade-out FadeOut)
(def fade-in-up FadeInUp)
(def fade-in-down FadeInDown)
(def fade-out-up FadeOutUp)
(def fade-out-down FadeOutDown)
(def slide-in-up SlideInUp)
(def slide-in-down SlideInDown)
(def slide-out-up SlideOutUp)
(def slide-out-down SlideOutDown)
(def slide-in-left SlideInLeft)
(def slide-in-right SlideInRight)
(def slide-out-left SlideOutLeft)
(def slide-out-right SlideOutRight)
(def zoom-in ZoomIn)
(def zoom-out ZoomOut)

;example keyframe creation
;; (new anim/keyframe (clj->js {0   {:transform [{:rotate "0deg"}]}
;                               45  {:transform [{:rotate "100deg"}]}
;                               100 {:transform [{:rotate "45deg"}]}}))
(def keyframe Keyframe)
(defn create-keyframe [keyframes]
  (new keyframe (clj->js keyframes)))

(def pre-defined-animations
  {:fade-in         fade-in
   :fade-out        fade-out
   :fade-in-up      fade-in-up
   :fade-in-down    fade-in-down
   :fade-out-up     fade-out-up
   :fade-out-down   fade-out-down
   :slide-in-up     slide-in-up
   :slide-in-down   slide-in-down
   :slide-out-up    slide-out-up
   :slide-out-down  slide-out-down
   :slide-in-left   slide-in-left
   :slide-in-right  slide-in-right
   :slide-out-left  slide-out-left
   :slide-out-right slide-out-right
   :zoom-in         zoom-in
   :zoom-out        zoom-out})

(defn duration [animation & [ms]]
  (let [animation (if (keyword? animation)
                    (get pre-defined-animations animation)
                    animation)]
    (when (js-in "duration" animation)
      (.duration animation (or ms (:animation-duration styles/view))))))

(defn with-initial-values [animation initial-values]
  (let [animation (if (keyword? animation)
                    (get pre-defined-animations animation)
                    animation)]
    (when (js-in "withInitialValues" animation)
      (.withInitialValues animation (clj->js initial-values)))))

Shako Farhad18:01:19

Last I tested this was with react native 0.70.6 and reanimated "react-native-reanimated": "3.0.0-rc.3"

Mohamad Taan08:01:49

Thanks a lot for the help, really appreciate it.

Shako Farhad08:01:04

No problem. Glad to help!