How to have an entering Animation only for newly added flatlist data?

[itsramiel]

Hi,

I would like to animate the addition of new data to my flatlist.

For my animation, I would like the layout of the flatlist to be animated, plus an entering animation for the new items.
I do have one problem:

When I scroll my flatlist and the flatlist renders the next batch of items, the entering animation is being triggered; however, I dont want this behavior. I want the entering animation only when data is added/displayed for the first time, not when it is being created by the Flatlist.

Here is an example to clarify what I want:

Code

import {useEffect, useState} from 'react'; import {ListRenderItemInfo, SafeAreaView, StyleSheet, Text} from 'react-native'; import Animated, {FadeIn, LinearTransition} from 'react-native-reanimated';

const initialData = Array(20)
.fill(0)
.map((_, i) => ({
id: i,
title: Item ${i},
}));

function App() {
const [data, setData] = useState(initialData);
function renderItem({item}: ListRenderItemInfo<(typeof data)[number]>) {
return (
<Animated.View entering={FadeIn.duration(1000)} style={styles.container}>
{item.title}
</Animated.View>
);
}

useEffect(() => {
setTimeout(() => {
setData(prevData => [{id: -1, title: 'Item -1'}, ...prevData]);
}, 1000);
}, []);

return (

<Animated.FlatList
contentContainerStyle={styles.list}
data={data}
renderItem={renderItem}
itemLayoutAnimation={LinearTransition.duration(1000)}
windowSize={1}
/>

);
}

const styles = StyleSheet.create({
screen: {
flex: 1,
},
list: {
gap: 10,
},
container: {
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'blue',
},
text: {
color: 'white',
fontSize: 20,
},
});

export default App;

Untitled.mp4

Two issues here:

• All Elements when first rendered are faded in -> I want only the Item -1 to fade in since it was added
• Newly rendered elements are faded in when scrolling down -> they shouldnt be, they are not newly added items(windowSize is set to 1 to easily reproduce)

Note: the Fade in of the Item -1 and layout animation of items when the new item is added is only what I want