Exit Animation not showing in FlatList

[n-ii-ma]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

When trying to animate the mounting/unmounting of a list of items, the mounting animation (from) works as expected but the unmounting animation (exit) isn't.

Expected Behavior

Unmount item with exiting animation.

Steps To Reproduce

Just try to animate the rendering of a list of items with FlatList and notice the item's behavior upon deleting an item:

<MotiView 
  from={{ opacity: 0, translateX: -ms(25) }}
  animate={{ opacity: 1, translateX: 0 }}
  exit={{ opacity: 0, translateX: -ms(25) }}
  transition={{ type: 'spring' }}
>

.....

Versions

- Moti: v0.23.7
- Reanimated: v2.14.4
- React Native: v0.71.3

Screenshots

No response

Reproduction

const data = [
  {
    id: 1,
    name: 'Jack'
  },
  {
    id: 2,
    name: 'John'
  },
  {
    id: 3,
    name: 'Joe'
  },
]  

// Render item
  const renderItem = ({ item }) => (
    <AnimatePresence>
      <Sample item={item} />
    </AnimatePresence>
  );

<FlatList
  data={data}
  extraData={data}
  renderItem={renderIncomingOrderCard}
  keyExtractor={item => item.id}
  horizontal={false}
/>

[nandorojo]

that kind of behavior isn’t possible, since the animate presence element is getting unmounted too. you could try reanimated layout animations if you’re on reanimated v3.

[nandorojo]

alternatively, you can do a normal list instead of a flatlist, have a single animate presence at the root, and give each direct child a unique key. that’ll work too.

[n-ii-ma]

I see.

Would love to see Moti integrating reanimated v3 soon.

[nandorojo]

moti should work with it out of the box