react-native-reanimated: Layout Animation doesn't work on Android with FlatList

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

  • Android
  • iOS
  • Web

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 5
  • Comments: 19 (3 by maintainers)

Most upvoted comments

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. 😃

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

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