Layout animation doesn't work with FlatList

[Pietro-Putelli]

Reanimated version: 2.3.0 When I try to use FlatList instead of ScrollView, as shown in the tutorial below, the Layout.springify() doesn't work. https://docs.swmansion.com/react-native-reanimated/docs/tutorials/LayoutAnimations/layoutAnimations

Someone suggests to apply this path: https://patch-diff.githubusercontent.com/raw/piaskowyk/react-native/pull/1.patch. How can I apply the patch? Is there an alternative solution?

Thank you

[github-actions[bot]]

Issue validator

The issue is invalid!

• Section required but not found: description(for label 🐞 bug)
• Section required but not found: expected behavior(for label 🐞 bug)
• Section required but not found: actual behavior & steps to reproduce(for label 🐞 bug)
• Section required but not found: package versions(for label 🐞 bug)

[DigitalZebra]

I believe this is what itemLayoutAnimation is supposed to be for on Reanimated2's version of FlatList: https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/component/FlatList.tsx#L26

So I'd expect something like this to work (instead of the Animated.ScrollView):

<Animated.FlatList
        data={participantList}
        keyExtractor={p => p.id}
        style={[{width: '100%'}]}
        itemLayoutAnimation={Layout.springify()}
        renderItem={({item: participant}) => {
          return (
            <Participant
              name={participant.name}
              onRemove={() => removeParticipant(participant.id)}
            />
          )
        }}
      />

However, I'm getting the same behavior as a normal FlatList- which is there's no springify on the position of the items when adding/removing.

[andresribeiro]

Same here

[DigitalZebra]

I believe this is what itemLayoutAnimation is supposed to be for on Reanimated2's version of FlatList: https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/component/FlatList.tsx#L26

So I'd expect something like this to work (instead of the Animated.ScrollView):

<Animated.FlatList
        data={participantList}
        keyExtractor={p => p.id}
        style={[{width: '100%'}]}
        itemLayoutAnimation={Layout.springify()}
        renderItem={({item: participant}) => {
          return (
            <Participant
              name={participant.name}
              onRemove={() => removeParticipant(participant.id)}
            />
          )
        }}
      />

However, I'm getting the same behavior as a normal FlatList- which is there's no springify on the position of the items when adding/removing.

Ah turns out this code works on iOS, but not on Android - so seems like this is an Android only issue.

[hirbod]

Layout animation does not work on iOS either correctly. All the animations do only work as long as the Flatlist Item which you try to add or remove is not in the overflowed area. As soon as your element is in a overflowed (eg hidden segment), the animations do not trigger on them. When my list shrinks or I remove elements at an index where the item is not overflowed, the animation works. (at least on iOS)

[Pietro-Putelli]

I can now confirm, that react native reanimated 2.3.0 works with the code I’ve initially published. Thank you, all the software mansion developers for the best react-native library.

On 16 Jan 2022, at 9:26 PM, Hirbod @.***> wrote:

Layout animation does not work on iOS either correctly. All the animations do only work as long as the Flatlist Item which you try to add or remove is not in the overflowed area. As soon as your element is in a overflowed (eg hidden segment), the animations do not trigger on them. When my list shrinks or I remove elements at an index where the item is not overflowed, the animation works. (at least on iOS)

— Reply to this email directly, view it on GitHub https://github.com/software-mansion/react-native-reanimated/issues/2737#issuecomment-1013946285, or unsubscribe https://github.com/notifications/unsubscribe-auth/APL4WSMM5OHGLORW3ZOHIADUWMSYJANCNFSM5J6ISNKA. You are receiving this because you authored the thread.

[j-piasecki]

Hi! It's recommended to use FlatList exported from react-native-reanimated it should also solve the problem.

[tarikko]

Not working for android :( ig it's better to just use ScrollView instead :disappointed: anyway I will still wait for better support

[000xuandu]

Same bug.

"react-native-reanimated": "^2.4.1",

const DATA = Array(10)
  .fill(1)
  .map((_, index) => index + 1);

<Animated.FlatList
        data={data}
        style={{flex: 1}}
        renderItem={({item}) => (
          <Animated.View
            key={item}
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.delay(100)}
            style={styles.listItem}>
            <Text>{item}</Text>
          </Animated.View>
        )}
      />

https://user-images.githubusercontent.com/33916400/157805089-cc2dc2f9-4122-4def-80ba-62e1b361bc8e.mov

[arunim2405]

Any updates on this?

[nandorojo]

You need to use the itemLayoutAnimation prop on the Animated.FlatList:

// put this outside of render code
const layout = Layout.springify()

<Animated.FlatList 
  itemLayoutAnimation={layout}
