AnimatePresence - Issues with exit

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]

I’m revering back as this caused a harsh regression. The only solution is likely to use a transform array.