Fork me on GitHub
#cljsrn
<
2020-04-15
>
Shako Farhad20:04:25

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?

jimberlage20:04:10

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

jimberlage20:04:20

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.

Shako Farhad21:04:55

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?

jimberlage21:04:08

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

Shako Farhad21:04:13

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.

Shako Farhad21:04:54

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

Shako Farhad21:04:49

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.

Shako Farhad21:04:09

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.

jimberlage21:04:28

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.

Shako Farhad21:04:43

Ahha! My god ><

Shako Farhad21:04:21

It works as expected now! 😄

Shako Farhad21:04:30

Wow! Thank you so much!

Shako Farhad21:04:33

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.

jimberlage21:04:28

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

Shako Farhad21:04:43

Oh yes please!

Shako Farhad21:04:55

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

Shako Farhad21:04:47

Thank you in advance! ^^