Weird behaviour of looping animation over lifetime of the app

[xzilja]

I created a simple scale looping animation that acts as a background of the app (code and video below). But I'm noticing strange behaviour which I assume is related to other animations. When I navigate around my app and trigger some other animations it seems that original looping animation kind of pauses / never returns to its full scale 0 state.

https://user-images.githubusercontent.com/3154053/155840855-fadc3958-6f44-429d-901b-d1cc3eef2864.mov

     <MotiView
          style={s.foregroundFire}
          from={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{
            loop: true,
            type: 'timing',
            duration: 1000
          }}
        >
          <Image img="foreground_fire_2.png" w={100} />
        </MotiView>

[xzilja]

I think this could be related to https://github.com/nandorojo/moti/issues/172 but in my case memoising component didn't solve the problem

[nandorojo]

i think it is from incorrect memoizing. my guess is that it’s re-rendering with improper memoization. are you positive it doesn’t re-render on navigation changes?

[nandorojo]

nice looking animations btw!

[xzilja]

Alright, not sure why memo didn't do the trick, but I refactored this a bit to reduce re-renders in general and it is working as expected now.

nice looking animations btw!

Thanks 😃 it is actually insane what Moti enables and how clean it is compared to normal rn Animated API, so huge thank you for this lib ❤️