AnimatePresence - Issues with exit

[hirbod]

Hi @nandorojo

maybe it's because I didn't understand it correctly, but I was hoping that I can also trigger the exit animation when I re-render a component.

const TextContainer = ({ index }: { index: number }) => {
  return (
    <AnimatePresence>
      <MotiView
        from={{
          opacity: 0,
          scale: 0.9,
          translateY: 30,
        }}
        animate={{
          opacity: 1,
          scale: 1,
          translateY: 0,
        }}
        exit={{
          opacity: 0,
          scale: 0.9,
        }}
        style={styles.textContainer}
        transition={{ type: "timing", duration: 400, delay: 50 }}
      >
        <Text style={styles.title}>{bottles[index].name}</Text>
        <Text style={styles.subtitle}>{bottles[index].slogan}</Text>
      </MotiView>
    </AnimatePresence>
  );
};

I have created a functional component which contains AnimatePresence and a MotiView.

I call the component itself like this inside my Screen.

<TextContainer key={index) />

I only pass the index so that the component re-renders (forcing a re-render when user picks a different bottle). The index change will update the Text inside TextContainer.

The animations works perfectly, but the exit animation does not happen. Looks like react just remove the element and renders it once again. Maybe I did not understand the concept of exit animations correctly, but I thought, a re-render is a unmount + mount.

[nandorojo]

Pass a unique key to MotiView if you want it to trigger exit animations when the key changes. And maybe pass exitBeforeEnter to AnimatePresence

[nandorojo]

So in your case, key={index}

[hirbod]

const TextContainer = ({ index }: { index: number }) => {
  return (
    <AnimatePresence exitBeforeEnter>
      <MotiView
        key={index}
        from={{
          opacity: 0,
          scale: 0.9,
          translateY: 30,
        }}
        animate={{
          opacity: 1,
          scale: 1,
          translateY: 0,
        }}
        exit={{
          opacity: 0,
          scale: 0.9,
        }}
        style={styles.textContainer}
        transition={{ type: "timing", duration: 400, delay: 50 }}
      >
        <Text style={styles.title}>{bottles[index].name}</Text>
        <Text style={styles.subtitle}>{bottles[index].slogan}</Text>
      </MotiView>
    </AnimatePresence>
  );
};

Not working unfortunately.

[hirbod]

Ok, so the main reason was, that I was actually passing key to TextContainer. I changed key to motiKey and added key={motiKey} to MotiView. It does play the exitAnimation now, but since it is the same element, it stays invisible after the exit. If I remove exitBeforeEnter, the exit and animate work, but it elements position is messed up.

Here is a little GIF demonstrating the issue @nandorojo
https://streamable.com/njn7g4

[nandorojo]

It does play the exitAnimation now, but since it is the same element, it stays invisible after the exit.

I don't see how that would happen if you're using key properly. Can you make a basic snack?

[nandorojo]

Oh man, I think this might be another regression from 0.11. Does downgrading fix it?

[hirbod]

Well your examples have a condition (like the examples with visible), mine not.
I use the same component. But as you can see in my video, it does somehow work with exitBeforeEnter, but it does not free the space. Kinda only works when I use position absolute.

I will try a downgrade now.

[hirbod]

WORKS PERFECTLY with 0.11... haha

[nandorojo]

🤦‍♂️

[hirbod]

I can tell for sure, that with 0.11, it does work with exitBeforeEnter as desired and without it does also work but it jumps (which is correct though, since two elements get rendered at the same time).

0.12 has a regression and breaks.

[nandorojo]

yeah...oh man. looking into this lol

[hirbod]

I am known at my partners and freelancers to find every bug they try to hide :D

[nandorojo]

I happened to see the same issue in our app at the same time.