This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-12-27
Channels
- # announcements (2)
- # babashka (24)
- # beginners (116)
- # cider (7)
- # cljsrn (6)
- # clojure (38)
- # clojure-bay-area (4)
- # clojure-europe (3)
- # clojure-losangeles (1)
- # clojure-norway (10)
- # clojurescript (171)
- # datomic (16)
- # honeysql (3)
- # improve-getting-started (1)
- # introduce-yourself (2)
- # java (12)
- # malli (5)
- # membrane (2)
- # pedestal (3)
- # shadow-cljs (79)
- # spacemacs (6)
- # xtdb (10)
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!!
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}]))
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)))))
Last I tested this was with react native 0.70.6 and reanimated
"react-native-reanimated": "3.0.0-rc.3"
Thanks a lot for the help, really appreciate it.
No problem. Glad to help!