/>

[tarikko]

You need to use the itemLayoutAnimation on the Animated.FlatList:

// put this outside of render code
const layout = Layout.springify()

<Animated.FlatList 
  itemLayoutAnimation={layout}
/>

If you can make a demo, then that would be awesome.

[agoyal0422]

You need to use the itemLayoutAnimation prop on the Animated.FlatList:

// put this outside of render code
const layout = Layout.springify()

<Animated.FlatList 
  itemLayoutAnimation={layout}
/>

This doesn't work for me. I'm still getting no animations on a Flatlist View with numColumns={2}

[kevindingens]

Bumping this issue - problem persists across both iOS and Android, even when using the above suggested, elsewhere suggested, and combinations of each.

[hadnet]

This is still an issue, a very serious problem may add. I'm using Reanimated 3-rc and nothing works, I read like a dozen of issues and non of them fix this problem.

[bi885895]

do you have any news? I code on my android device and when i delete item from array, animation don't work

[eprice122]

I am seeing this issue as well

[YounesKHENIFER]

same here

[milanp93]

You can make entering and exciting animations by wrapping your ListItem in Animated.View, or put it inside the ListItem component: const renderItem = ({ item }) => ( <Animated.View entering={BounceInLeft} exiting={BounceOutRight}> <PostItem item={item} /> </Animated.View> ) Entering animation works for me on both Android and IOS, but the existing animations still not working. P.S. it works with classic FlatList don't need to import FlatList from Reanimated.

[km5x2]

This issue still exists 😞

[shedworth]

Still a thing

[amaurycoudr]

get the same issue as well

[fakhergh]

You can make entering and exciting animations by wrapping your ListItem in Animated.View, or put it inside the ListItem component: const renderItem = ({ item }) => ( <Animated.View entering={BounceInLeft} exiting={BounceOutRight}> <PostItem item={item} /> </Animated.View> ) Entering animation works for me on both Android and IOS, but the existing animations still not working. P.S. it works with classic FlatList don't need to import FlatList from Reanimated.

Hi everyone, entering and exiting animations are not enough for list items animation's harmony and itemLayoutAnimation is not working with createAnimatedComponent function. Therefore, you should override the CellRendererComponent property of the animated list, see the example below for an animated flatlist, it is working fine on both Android and iOS.

import * as React from 'react';
import { FlatList } from 'react-native';

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

// you can use it to create a section list e.g: 
// const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);


function App() {
  const [items, setItems] = React.useState<Array<any>>([]);

  const renderItem = React.useCallback(
    ({ item }: any) => (
      <TouchableOpacity
          activeOpacity={0.9}
          onPress={() => {
            setItems(prevState => prevState.filter((i: number) => i !== item));
          }}>
          <View style={{height:100, marginVertical: 12, backgroundColor: "red" }}>
            <Text style={{ color: "white", fontSize: 18}}>
              {item}
            </Text>
          </View>
      </TouchableOpacity>
    ),
    [],
  );

  const onPress = React.useCallback(() => {
    setItems(prevState => {
      return [Date.now(), ...prevState];
    });
  }, []);

  const keyExtractor = React.useCallback((item: any) => {
    return item.toString();
  }, []);

  const renderCell = React.useCallback(
    (props: any) => (
      <Animated.View
         {...props}
          layout={Layout.springify()}
          entering={ZoomIn}
          exiting={ZoomOut}/>
    ),
    [],
  );

  return (
    <View style={{flex:1}} >
      <Button title="ADD ITEM" onPress={onPress} />
      <AnimatedFlatList
        contentContainerStyle={{ paddingHorizontal: 24 }}
        data={items}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        CellRendererComponent={renderCell}
      />
    </View>
  );
}

Here is visual results:

Android	iOS

[dimaportenko]

@fakhergh thanks for sharing. I've just tried it with new expo project and

    "react-native-reanimated": "~2.14.4"

iOS is working just fine. Android isn't working. What version are you using?

[NanddoSalas]

@fakhergh I tried implementing CellRendererComponent while using reanimated: 2.14.4 but I didn't work on my project so I just copied and pasted your code and It didn't work again, can You share your package.json?

[fukemy]

any update? Same problem here https://snack.expo.dev/@fukemy/chat-reanimated-sample?platform=ios

[fukemy]

Hi, which version reanimated you used? This code work for ios, but not working with Android

[dimaportenko]

From my smoke test, it works on the version

"react-native-reanimated": "^3.1.0"

[aurangs7]

Same issue with FlatList, no animation on Android or iOS.

[fukemy]

@dimaportenko can u share piecies of code that you make the animation work?