AnimatePresence not working

fukemy commented 10 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Do you want this issue prioritized?

[ ] Yes, I have sponsored
[X] Not urgent

Current Behavior

please take a look in my case, I am using Moti for render header of FlatList like this:

const renderHeader = () => {
    return (
      <AnimatePresence exitBeforeEnter>
        {selected.length > 0 && <MotiView from={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 90 }}
          exit={{ opacity: 0, height: 0 }}>
          <FlatList style={{
            width: '100%',
            height: 70,
            marginBottom: 10,
          }} horizontal
            showsHorizontalScrollIndicator={false}
            data={selected}
            renderItem={renderSelected}
            item={item => item.Id}
          />
        </MotiView>}
      </AnimatePresence>
    )
  }

<FlatList
        style={{
          marginTop: 20,
          marginHorizontal: 20,
        }}
        keyboardShouldPersistTaps='never'
        keyboardDismissMode='on-drag'
        data={contacts}
        showsVerticalScrollIndicator={false}
        key={item => item.Id}
        ItemSeparatorComponent={ListDivider}
        ListHeaderComponent={renderHeader}
        renderItem={renderContact} />

Expected Behavior

All animation working

Steps To Reproduce

above code

Versions

- Moti: 0.18.0
- Reanimated: 3.3.0
- React Native: 71.8

Screenshots

Reproduction

no snack

nandorojo commented 10 months ago

i think it’s because you aren’t supposed to put renderHeader like that. it should be split into a component, not passed as a function prop to flatlist. or just pass it as raw jsx maybe.