Layout Animation doesn't work on Android with FlatList

[adelbeke]

Description

There is two different behavior between iOS and Android, in fact on iOS this code runs without any problem but on Android none of theses animations works.

Expected behavior

The items should enter and exit smoothly for both platforms.

Actual behavior & steps to reproduce

iOS => The items enter and exit smoothly Android => The items enter and exit without animations

To reproduce, just runs this code with your own renderItem.

Snack or minimal code example

import React from 'react'
import { FlatList, FlatListProps } from 'react-native'
import Animated, { FadeInUp, FadeOut } from 'react-native-reanimated'

interface Props extends FlatListProps<any> {

}

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const createCellRenderer = () => {
    const cellRenderer: React.FC = (props) => {
        return (
            <Animated.View
                entering={FadeInUp.duration(250)}
                exiting={FadeOut.duration(250)}
            >
                {props.children}
            </Animated.View>
        )
    }

    return cellRenderer
}

export const AnimatedList = (props: Props) => {
    const CellRenderer = React.useMemo(
        () => createCellRenderer(),
        [],
    )

    return (
        <AnimatedFlatList
            {...props}
            CellRendererComponent={CellRenderer}
        />
    )
}

Package versions

• React Native: 0.64.3
• React Native Reanimated: 2.3.1
• NodeJS: 16.13.0

Affected platforms

• [X] Android
• [ ] iOS
• [ ] Web

[github-actions[bot]]

Issue validator

The issue is valid!

[Elabar]

For LayoutAnimation, please try Animated.FlatList as shown here #2674 instead of using createAnimatedComponent.

But there are some weird bugs atm #2703 #2704

[adelbeke]

In fact, their example use createAnimatedComponent, take a look here: https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/component/FlatList.tsx

[Elabar]

thats not example, it is their version of FlatList which overwrite the original FlatList's CellRendererComponent

Edit: opps, take back my words. Didnt see your implementation actually overwrite the CellRendererComponent

[jakub-gonet]

Idea: Have you tried replacing default scrollView with createAnimatedComponent(ScrollView) via renderScrollComponent?

Another suggestion is to use layout animations outside of renderer, that's the one thing your code does differently from Reanimated implementation.

[adelbeke]

@jakub-gonet Hello, In fact, I use the Flat List in this issue, your idea remains valuable?

[jakub-gonet]

FlatList is actually VirtualizedList that uses ScrollView under the hood, my idea is to replace this component with AnimatedScrollView. You can use renderScrollComponent prop in FlatList to control which component is used for scrolling (as I said, ScrollView is the default but you can replace it with different component).

[adelbeke]

Nice idea, little bit busy for now, but I'll try it !!! Thanks.

[adelbeke]

I come to the news. I tested your implementation which didn't change much, I went back to the basic Flat List without overloading the cellRenderer, it works for the entering animation on both platforms, only the exiting on Android doesn't works.

It's an improvement I have an animation for the entering on Android. :)

[jacobSND]

I'm having the same issue, entering works on both platforms but exiting only works on IOS. Did you happen to find a solution for this?

[adelbeke]

@jacobSND Nop

[dev-asfand]

Still, having the same issue any update on this?

[eprice122]

Also seeing this issue

[tondeee]

as well

[Facundo1609]

Is there an update ?

[albanx]

Issue is still open and replicable. I am using Expo react native and flat list

[eprice122]

Anyone found a solution for this yet?

[fukemy]

any solution now? I am using v3.1.0 but seem not solved

[Latropos]

Closing this issue, since

• const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) is not a valid way to create animated flatlist, please use Animated.FlatList instead
• We overwrite prop CellRendererComponent so unfortunately providing its value is not supported

Also it seems to be a duplicate of https://github.com/software-mansion/react-native-reanimated/issues/3100 which has slightly better repro