On state change and component re-rendering animation becomes junky.

First of all thanks for providing this wonderful library.

ISSUE

I am using MotiView for creating Waves animation and every time the component mounts it is working fine and on state update, the animation becomes junky and stops working at the end. I have also wrapped my animation component into the AnimatePresence but still no success.

Code Sample

     <AnimatePresence style={[styles.dot, styles.center]}>
        {[...Array(5).keys()].map(index => {
          return (
            <MotiView
              from={{opacity: 1, scale: 0}}
              animate={{opacity: 0, scale: 9}}
              transition={{
                type: 'timing',
                duration: durationCal,
                easing: Easing.inOut(Easing.ease),
                delay: index * 400,
                repeatReverse: false,
                loop: true,
              }}
              key={index}
              style={[StyleSheet.absoluteFillObject, styles.dot]}
            />
          );
        })}
     </AnimatePresence>

Demo Video

https://user-images.githubusercontent.com/67545083/151162365-ed8ec682-f8ff-4472-9e6d-f8e28f690bb4.mov

[nandorojo]

I just saw an issue with your code here. You’re using random numbers for key here. That is guaranteed to break code in react. It should always be a stable ID, or an index if indices are stable. This is guaranteeing a full re-render and random behavior. I’m almost certain this is never what you should do.

@nandorojo normal_speed is a number.

In this case, your code should just be this:

const durationCal = normal_speed - waveCounter

Also, rather than a state change, use a shared value. Moti lets you pass the result of useDerivedValue to transition, meaning you don’t have to trigger re-renders and get better performance. You’ll have to split each item into its own component, and then you can do something like this:

const waveCounter = useSharedValue(100)
const onSwipe = () => {
  'worklet'

  // change your waveCounter here somehow
  waveCounter.value = 200
}

// then return each item

// then inside of each item

const transition = useDerivedValue(() => ({
  type: 'timing',
  duration: normal_speed - waveCounter.value,
  easing: Easing.inOut(Easing.ease),
  delay: index * 400,
  repeatReverse: false,
  loop: true
}))

return <MotiView transition={transition} />

Do not use exit or AnimatePresence, they don’t make sense here.

[nandorojo]

Hi @nandorojo actually I am not able to create a reproducible snack because of reanimated2 and gesture-handler version issue.

I believe these do work on Snack for iOS