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

[MatiPl01]

This is the problem with how FlatList works. It just unmounts the component if scrolled far away and mounts it when it appears near the screen viewport.

You would likely have to create your own solution like keeping track of the last rendered item index (you have access to the index in the renderItem). If you scroll up, and the item with index lower than last rendered appears on the screen, you should render it without an animation.

The easiest way would be to store the last rendered item index in the ref (useRef) and add the entering layout animation to the view rendered in renderItem only if the index argument passed to renderItem is lower than the last index stored in ref.

You could also experiment with storing the last rendered index in the SharedValue and creating a custom animation with useAnimatedStyle hook in the item rendered in renderItem. You should have something like a progress SharedValue within list item components and animate the progress only if the index of the item is greater than the last previously animated item.

If you will struggle with implementation, I can help you out and give more suggestions.

[itsramiel]

I moved on from needing that. If I ever need that again will try that! Thanks