Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[2.3.0-alpha.3] Layout animation does not work inside `FlatList`

See original GitHub issue

Description

Participant list example when using FlatList:

https://user-images.githubusercontent.com/12449725/133289806-321b720f-6494-4034-a451-6b1abb29d094.mp4

Participant list example when using ScrollView:

https://user-images.githubusercontent.com/12449725/133290050-a4015ded-de8c-47ed-a1e2-fb4c48ea828a.mp4

Expected behavior

When using FlatList, layout={Layout.springify()} causes the list elements to slide into their new positions with a spring animation.

Actual behavior & steps to reproduce

When using FlatList, layout={Layout.springify()} has no effect.

Snack or minimal code example

I’ve modified this file in the example app:

https://github.com/software-mansion/react-native-reanimated/blob/master/Example/src/LayoutReanimation/AnimatedList.tsx

@@ -3,9 +3,10 @@ import {
   Button,
   View,
   Text,
-  ScrollView,
   TextInput,
   StyleSheet,
+  FlatList,
+  ListRenderItem,
 } from 'react-native';
 import Animated, {
   Layout,
@@ -90,17 +91,20 @@ export default function AnimatedListExample(): React.ReactElement {
     );
   };
 
+  const renderItem: ListRenderItem<EventParticipant> = ({item}) => (
+    <Participant
+        name={item.name}
+        onRemove={() => removeParticipant(item.id)}
+    />
+  );
+
   return (
     <View style={[styles.listView]}>
-      <ScrollView style={[{ width: '100%' }]}>
-        {participantList.map((participant) => (
-          <Participant
-            key={participant.id}
-            name={participant.name}
-            onRemove={() => removeParticipant(participant.id)}
-          />
-        ))}
-      </ScrollView>
+      <FlatList
+          style={[{ width: '100%' }]}
+          data={participantList}
+          renderItem={renderItem}
+          keyExtractor={({id}) => id} />
 
       <View style={[styles.bottomRow]}>
         <View style={[styles.textInput]}>

Package versions

React Native: 0.65.1
React Native Reanimated: 2.3.0-alpha.3
NodeJS: 16.6.1
Xcode: 12.5.1
Java & Gradle: -

Affected platforms

Android
iOS
Web

Issue Analytics

State:
Created 2 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

3reactions

piaskowykcommented, Sep 21, 2021

We are considering to create own simple modification of FlatList, but unfortunately, I don’t know when yet.

1reaction

valeriiamykhalovacommented, Jan 3, 2022

Hi, @piaskowyk! Are you planning to create your own modification of SectionList component in the nearest future? It has a similar issue as FlatList. Will be really helpful to me 🙂

Thanks!

Top Results From Across the Web

LayoutAnimation not working when reordering flatlist items

I got the sortOrder of every item as the item´s key. KeyExtractor of the Flatlist is also using the sortOrder of the items....

react native flatlist infinite loop - You.com | The AI Search ...

scrollToIndex({index: this.state.currentStepIndex - 1, animated: true});. If I run with the Remote Debugger active, everything works fine. If I don't use ...

react-native-reanimated: Versions - Openbase

2.3.0-alpha.3 ... We decided to redesign the architecture of Layout Animations to make them even more efficient and less buggy. That is why...

Layout Transitions | React Native Reanimated

There are plenty of ways in which you can animated layout changes however in contrast to entering and exiting animations they are not...

Animated FlatList in React Native (Reanimated) - YouTube

What's up mobile devs? Today we're going to build from scratch a super powerful and simple animation over the React Native FlatList ......