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)
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 Nop
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