Anyone know a best practices guide on doing animations with react native, reagent and re-frame? I have gotten a simple animation going with reacts Animated API. But everytime I fire off a re-frame event, the animation runs again. Also the animation starts without me having to click the button to start it. So basically all buttons that have reframes (dispatch) function makes the animation restart, and the animation starts automatically on app load. This is definitely not the desired function. Any ideas?

I typically use a form-3 component: https://cljdoc.org/d/reagent/reagent/0.10.0/doc/tutorials/creating-reagent-components#form-3-a-class-with-life-cycle-methods

And :component-did-mount is typically the place to fire off animations that should run once when the component is created.

A common mistake is to put it in the :render method (which, if your reagent component is just a function, you're already doing without realizing it.) . Then, you animation will run on every state change.

Ok. So I have to create a seperate component for animations. But how do I start an animation on a button click that is perhaps part of a different component?

I would put the Animated.Value object in your DB, when the animated component is mounted. Then, in your button component, subscribe to it and call (when-let [animated-value @animated-value-atm] (.start (.timing animated-value 1 500))) or something like that

I see. So when the component is mounted, I create a Animated.Value and dispatch that to the DB. Then I have a button that has that when-let function and triggers the animation on-press. Ok that makes kinda sense. May I share with you my setup so that I can get your opinion on it? I feel like I maybe have setup my app a bit wrong.

For sure!

Inside (home/view) I have all my component code. I will link that as well.

Here I am just trying a bunch of stuff with components and seeing what works. This is also where I tried to define the animation. This doesn't look good, just a playground for me to learn.

So basically I have a root component setup like this. When I create a different form 3 component and put it inside this root component, will things still be ok? Have I setup the app correct or should I change some things? I am using shadow-cljs with my project.

Oh, I got you. On line 147 of home.cljs, it should be #(start-anim fade-anim). You're calling start-anim each time the component is rendered rather than on a press event.

Ahha! My god ><

Hahah!

It works as expected now! 😄

Wow! Thank you so much!

But my core.cljs setup is ok? I have basically just gone for a template I found and I added some of the things I learned from reagent and re-frame web app development.

I'll take a look at it a bit later - I have some suggestions for how to clean it up if you're interested 😄

Oh yes please!

Be as brutal as you can! I am doing this to learn!

Thank you in advance! ^^