Animated.Flatlist renderItem bug

[qorinn]

<Animated.FlatList data={weightLogs} keyExtractor={(item) => item.$id} renderItem={({ item }) => <LogComponent item={item} listView={listView} />} estimatedItemSize={10} contentContainerStyle={{ paddingHorizontal: 6 }} itemLayoutAnimation={LinearTransition} ItemSeparatorComponent={() => ( <View className='p-1'></View> )} />

`const LogComponent = ({ item, listView }) => {
const [open, setOpen] = useState(false)
const [confirmDelete, setConfirmDelete] = useState(false)

const handleDelete = async (item) => {
    if (confirmDelete) {
        console.log("Delete item", item)
    }
    else {
        setConfirmDelete(true)
        setTimeout(() => {
            setConfirmDelete(false)
        }, 2500)
    }
}

return (
    <Animated.View layout={LinearTransition}>
        {listView ? (
            <Animated.View key={`list-view-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                <View className='flex-row items-center justify-between px-3 py-[12px] gap-3 border-b border-gray-200'>
                    <Text className='text-lg font-semibold text-neutral-900'>{item.weight} {item.weight_unit}</Text>
                    <View className='flex flex-row items-center gap-2'>
                        <Text className='text-gray-500'>{new Date(item.$createdAt).toLocaleDateString()}</Text>
                        <TouchableOpacity className='me-1' onPress={() => handleDelete(item)}>
                            {confirmDelete ? (
                                <Animated.View key={`list-confirm-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                                    <FontAwesomeIcon icon="fa-solid fa-square-check" size={20} color="#6b7280" />
                                </Animated.View>
                            ) : (
                                <Animated.View key={`list-trash-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                                    <FontAwesomeIcon icon="fa-solid fa-trash" size={20} color="#6b7280" />
                                </Animated.View>
                            )}
                        </TouchableOpacity>
                    </View>
                </View>
            </Animated.View>
        ) : (
            <Animated.View key={`full-view-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                <TouchableOpacity onPress={() => setOpen(!open)} activeOpacity={0.9}>
                    <Animated.View layout={LinearTransition} className={`relative flex ${open ? "flex-col items-start" : "flex-row items-center"} bg-white p-3 gap-3`} style={[styles.lightShadow, { borderRadius: 22, borderCurve: 'continuous' }]}>
                        {item.image && (
                            <Animated.View layout={LinearTransition} style={{ borderRadius: 16, borderCurve: 'continuous', overflow: 'hidden', zIndex: 2 }}>
                                <Animated.Image
                                    source={{ uri: item.image }}
                                    contentFit='cover'
                                    contentPosition={'center'}
                                    style={{ width: open ? "100%" : 100, aspectRatio: 1 }}
                                    layout={LinearTransition}
                                />
                            </Animated.View>
                        )}
                        <Animated.View layout={LinearTransition} className='h-full flex-1 pe-8 pb-8 flex flex-col gap-1 items-start justify-start'>
                            <Text className='text-2xl font-bold text-neutral-900'>{item.weight} {item.weight_unit}</Text>
                            {item.note && (
                                <Animated.View layout={LinearTransition} className={`${open ? "max-w-full" : "max-w-[160px] "} p-3 bg-gray-100 rounded-lg overflow-hidden`}>
                                    {open ? (
                                        <Text className={`text-gray-700`}>{item.note}</Text>
                                    ) : (
                                        <Text numberOfLines={1} className={`text-gray-700`}>{item.note}</Text>
                                    )}
                                </Animated.View>
                            )}
                        </Animated.View>
                        <Animated.View layout={LinearTransition} className={`absolute ${item.image && open ? "right-4 bottom-4" : "right-4 top-4"}`}>
                            <TouchableOpacity onPress={() => handleDelete(item)}>
                                {confirmDelete ? (
                                    <Animated.View key={`full-confirm-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                                        <FontAwesomeIcon icon="fa-solid fa-square-check" size={20} color="#6b7280" />
                                    </Animated.View>
                                ) : (
                                    <Animated.View key={`full-trash-${item.$id}`} entering={FadeIn} exiting={FadeOut}>
                                        <FontAwesomeIcon icon="fa-solid fa-trash" size={20} color="#6b7280" />
                                    </Animated.View>
                                )}
                            </TouchableOpacity>
                        </Animated.View>
                        <Animated.View layout={LinearTransition} className={`absolute ${item.image && open ? "left-4 bottom-4" : "right-4 bottom-4"}`}>
                            <Text className='text-gray-500'>{new Date(item.$createdAt).toLocaleDateString()}</Text>
                        </Animated.View>
                    </Animated.View>
                </TouchableOpacity>
            </Animated.View>
        )}
    </Animated.View>
)

}`

The elements are duplicating and rendering wrong, but only if I use Animated.View in delete confirmation, otherwise it works fine, it's just not that smooth.

20250413_115439000_iOS.MP4

[MatiPl01]

Hey @qorinn!

Could you tell me if you use Paper (Old Architecture) or Fabric (New Architecture)?
Can you try removing all exiting layout animations and check if the issue is gone? I remember that there was a problem with exiting layout animation before.
Please also tell me which version of react-native-reanimated you use.

[qorinn]

Hi! I am using 3.16.7 version. The issue seems to only occur when there's an exiting animation in the "full-view" section in confirmDelete statement. I will try to update package version